基于 Serverless Component 全栈解决方案 Ⅱ

虽然以前的文章 基于 Serverless Component 的全栈解决方案 介绍了如何借助 Serverless Component 快速搭建 Restful API 后端服务 和 Vue.js + Parcel 的前端开发架构，可是最终部署后，腾讯云 COS 的访问 URL 并不是自定义的，并且实际应用中，咱们更偏向于使用自定义域名，同时静态文件通常都会经过 CDN 加速。那么如何为以前部署的静态网站配置 CDN 加速域名呢？

注意：在开始阅读本篇文章以前，你须要一个国内备案经过的域名，若是没有，那么本篇文章不太适合你。由于实践类文章，我是极力推荐 边看边实践 的，否则也只是看个热闹，看完就忘......

配置 CDN

登陆进入 CDN（内容分发网络）控制台页面，而后左边菜单选择 域名管理：

点击 添加域名 按钮，进入域名添加页面，由于咱们的静态文件是部署在 COS 上，因此源站类型选择 对象存储(COS)，接着 存储桶设置 选择咱们的以前部署好的就行，至于下面的 加速服务配置, 通常默认就行，若是有特殊需求，能够本身修改，以下图：

填写好配置，点击提交，这时部署须要等待大概 2 分钟左右：

想经过添加的域名访问，还须要添加一条 CNAME 类型的，DNS 解析记录（若是不知道如何添加 CNAME，能够参考此教程 配置 CNAME），配置好后就能够经过 http://blog.yugasun.com 访问了。

可是目前非 HTTPS 的网站，不少浏览器都会有不安全提示，这样用户看到第一反应可能就会畏惧，不会继续访问了。那么如何为加速域名配置 HTTPS 呢？

配置 HTTPS

准备证书

既然须要配置 HTTPS，确定是少不了证书，但是通常权威机构的证书都是须要购买的，做为一个 qiong bi 程序员，我是骨子里抗拒收费服务的。

因而抱着侥幸的心理点开了腾讯云的 SSL 证书 页面，眼前一亮：

没错就是 申请免费证书 按钮！！！！！！

因而疯狂点击她！选择免费证书机构，填写域名（由于这里是免费证书，因此无法设置泛域名，如：*.yugasun.com）配置一块儿合成：

这里由于我已经申请了 blog.yugasun.com 的证书，为了演示，因此填写了 demo.yugasun.com

配置提交后，选择手动验证，根据指引填写相关 DNS 验证记录：

验证经过后就可使用或下载颁发的免费证书了：

终于能够拥有属于本身的免费证书了，跳个舞，庆祝下~

开始配置

证书准备好了，接下来才是正题：为配置好的 CDN 域名，配置 HTTPS。进入 域名详情页面，选择 高级配置：

由于是在腾讯云平台申请的免费证书，它会帮咱们托管一份，这样咱们再配置证书时，能够不用选择上传，只须要从托管的列表中选择就行，是否是很贴心 (*￣︶￣)

配置好提交就能够了，到这里咱们的全部配置流程已经所有搞定，赶忙访问看看咱们的成果吧：https://blog.yugasun.com。

CDN Serverless Component

上面写了这么多，必定花了你们很多时间吧，但是我真不是故意的，由于我第一次配置的时候也是这么一路艰辛走过来的，我只是想吸引更多志同道合的同志 - GayHub。可是经历一次事后，就不再想再经历第二次了，实在是太痛苦了......若是你跟我也有一样的感觉，那么老铁，千万不要走开，由于接下来的内容将让你的人生更加摇摆。

你可能要骂我了，我辛辛苦苦付出了这么多，你却说 「不爱我了，由于你喜欢上了渣男」。呵呵，很差意思我也要开始作「渣男」(CDN Component) 了。

修改 serverless.yml 配置

首先，请进入 基于 Serverless Component 的全栈解决方案 文章建立的项目目录 fullstack-application-vue，若是你不想看以前的这一篇，这里也有份项目直通车，运行以下命令便可：

$ serverless create --template-url https://github.com/yugasun/tencent-serverless-demo/tree/master/fullstack-application-vue

修改项目根目录下 serverless.yml 配置文件，为 @serverless/tencent-website 组件的 inputs 新增 hosts 配置，以下：

frontend:
  component: '@serverless/tencent-website'
  # 参考: https://github.com/serverless-components/tencent-website/blob/master/docs/configure.md
  inputs:
    code:
      src: dist
      root: frontend
      hook: npm run build
    env:
      apiUrl: ${api.url}
    protocol: https
    # 如下为 CDN 加速域名配置
    hosts:
      - host: blog.yugasun.com
        https:
          certId: ZV99hYOj # 这个为你在腾讯云申请的免费证书 ID
          http2: off
          httpsType: 4
          forceSwitch: -2

OK，配置好了，是的没错，你不用再作任何配置。是否是还没开始就结束了，这正是 “渣男” 带来快感......

接着执行 serverless --debug 命令，静坐喝杯咖啡☕️☕️☕️，刷刷朋友圈，等待部署好就行：

$ serverless --debug
  // balabala, debug 信息输出
  frontend:
    url:  https://br1ovx-efmogqe-1251556596.cos-website.ap-guangzhou.myqcloud.com
    env:
      apiUrl: https://service-5y16xi22-1251556596.gz.apigw.tencentcs.com/release/
    host:
      - https://blog.yugasun.com (CNAME: blog.yugasun.com.cdn.dnsv1.com）
  api:
    region:              ap-guangzhou
    functionName:        fullstack-vue-api-pro
    apiGatewayServiceId: service-5y16xi22
    url:                 https://service-5y16xi22-1251556596.gz.apigw.tencentcs.com/release/

  254s › frontend › done

此时你能够开始尽情摇摆了~

更新 Frontend 技术栈

以前，为了方便 Demo，使用了 parcel（一款可快速构建零配置的构建工具），可是对于 Vue.js 开发者来讲，大多使用的是官方脚手架工具 @vue/cli 来初始化项目的，为了顺应潮流，我也重构了 frontend 文件夹下的前端项目。可是这里须要稍微新增一个配置，在根目录下新增 vue.config.js 文件：

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');

module.exports = {
  configureWebpack: {
    resolve: {
      // 这新增环境变量别名
      alias: {
        ENV: require('path').resolve(__dirname, 'env.js'),
      },
    },
  },
};

而后在咱们的入口文件 frontend/src/main.js 中引入:

import Vue from 'vue';
import App from './App.vue';
// 引入 api 接口配置 url
import 'ENV';
import './style/app.css';

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

为何须要这么作呢？由于 express 组件在部署时，会自动在 website 组件的 inputs.code.root 属性配置的目录中自动生成含有部署的 API 服务的接口文件 env.js，以下：

// frontend/env.js
window.env = {};
window.env.apiUrl = "https://service-5y16xi22-1251556596.gz.apigw.tencentcs.com/release/";

这样咱们就能够在前端中使用该接口了：

// 得到用户列表
async getUsers() {
  this.loading = true;
  const { data } = await axios.get(`${window.env.apiUrl}user`);

  if (data.code !== 0) {
    this.userList = [];
  } else {
    this.userList = data.data || [];
  }
  this.loading = false;
},

小结

以上基于腾讯云 Serverless Framework 来实现。到这里，有关 Serverless Component 全栈解决方案的所有内容就到此结束啦！

传送门：

• GitHub: github.com/serverless
• 官网：serverless.com

欢迎访问：Serverless 中文网，您能够在 最佳实践 里体验更多关于 Serverless 应用的开发！

---

推荐阅读： 《Serverless 架构：从原理、设计到项目实战》