Deploying personal blog to Tencent cloud with serverless framework

donghui2020 2021-02-23 02:00:44
deploying personal blog tencent cloud


serverlesslife.cn The story behind the launch ~
In this paper, the source : ServerlessLife official account
2021 At the beginning of year , Use Serverless Framework   Tencent cloud in the deployment of a personal blog :serverlesslife.cn.
On the whole, I realized  Serverless Some of the conveniences :
  • No need to manage or operate the server
  • Pay per use ( There is a free quota )
Also experienced Serverless Framwwork CLI The convenience of : It greatly reduces the operational complexity , The user experience is better than the console .
 
In the whole practice , I learned a lot of new knowledge , Understand some of the logic behind , This article will share them .
 

This practice involves Tencent cloud services

  • Serverless Framework
  • COS( Object storage )
  • API gateway
  • DNSPod Domain name registration 、 Domain name filing 、 Domain name resolution
  • SSL certificate
  • CDN( Content distribution network )
 

Domain name purchase and filing

2021/01/21 stay  DNSPod(2011 It was acquired by Tencent in ) Bought a domain name  serverlesslife.cn And real name authentication .
After buying a domain name , On Chinese mainland , To use domain names to provide services , We also need to record the domain name .
2021/1/31 stay 「 Tencent cloud website for the record 」 I submitted an application for filing on a small program ;
After two rounds of auditing ( Tencent cloud audit + Reviewed by the authority ) after , stay 8 The day after 2021/02/07 Approved by .
 

Serverless Framework brief introduction

Serverless Framework yes serverless.com  A popular Serverless frame , It can be Serverless function / Applications deployed to different cloud vendors Serverless platform . In China, Tencent cloud and   serverless.com  Achieve strategic cooperation , It's a lot of customization , Made a lot of components , Make it easy to Serverless function / Application deployment to Tencent cloud .
 

Use Hugo Build a personal blog

To build a personal independent blog , There are many open source site building tools available , such as :WordPress、Hexo、Jekyll、Hugo wait , be too numerous to enumerate .
Because I used it before Hugo, And I like it more , It's used here Hugo To build a personal blog .
Hugo Is written by a Go Language implementation of static website generator . Simple 、 Easy to use 、 Efficient 、 Easy to expand 、 Rapid deployment .
Hugo Extensibility means that it has a wide range of topics to choose from , This is one of the reasons why I like it , Everyone can choose their favorite theme .
 
stay Hugo After the site is initialized , The theme is chosen from many themes : LoveIt( What a nice name !).
Themes also have many parameters , You can configure it according to your own needs .
 
After the basic framework is built , If you want to write a blog , Just add Markdown Files and related static resource files .
Hugo Support local real-time preview , You can write markdown file , You can see the effect in real time through the browser .
Of course, deploy to the production server , Need to compile , There is only one task to compile into a site hugo Orders can be done .
 
The site source code is hosted in GitHub On : https://github.com/serverlesslife-cn/serverlesslife
Use at the same time GitHub Actions Synced the code to Gitee: https://gitee.com/serverlesslife/serverlesslife
 

Deployment site

After the site is compiled , Use Serverless Framework CLI You can deploy it to Tencent cloud .
Serverless Framework CLI Need a profile serverless.yml, The configuration file is as follows :
component: website # ( Required ) quote component The name of , What is currently used is tencent-website Components 
name: serverlesslife-2021 # ( Required ) The website The name of the instance created by the component 
app: serverlesslife-2021 # ( Optional ) The website apply name 
stage: prod # ( Optional ) Used to distinguish environmental information , The default value is dev
inputs:
  src:
    src: ./public
    index: index.html
  region: ap-guangzhou
  bucketName: serverlesslife-2021
  protocol: https

 

among public Directory is hugo The directory of the site file after compilation .
Use serverless deploy Command to deploy , If there's no local .env To configure secretid and secretkey, You need to use wechat to scan and log in .
During deployment , Will be in COS Create a bucket And will public Upload the files in the directory to this bucket in , Then it will generate an access address of Tencent cloud level 4 domain name . Among them bucket The prefix is serverlesslife-2021, The tool will automatically add Tencent cloud account APPID As a suffix .
 
Serverless Framework Under the console , There will be an app called  serverlesslife-2021 Application , This application will have an access address of Tencent cloud level 4 domain name , As shown below :
 
stay COS Bucket list page for object storage , You can see that there is a name called serverlesslife-2021-1259061164  Of bucket, As shown below :
 

Custom domain name + SSL certificate + Automatically refresh CDN

To configure 「 Custom domain name + SSL certificate + Automatically refresh CDN」 Still need to be in serverless.yml Add some configuration information in , Whole serverless.yml The documents are as follows :
component: website # ( Required ) quote component The name of , What is currently used is tencent-website Components 
name: serverlesslife-2021 # ( Required ) The website The name of the instance created by the component 
app: serverlesslife-2021 # ( Optional ) The website apply name 
stage: prod # ( Optional ) Used to distinguish environmental information , The default value is dev
inputs:
  src:
    src: ./public
    index: index.html
  region: ap-guangzhou
  bucketName: serverlesslife-2021
  protocol: https
  hosts:
    - host: serverlesslife.cn
      autoRefresh: true # Turn on auto CDN Refresh , Used to quickly update and synchronize the site content displayed in the domain name 
      onlyRefresh: false # It is recommended that after the first deployment , Configure this parameter to true, That is to ignore the others CDN To configure , Just refresh 
      https:
        switch: on
        http2: on
        certInfo:
          certId: 'kBM9GLPt'

 

