前の記事、一方でフルスタックサーバレスコンポーネントソリューションに基づいて構築迅速サーバレスコンポーネントを使用する方法について説明しRestful API
、バックエンドサービスとVue.js + Parcel
、フロントエンドの開発フレームワークを、最終的な展開の後、テンセントクラウドCOSアクセスURLをカスタマイズし、実用的なアプリケーションではありません私たちは、CDNの加速通じながら、一般的に静的ファイル、カスタムドメイン名を使用することを好みます。それでは、どのように展開する前に、静的なウェブサイトのドメインを加速するCDNのためにそれを設定しますか。
注:この記事を読む前に、あなたは国によってレコードのドメイン名を必要とし、そうでない場合は、この記事はあなたのためではありません。記事の練習は、私は非常にお勧めなので練習を見て、そうでない場合は、単に忘れて読んで、賑やかを参照してください......
CDNの構成
ログインCDN(コンテンツ配信ネットワーク)コンソールページは、左のメニューを選択域名管理
:
クリックして添加域名
、ボタンを私たちの静的ファイルがCOSに配備されているため、ページを追加するドメイン名を入力し、そのソースステーションタイプの選択对象存储(COS)
、その後、存储桶设置
以下のように、ライン上で私たちの前の良いを展開することを選択し加速服务配置
、ライン上の通常のデフォルト、あなたは特別なニーズを持っている場合、あなたが所有することができます修正、以下のように:
塗りつぶしの設定、2分程度、おそらく待つように展開した後、[送信]をクリックします:
私はまた、追加する必要があります経由でアクセスするドメイン名を追加したいCNAME
(あなたはこのチュートリアルを参照することができ、CNAMEを追加する方法がわからない場合は種類を、DNS解決レコードのconfigure 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 Component
それのこの最後のフルスタックソリューションの全体の内容!
ポータル:
- GitHubの:github.com/serverless
- 公式サイト:serverless.com
ようこそ:サーバレスの中国ネットワーク、することができますベストプラクティスにサーバレスで複数のアプリケーションを開発するための経験!