基于 Serverless Component 全栈解决方案 Ⅱ

蚀窗接口
• 阅读 2718

虽然之前的文章 基于 Serverless Component 的全栈解决方案 介绍了如何借助 Serverless Component 快速搭建 Restful API 后端服务 和 Vue.js + Parcel 的前端开发架构,但是最终部署后,腾讯云 COS 的访问 URL 并非自定义的,而且实际应用中,我们更偏向于使用自定义域名,同时静态文件一般都会通过 CDN 加速。那么如何为之前部署的静态网站配置 CDN 加速域名呢?

注意:在开始阅读本篇文章之前,你需要一个国内备案通过的域名,如果没有,那么本篇文章不太适合你。因为实践类文章,我是极力推荐 边看边实践 的,不然也只是看个热闹,看完就忘......

基于 Serverless Component 全栈解决方案 Ⅱ

配置 CDN

登录进入 CDN(内容分发网络)控制台页面,然后左边菜单选择 域名管理

基于 Serverless Component 全栈解决方案 Ⅱ

点击 添加域名 按钮,进入域名添加页面,因为我们的静态文件是部署在 COS 上,所以源站类型选择 对象存储(COS),接着 存储桶设置 选择我们的之前部署好的就行,至于下面的 加速服务配置, 一般默认就行,如果有特殊需求,可以自己修改,如下图:

基于 Serverless Component 全栈解决方案 Ⅱ

填写好配置,点击提交,这时部署需要等待大概 2 分钟左右:

基于 Serverless Component 全栈解决方案 Ⅱ

想通过添加的域名访问,还需要添加一条 CNAME 类型的,DNS 解析记录(如果不知道如何添加 CNAME,可以参考此教程 配置 CNAME),配置好后就可以通过 http://blog.yugasun.com 访问了。

但是目前非 HTTPS 的网站,很多浏览器都会有不安全提示,这样用户看到第一反应可能就会畏惧,不会继续访问了。那么如何为加速域名配置 HTTPS 呢?

配置 HTTPS

准备证书

既然需要配置 HTTPS,肯定是少不了证书,可是一般权威机构的证书都是需要购买的,作为一个 qiong bi 程序员,我是骨子里抗拒收费服务的。

于是抱着侥幸的心理点开了腾讯云的 SSL 证书 页面,眼前一亮:

基于 Serverless Component 全栈解决方案 Ⅱ

没错就是 申请免费证书 按钮!!!!!!

于是疯狂点击她!选择免费证书机构,填写域名(因为这里是免费证书,所以没法设置泛域名,如:*.yugasun.com)配置一起合成:

基于 Serverless Component 全栈解决方案 Ⅱ

这里因为我已经申请了 blog.yugasun.com 的证书,为了演示,所以填写了 demo.yugasun.com

配置提交后,选择手动验证,根据指引填写相关 DNS 验证记录:

基于 Serverless Component 全栈解决方案 Ⅱ

验证通过后就可以使用或下载颁发的免费证书了:

基于 Serverless Component 全栈解决方案 Ⅱ

终于可以拥有属于自己的免费证书了,跳个舞,庆祝下~

开始配置

证书准备好了,接下来才是正题:为配置好的 CDN 域名,配置 HTTPS。进入 域名详情页面,选择 高级配置

基于 Serverless Component 全栈解决方案 Ⅱ

基于 Serverless Component 全栈解决方案 Ⅱ

因为是在腾讯云平台申请的免费证书,它会帮我们托管一份,这样我们再配置证书时,可以不用选择上传,只需要从托管的列表中选择就行,是不是很贴心 (* ̄︶ ̄)

基于 Serverless Component 全栈解决方案 Ⅱ

配置好提交就可以了,到这里我们的所有配置流程已经全部搞定,赶紧访问看看我们的成果吧: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 全栈解决方案的全部内容就到此结束啦!

传送门:

欢迎访问:Serverless 中文网,您可以在 最佳实践 里体验更多关于 Serverless 应用的开发!


推荐阅读:《Serverless 架构:从原理、设计到项目实战》
点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
3年前
VBox 启动虚拟机失败
在Vbox(5.0.8版本)启动Ubuntu的虚拟机时,遇到错误信息:NtCreateFile(\\Device\\VBoxDrvStub)failed:0xc000000034STATUS\_OBJECT\_NAME\_NOT\_FOUND(0retries) (rc101)Makesurethekern
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Stella981 Stella981
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Easter79 Easter79
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Stella981 Stella981
3年前
JVM 字节码指令表
字节码助记符指令含义0x00nop什么都不做0x01aconst\_null将null推送至栈顶0x02iconst\_m1将int型1推送至栈顶0x03iconst\_0将int型0推送至栈顶0x04iconst\_1将int型1推送至栈顶0x05ic