The above configuration file supports the configuration of multiple domain names , Other information can be configured under each domain name , Such as SSL certificate ID、 Automatically refresh CDN etc. .
When using a custom domain name , If you need to configure SSL certificate , Then you have to use CDN, Because in CDN The certificate can be configured under .
 
SSL Certificates need to be issued in advance SSL Certificate console application , Here you apply for a free certificate , The certificate is valid for one year , After successful application, there will be a ID:kBM9GLPt, As shown below :
 
After configuring the domain name information ,Serverless Framework A lot of things have been done after deployment , Greatly simplifies the configuration cost .
If not Serverless Framework Words , Then you need to configure it back and forth in multiple places without cloud services .
 
Let's take a look at the configuration 「 Custom domain name + SSL certificate 」 behind ,Serverless Framework What has been done :
1、CDN Under the console , Certificate management —> Configure certificate , Associate the domain name with the certificate , As shown below :
2、CDN Under the console , Domain name management —> Add domain name , A new record has been added , by serverlesslife.cn It turns on static acceleration , take COS Static sites as source sites , And will generate CNAME:
3、COS Under the console , Click in  serverlesslife-2021-1259061164 bucket , In the domain name transmission and management —> Customize CDN Speed up the domain Office , You'll also see a record :
 
here , To access the domain name normally , You also need to manually configure the domain name resolution : open DNSPod Console , by serverlesslife.cn Add one CNAME Record , The recorded value is CDN Generated CNAME:serverlesslife.cn.cdn.dnsv1.com.
 
Be careful : After the first deployment , take onlyRefresh   Parameter is configured as true, That is to ignore the others CDN To configure , Just refresh , Otherwise, the deployment time will be relatively long .
 

Reference resources

 
版权声明
本文为[donghui2020]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210222210149675q.html

  1. vue判断elementui中el-form是否更新变化,变化就提示是否保存,没变就直接离开
  2. 算法题:两数之和——JavaScript及Java实现
  3. 高性能 Nginx HTTPS 调优
  4. Why Vue uses asynchronous rendering
  5. day 31 jQuery进阶
  6. day 30 jQuery
  7. CSS whimsy -- using background to create all kinds of wonderful backgrounds
  8. Why are more and more people learning front end?
  9. What do you do with 4K front-end development?
  10. 8 years of front-end development knowledge precipitation (do not know how many words, keep writing it...)
  11. What is the annual salary of a good web front end?
  12. Front end novice tutorial! How to get started with web front end
  13. Will the front end have a future?
  14. Is the front end hard to learn?
  15. Seven new Vue combat skills to improve efficiency in 2021!
  16. Is front end learning difficult?
  17. How about the process of Web front-end development and self-study?
  18. Front end learning route from zero basis to proficient
  19. What is the basis of learning front end?
  20. What knowledge points need to be learned for self-study front end? How long can I become a front-end Engineer?
  21. An inexperienced front-end engineer, what are the common problems when writing CSS?
  22. HttpServletRequest get URL (parameter, path, port number, protocol, etc.) details
  23. Springboot starts http2
  24. Enabling http2.0 in spring boot
  25. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  26. Using JavaScript in Safari browser history.back () the page will not refresh after returning to the previous page
  27. vue.js Error in win10 NPM install
  28. In less than two months, musk made more than $1 billion, more than Tesla's annual profit
  29. Springboot starts http2
  30. Vue event bus
  31. JQuery easy UI tutorial: custom data grid Pagination
  32. Using okhttp and okhttpgo to obtain onenet cloud platform data
  33. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  34. HTTP 1. X learning notes: an authoritative guide to Web Performance
  35. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  36. HTTP 1. X learning notes: an authoritative guide to Web Performance
  37. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  38. Event bubble and capture in JavaScript
  39. The root element is missing solution
  40. Event bubble and capture in JavaScript
  41. Configure the certificate to enable ngnix to publish the trusted website of HTTPS
  42. Javascript数据类型
  43. HTTP interface debugging tool! 48000 star HTTP command line client!
  44. Parameter encryption of front end URL link band
  45. HTTP interface debugging tool! 48000 star HTTP command line client!
  46. Three front end frameworks: data binding and data flow
  47. Reading Axios source code (1) -- exploring the realization of basic ability
  48. Event bubble and capture in JavaScript
  49. 【微前端】微前端最終章-qiankun指南以及微前端整體探索
  50. R & D solution e-Car front end monitoring system
  51. [JS] 877 - 35 wonderful knowledge of JavaScript, long experience!
  52. R & D solution e-Car front end monitoring system
  53. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  54. 解决ajax跨域问题【5种解决方案】
  55. Top ten classic sorting of JavaScript
  56. HTTP 1. X learning notes: an authoritative guide to Web Performance
  57. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control component
  58. My http / 1.1 is so slow!
  59. Why Vue uses asynchronous rendering
  60. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for