溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

基于Serverless Component全棧的解決方案是什么

發(fā)布時(shí)間:2021-12-06 11:39:15 來(lái)源:億速云 閱讀:163 作者:柒染 欄目:云計(jì)算

這篇文章給大家介紹基于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è)面,然后左邊菜單選擇 域名管理

基于Serverless Component全棧的解決方案是什么

點(diǎn)擊 添加域名 按鈕,進(jìn)入域名添加頁(yè)面,因?yàn)槲覀兊撵o態(tài)文件是部署在 COS 上,所以源站類(lèi)型選擇 對(duì)象存儲(chǔ)(COS),接著 存儲(chǔ)桶設(shè)置 選擇我們的之前部署好的就行,至于下面的 加速服務(wù)配置, 一般默認(rèn)就行,如果有特殊需求,可以自己修改,如下圖:

基于Serverless Component全棧的解決方案是什么

填寫(xiě)好配置,點(diǎn)擊提交,這時(shí)部署需要等待大概 2 分鐘左右:

基于Serverless Component全棧的解決方案是什么

想通過(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

準(zhǔn)備證書(shū)

既然需要配置 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è)面,眼前一亮:

基于Serverless Component全棧的解決方案是什么

沒(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)配置一起合成:

基于Serverless Component全棧的解決方案是什么

這里因?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)證記錄:

基于Serverless Component全棧的解決方案是什么

驗(yàn)證通過(guò)后就可以使用或下載頒發(fā)的免費(fèi)證書(shū)了:

基于Serverless Component全棧的解決方案是什么

終于可以擁有屬于自己的免費(fèi)證書(shū)了,跳個(gè)舞,慶祝下~

開(kāi)始配置

證書(shū)準(zhǔn)備好了,接下來(lái)才是正題:為配置好的 CDN 域名,配置 HTTPS。進(jìn)入 域名詳情頁(yè)面,選擇 高級(jí)配置

基于Serverless Component全棧的解決方案是什么

基于Serverless Component全棧的解決方案是什么

因?yàn)槭窃隍v訊云平臺(tái)申請(qǐng)的免費(fèi)證書(shū),它會(huì)幫我們托管一份,這樣我們?cè)倥渲米C書(shū)時(shí),可以不用選擇上傳,只需要從托管的列表中選擇就行,是不是很貼心 (* ̄︶ ̄)

基于Serverless Component全棧的解決方案是什么

配置好提交就可以了,到這里我們的所有配置流程已經(jīng)全部搞定,趕緊訪(fǎng)問(wèn)看看我們的成果吧:https://blog.yugasun.com。

CDN Serverless Component

上面寫(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) 了。

修改 serverless.yml 配置

首先,請(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)始盡情搖擺了~

更新 Frontend 技術(shù)棧

之前,為了方便 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ò),可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(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)容。

AI