雖然之前的文章 介紹瞭如何藉助 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 證書 頁面，眼前一亮：
沒錯就是 申請免費證書 按鈕！！！！！！
於是瘋狂的點擊了她！選擇免費證書機構，填寫域名（因為這裡是免費證書，所以沒法設置泛域名，如：*.http://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，如果你不想看之前的這一篇，這裡也有份項目直通車，運行如下命令即可：
<code>$ serverless create --template-url https://github.com/yugasun/tencent-serverless-demo/tree/master/fullstack-application-vue/<code>
修改項目根目錄下 serverless.yml 配置文件，為 @serverless/tencent-website 組件的 inputs 新增 hosts 配置，如下：
<code>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/<code>
OK，配置好了，是的沒錯，你不用再做任何配置。是不是還沒開始就結束了，這正是 “渣男” 帶來快感......
接著執行 serverless --debug 命令，靜坐喝杯咖啡☕️☕️☕️，刷刷朋友圈，等待部署好就行：
<code>$ 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/<code>
此時你可以開始盡情的搖擺了~
更新 Frontend 技術棧
之前，為了方便 Demo，使用了 parcel（一款可快速構建零配置的構建工具），但是對於 Vue.js 開發者來說，大多使用的是官方腳手架工具 @vue/cli 來初始化項目的，為了順應潮流，我也重構了 frontend 文件夾下的前端項目。但是這裡需要稍微新增一個配置，在根目錄下新增 vue.config.js 文件：
<code>const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
module.exports = {
configureWebpack: {
resolve: {
// 這新增環境變量別名
alias: {
ENV: require('path').resolve(__dirname, 'env.js'),
},
},
},
};
/<code>然後在我們的入口文件 frontend/src/main.js 中引入:
<code>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');
/<code>
為什麼需要這麼做呢？因為 express 組件在部署時，會自動在 website 組件的 inputs.code.root 屬性配置的目錄中自動生成含有部署的 API 服務的接口文件 env.js，如下：
<code>// frontend/env.js
window.env = {};
window.env.apiUrl = "https://service-5y16xi22-1251556596.gz.apigw.tencentcs.com/release/";
/<code>
這樣我們就可以在前端中使用該接口了：
<code>// 獲得用戶列表
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;
},
/<code>
總結
到這裡，有關 Serverless Component 全棧解決方案的全部內容就到此結束了。另外，Serverless 中文社區已經上線，裡面有豐富的最佳實踐文章和關乎 Serverless 優秀的學習博客，歡迎關注
閱讀更多 Serverless 的文章
