您好,登錄后才能下訂單哦!
這篇文章給大家介紹基于Serverless Component全棧的解決方案是什么,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
雖然之前的文章 基于 Serverless Component 的全棧解決方案 介紹了如何借助 Serverless Component 快速搭建 Restful API
后端服務(wù) 和 Vue.js + Parcel
的前端開(kāi)發(fā)架構(gòu),但是最終部署后,騰訊云 COS 的訪(fǎng)問(wèn) URL 并非自定義的,而且實(shí)際應(yīng)用中,我們更偏向于使用自定義域名,同時(shí)靜態(tài)文件一般都會(huì)通過(guò) CDN 加速。那么如何為之前部署的靜態(tài)網(wǎng)站配置 CDN 加速域名呢?
注意:在開(kāi)始閱讀本篇文章之前,你需要一個(gè)國(guó)內(nèi)備案通過(guò)的域名,如果沒(méi)有,那么本篇文章不太適合你。因?yàn)閷?shí)踐類(lèi)文章,我是極力推薦 邊看邊實(shí)踐 的,不然也只是看個(gè)熱鬧,看完就忘......配置 CDN
登錄進(jìn)入 CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))控制臺(tái)頁(yè)面,然后左邊菜單選擇 域名管理
:
點(diǎn)擊 添加域名
按鈕,進(jìn)入域名添加頁(yè)面,因?yàn)槲覀兊撵o態(tài)文件是部署在 COS 上,所以源站類(lèi)型選擇 對(duì)象存儲(chǔ)(COS)
,接著 存儲(chǔ)桶設(shè)置
選擇我們的之前部署好的就行,至于下面的 加速服務(wù)配置
, 一般默認(rèn)就行,如果有特殊需求,可以自己修改,如下圖:
填寫(xiě)好配置,點(diǎn)擊提交,這時(shí)部署需要等待大概 2 分鐘左右:
想通過(guò)添加的域名訪(fǎng)問(wèn),還需要添加一條 CNAME
類(lèi)型的,DNS 解析記錄(如果不知道如何添加 CNAME,可以參考此教程 配置 CNAME),配置好后就可以通過(guò) http://blog.yugasun.com 訪(fǎng)問(wèn)了。
但是目前非 HTTPS 的網(wǎng)站,很多瀏覽器都會(huì)有不安全提示,這樣用戶(hù)看到第一反應(yīng)可能就會(huì)畏懼,不會(huì)繼續(xù)訪(fǎng)問(wèn)了。那么如何為加速域名配置 HTTPS 呢?
既然需要配置 HTTPS,肯定是少不了證書(shū),可是一般權(quán)威機(jī)構(gòu)的證書(shū)都是需要購(gòu)買(mǎi)的,作為一個(gè) qiong bi
程序員,我是骨子里抗拒收費(fèi)服務(wù)的。
于是抱著僥幸的心理點(diǎn)開(kāi)了騰訊云的 SSL 證書(shū) 頁(yè)面,眼前一亮:
沒(méi)錯(cuò)就是 申請(qǐng)免費(fèi)證書(shū)
按鈕?。。。。?!
于是瘋狂點(diǎn)擊她!選擇免費(fèi)證書(shū)機(jī)構(gòu),填寫(xiě)域名(因?yàn)檫@里是免費(fèi)證書(shū),所以沒(méi)法設(shè)置泛域名,如:*.yugasun.com)配置一起合成:
這里因?yàn)槲乙呀?jīng)申請(qǐng)了
blog.yugasun.com
的證書(shū),為了演示,所以填寫(xiě)了demo.yugasun.com
配置提交后,選擇手動(dòng)驗(yàn)證,根據(jù)指引填寫(xiě)相關(guān) DNS 驗(yàn)證記錄:
驗(yàn)證通過(guò)后就可以使用或下載頒發(fā)的免費(fèi)證書(shū)了:
終于可以擁有屬于自己的免費(fèi)證書(shū)了,跳個(gè)舞,慶祝下~
證書(shū)準(zhǔn)備好了,接下來(lái)才是正題:為配置好的 CDN 域名,配置 HTTPS。進(jìn)入 域名詳情頁(yè)面
,選擇 高級(jí)配置
:
因?yàn)槭窃隍v訊云平臺(tái)申請(qǐng)的免費(fèi)證書(shū),它會(huì)幫我們托管一份,這樣我們?cè)倥渲米C書(shū)時(shí),可以不用選擇上傳,只需要從托管的列表中選擇就行,是不是很貼心 (* ̄︶ ̄)
配置好提交就可以了,到這里我們的所有配置流程已經(jīng)全部搞定,趕緊訪(fǎng)問(wèn)看看我們的成果吧:https://blog.yugasun.com。
上面寫(xiě)了這么多,一定花了大家不少時(shí)間吧,可是我真不是故意的,因?yàn)槲业谝淮闻渲玫臅r(shí)候也是這么一路艱辛走過(guò)來(lái)的,我只是想吸引更多志同道合的同志 - GayHub。但是經(jīng)歷一次過(guò)后,就再也不想再經(jīng)歷第二次了,實(shí)在是太痛苦了......如果你跟我也有同樣的感受,那么老鐵,千萬(wàn)不要走開(kāi),因?yàn)榻酉聛?lái)的內(nèi)容將讓你的人生更加搖擺。
你可能要罵我了,我辛辛苦苦付出了這么多,你卻說(shuō) 「不愛(ài)我了,因?yàn)槟阆矚g上了渣男」。呵呵,不好意思我也要開(kāi)始做「渣男」(CDN Component) 了。
首先,請(qǐng)進(jìn)入 基于 Serverless Component 的全棧解決方案 文章創(chuàng)建的項(xiàng)目目錄 fullstack-application-vue
,如果你不想看之前的這一篇,這里也有份項(xiàng)目直通車(chē),運(yùn)行如下命令即可:
$ serverless create --template-url https://github.com/yugasun/tencent-serverless-demo/tree/master/fullstack-application-vue
修改項(xiàng)目根目錄下 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 # 這個(gè)為你在騰訊云申請(qǐng)的免費(fèi)證書(shū) ID http2: off httpsType: 4 forceSwitch: -2
OK,配置好了,是的沒(méi)錯(cuò),你不用再做任何配置。是不是還沒(méi)開(kāi)始就結(jié)束了,這正是 “渣男” 帶來(lái)快感......
接著執(zhí)行 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
此時(shí)你可以開(kāi)始盡情搖擺了~
之前,為了方便 Demo,使用了 parcel(一款可快速構(gòu)建零配置的構(gòu)建工具),但是對(duì)于 Vue.js 開(kāi)發(fā)者來(lái)說(shuō),大多使用的是官方腳手架工具 @vue/cli 來(lái)初始化項(xiàng)目的,為了順應(yīng)潮流,我也重構(gòu)了 frontend
文件夾下的前端項(xiàng)目。但是這里需要稍微新增一個(gè)配置,在根目錄下新增 vue.config.js
文件:
const path = require('path'); const PrerenderSPAPlugin = require('prerender-spa-plugin'); module.exports = { configureWebpack: { resolve: { // 這新增環(huán)境變量別名 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');
為什么需要這么做呢?因?yàn)?express
組件在部署時(shí),會(huì)自動(dòng)在 website
組件的 inputs.code.root
屬性配置的目錄中自動(dòng)生成含有部署的 API 服務(wù)的接口文件 env.js
,如下:
// frontend/env.js window.env = {}; window.env.apiUrl = "https://service-5y16xi22-1251556596.gz.apigw.tencentcs.com/release/";
這樣我們就可以在前端中使用該接口了:
// 獲得用戶(hù)列表 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; },
關(guān)于基于Serverless Component全棧的解決方案是什么就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。