Shulou(Shulou.com)06/01 Report--

In this issue, the editor will bring you about how to deploy static websites with perfect automation of Serverless + GitHub Actions. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

As a patient with obsessive-compulsive disorder, he has always been obsessed with automated deployment. I think the most important thing of fully automated deployment is stability and reliability. After research and testing, we successfully completed the practice of fully automatic deployment of the website using GitHub and Tencent Cloud.

Brief introduction to business requirements

The blogger has a simple static documentation site docs.ioiox.com, which uses the Markdown rendering program of the docsify project, which usually edits the document through the local VSCode and submits it to GitHub. Earlier, I directly used the domain name bound with GitHub Pages to access it, but due to network problems, the experience was not good.

Seek a solution

Tencent Cloud object Storage COS service can provide static web service and can be accessed by configuring CDN domain name. Then the following two problems need to be solved:

How to make GitHub automatically synchronize files to Tencent Cloud COS

How to automatically refresh the CDN corresponding to Tencent Cloud COS

Solution

GitHub Action-automatically uploads to COS after configuring each Push code

Tencent Cloud function SCF-automatically refreshes the corresponding CDN link when a file change in COS is detected

Scheme flow chart

Phase I-GitHub Actions

In November 2019, GitHub officially launched GitHub Actions, which no longer needs to apply for free use. At present, it is charged according to the duration of workflow, and the free quota of 2000 minutes per month for individual users is basically enough.

Obtain Tencent Cloud API key

Log in to Tencent Cloud console-access Control-access key-API key Management

Create a new key

This key has all the permissions. To ensure security, you can also add sub-users and configure the permissions corresponding to COS,CDN.

Configure Tencent Cloud COS

Log in to Tencent Cloud console-object Storage-Bucket list

Create a bucket

Select the area that suits you and set the permission to public read and private write.

Get bucket related information

Configure GitHub Actions

GitHub warehouse-Settings-Secrets

Add SecretId and SecretKey to the Tencent Cloud API key you just obtained.

GitHub warehouse-Actions

There are many recommended workflows by default, so choose Set up a workflow yourself to configure it yourself.

The system creates a yml configuration file for workflow, deletes the preset code, and copies the following sample code.

The two places marked red on the figure need to be modified to the name and area obtained by the bucket you just created.

Then submit it in the upper right corner.

Sample yml profile

Name: Upload to COSon: [push] jobs: build: runs-on: ubuntu-latest steps:-uses: actions/checkout@v1-name: Install coscmd run: sudo pip install coscmd-name: Configure coscmd env: SECRET_ID: ${{secrets.SecretId}} SECRET_KEY: ${secrets.SecretKey}} BUCKET: docs-1300533487 REGION: ap-shanghai run: coscmd config-a $SECRET_ID-s $SECRET_KEY-b $BUCKET-r $REGION-name: Upload run: coscmd upload-rs-- delete-f. / /-- ignore ". / .git / *" Test GitHub Actions

After submitting the yml, the system detects the push of main.yml and starts to run the workflow. According to the yml configuration file, you can see that the whole workflow is simply understood as installing Tencent Cloud coscmd tools, and uploading the entire repository to Tencent Cloud COS according to the configured SecretId, SecretKey, BUCKET and REGION, while ignoring the .git folder. The upload-rs command uses md5 to compare files that already exist in the bucket, and uploads of the same files are skipped.

Phase 2-Tencent Cloud function SCF

Configure Tencent Cloud CDN domain name

Log in to Tencent Cloud console-object Storage

Enter the created bucket-basic configuration-open a static website

Domain name management

Add a custom accelerated domain name, and set the domain name to point to the generated CNAME address, and change the origin server type to static website origin server.

Control Panel-content Distribution Network-Domain name Management

Click the added domain name-Advanced configuration

Open HTTPS, set the forced jump HTTPS, and change the jump mode to 301. Click to configure to apply for a free certificate.

Configure the cloud function SCF

Log in to Tencent Cloud console-Cloud function

If you use the cloud function for the first time, you may jump out of the service authorization box. You need to add the access and agree to the authorization. This role has no effect on the cloud function added this time.

Select the same area as your bucket and create a new

Fill in the function name, select Php 5.6 for the running environment, and select the blank function for the creation method.

Function configuration

The upper part can be kept by default

Delete the default code and copy the following sample code so far.

The two places marked red on the figure need to be modified to the previously obtained API key. Note that the order of ID and KEY here is the reverse of the previous configuration of GitHub Actions, and change the CDN link to your domain name. If the domain name has been configured with HTTPS and certificate, make sure it is https.

Just finish it.

Function code sample

Test function code

Confirm that API and CDN are configured correctly, click Test, and return success.

Add trigger mode

Two trigger methods need to be added here: create all and delete all respectively.

Trigger mode: COS trigger

COS Bucket: select your bucket (make sure that the bucket and the cloud function are in the same area again)

Event types: create all and delete all

Test configuration

Tencent Cloud console-content delivery Network

Refresh prefetch on the left-operation record-query

You can see a record of the success of the test just now, and now you can try to test the whole process from Push code to GitHub.

Serverless Framework 30-day trial Program

We invite you to experience the most convenient way to develop and deploy Serverless. During the trial period, related products and services provide free resources and professional technical support to help your business achieve Serverless quickly and easily!

The above is the editor for you to share how to Serverless + GitHub Actions perfect automated deployment of static websites, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.