基于 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 Component 全栈解决方案 Ⅱ的更多相关文章
- 基于 Serverless Component 全栈解决方案
什么是 Serverless Component Serverless Component 是 Serverless Framework 的,支持多个云资源编排和组织的场景化解决方案. Serverl ...
- 基于NodeJS的全栈式开发
前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的 NodeJS,试 ...
- (转)也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)
原文链接:http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/ 随着不同终端(pad/mobile/pc)的兴起 ...
- 也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)
前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图 ...
- 基于NodeJS的全栈式开发(基于NodeJS的前后端分离)
也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离) 前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们 ...
- 从React Native到微服务,落地一个全栈解决方案
Poplar是一个社交主题的内容社区,但自身并不做社区,旨在提供可快速二次开发的开源基础套件.前端基于React Native与Redux构建,后端由Spring Boot.Dubbo.Zookeep ...
- Serverless Component 介绍和使用指南
Serverless Component 是什么,我怎样使用它? Serverless Components 的目标是什么? 我们希望通过 Serverless Components 让广大开发者更加 ...
- FKP,一套全栈框架,基于react、webpack、koa1、babel
FKP-REST是一套前后端分离,基于javascript的全栈实现,基于node的高性能,易部署性及javascript前后端语言的一致性,学习成本,时间成本及项目快速启动等等方面,FKP都是一种不 ...
- [cnBeta]阿里云推出全栈IPv6解决方案 加速推进下一代互联网应用
https://www.cnbeta.com/articles/tech/795695.htm 访问: 阿里云 - 最高1888元通用代金券立即可用 作为国内首个全面支持IPv6的云厂商,过去5个月, ...
随机推荐
- js 鼠标位置
1.clientX.clientY 光标位置——>距离当前body可视区域的x,y坐标 2.pageX.pageY 光标位置——> 对于整个页面来说,包括了被卷去的body ...
- 【转】安卓开发经验分享:资源、UI、函数库、测试、构建一个都不能少
本文由 ImportNew - 唐尤华 翻译自 gigavoice.如需转载本文,请先参见文章末尾处的转载要求. 除了高超的武艺,每位黑忍者还需要装备最好的武器.在软件开发的世界里,好的工具能让我们的 ...
- typescript学习笔记(一)---基础变量类型
作为一个前端开发者,学习新技术跟紧大趋势是必不可少的.随着2019年TS的大火,我打算利用一个月的时间学习这门语言.接下来的几篇文章是我学习TS的学习笔记,其中也会掺杂一些学习心得.话不多说,先从基础 ...
- 三分钟网络基础-ARP协议
什么是 ARP 协议 地址解析协议 ARP (Address Resolution Protocal):在同一局域网下,根据已知道的主机或路由器的 IP 地址,找出其相应的硬件地址. 高速缓存 每一个 ...
- 图像处理基础知识:EMVA1288标准之“非均匀性”的理解
EMVA1288标准之“非均匀性”的理解 目录 1. 什么是图像的非均匀性?有标准吗? 2. EMVA1288的非均匀性内容. 3. 总结与理解 正文 1. 什么是图像的非均匀性?有标准吗?简单来说, ...
- Qt Installer Framework翻译(5-4)
自定义安装程序 您可以使用脚本通过以下方式来自定义安装程序: > 添加Qt Installer Framework操作,该操作由脚本提供,并由安装程序执行. > 添加新页面,该页面由您在p ...
- 一文带你了解 HTTP 黑科技
这是 HTTP 系列的第三篇文章,此篇文章为 HTTP 的进阶文章. 在前面两篇文章中我们讲述了 HTTP 的入门,HTTP 所有常用标头的概述,这篇文章我们来聊一下 HTTP 的一些 黑科技. HT ...
- Ogre源码学习-Image和Texture
以下文字来自源码注释: Image类:保存未压缩的图片数据,是唯一一个可以加载纹理的类.Image对象调用Codec对象来为图片数据解码. 通常,当在图片被加载前需要对它进行额外的处理,或者你想把它复 ...
- gerrit merge后不能提交问题
需求:git 分支合并 问题:使用 git merge 在本地执行分支合并操作,然后想 push 到 gerrit 上评审入库,可是在提交时,提示: ! [remote rejected] HEAD ...
- ios---CoreLocation框架实现定位功能
CoreLocation框架实现定位功能(iOS8.0之后) // // ViewController.m // 定位 // // Created by admin on 2017/9/20. // ...