基於 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 架構：從原理、設計到項目實戰》