Based Serverless Component full-stack solutions Ⅱ

While the previous article, based on the full stack Serverless Component solutions describes how to use Serverless Component quickly build Restful APIback-end services and Vue.js + Parcelfront-end development framework, but after the final deployment, Tencent cloud COS access URL is not customizable and practical applications, we prefer to use a custom domain name, while generally static files through CDN acceleration. So how do you configure it for the CDN to accelerate static website domain before deployment?

Note : Before reading this article, you need a domain name for the record by the country, and if not, then this article is not for you. Because the practice of articles, I highly recommend watching practice , otherwise just see a bustling, read to forget ......

CDN configuration

Log in to the CDN (content delivery network) console page , then select the left menu 域名管理:

Click 添加域名the button, enter the domain name to add a page, because our static files are deployed on COS, so the source station type selection 对象存储(COS), and then 存储桶设置choose to deploy our previous good on the line, as the following 加速服务配置, usually the default on the line, if you have special needs, you can own modification, as shown below:

Fill configuration, click submit, then deploy to wait probably about two minutes:

I want to add the domain name to access via also need to add a CNAMEtype, DNS resolution records (if you do not know how to add a CNAME, you can refer to this tutorial to configure CNAME ), after a good configuration can be accessed through the 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'),
      },
    },
  },
};

Then our entry file frontend/src/main.jsin the introduction:

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');

Why do it? Because the expressassembly when deployed, automatically in websitethe component inputs.code.rootautomatically generates API interface file comprising attribute service deployment configuration directory env.js, as follows:

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

So that we can use this interface in the front end:

// 获得用户列表
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;
},

summary

Based on the above Tencent cloud Serverless Framework to achieve. Here, about the Serverless Componententire contents of the full stack solution on this end of it!

Portal:

• GitHub: github.com/serverless
• Official website: serverless.com

Welcome: Serverless Chinese network , you can best practice experience to develop more applications on Serverless in!