How to use Github Action to develop wool

Imprint Chinese has been committed to providing technical document translation services for domestic front-end developers, such as React, Webpack, Node.js and other technical documents, you can see imprint Chinese’s participation in the shadows. In order to make the loading speed of documents better, we have all deployed the documents on the CDN service of Tencent Cloud in China. However, this also brings a relatively large cost pressure, do the deployment service to buy the machine, every few months to buy TERabyte level CDN traffic packets.

Until recently, the static resource deployment service developed by Tencent Yunyun is very friendly to many document sites and static personal official websites, both in terms of deployment and price. After calculation, it is more affordable than deploying the site on cloud servers and traditional CDN. Such a good wool, do not pull up god unbearable ah!

However, due to the variety of Chinese documents, the situation is different, after some research, sorted out the following requirements, and output corresponding solutions, hope to open for everyone to use for their own situation.

Stamp Chinese deployment requirements

• Requirement 1: The number of documents is large, and it is hoped that the unified release scheme can be implemented

Because there are at least 10 documents with Chinese markings, the deployment solution needs to be uniform for better maintenance. Previously we wrote a deployment service in Node.js, which eased the deployment burden somewhat, but we still needed to add new scripts to build and trigger deployments in each document. Github Action after the launch, perfect solution to the Github project construction and deployment problems, so based on Github Action to do a deployment scheme is a better solution.

• Requirement 2: Large resources of documents require incremental publishing capability

Documents with Chinese markings are deployed under subdomains, which were previously deployed on COS and CDN services of Tencent Cloud. Some documents is a large amount of documents, like the react, webpack document file number, often thousands of, tencent cloud platform tools are to provide the amount of upload, such not only upload speed is slow, and the platform is charged for upload number, therefore, we should try to reduce the uploaded every release, the performance improvement and cost reduction. As aspiring developers, there is no way we can release this thing and make the cloud platform our money!

• Requirement 3: The HTML of the master site needs to be deployed on the cloud server

Due to filing requirements and product policies, the master site usually needs to be deployed on a cloud server. Therefore, the strategy adopted by the master site of imprinting Chinese is to deploy HTML files in the cloud server, and other static resources are deployed in the cloud development as an acceleration.

Imprinted Chinese Github Action solution

Based on the above requirements, a set of open solutions can basically meet the above requirements.

The first thing we need to solve is a unified distribution solution with less code intrusion mainly using Github actions. Github Action can support Both Tencent Cloud Object Storage (COS) and Cloud development (Cloudbase). The address is: github.com/docschina/d…

The following code captures the first half of the imprinted Chinese master site deployment, the main process is to build + deploy. Github Action syntax recommended to the technical community search related posts, this article focuses on deployment scenarios.

The first step is Checkout, which is basically pulling code.

The second step is Build and Deploy, which is used to run the NPM run Build command to Build and upload the code built to the Build directory to the GH-Pages branch for archiving.

The third step is Check Build, which checks whether the Build directory exists and gives it read and write permissions.

The fourth step is Docschina Github Action, which is the core deployment of imPRINT Chinese Github Action. In the Secrets of Setting, Tencent cloud secret pair SECRET_ID, SECRET_KEY and cloud development ENV_ID are filled

name: Build CI For CloudBase

on:
  push:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Build and Deploy
        uses: JamesIves/github-pages-deploy-action@master
        env:
          ACCESS_TOKEN: The ${{ secrets.ACCESS_TOKEN }}
          BRANCH: gh-pages
          FOLDER: build
          BUILD_SCRIPT: npm install --unsafe-perm=true && npm run build

      - name: Check Build
        run: | sudo -i sudo chown -R $USER build      - name: Docschina Github Action
        id: deployStatic
        uses: docschina/docschina-actions@master
        with:
          secretId: The ${{ secrets.SECRET_ID }}
          secretKey: The ${{ secrets.SECRET_KEY }}
          staticSrcPath: ./build
          isForce: The ${{ secrets.ISFORCE }}
          envId: The ${{ secrets.ENV_ID }}
Copy the code

Then docsChina /docschina-actions@master Github Action compared with Tencent cloud official tools, what other capabilities does it provide? Official tools mainly provide full file upload, while imPRINTED Chinese tools provide incremental release, forced full release, ignore files, COS and Cloudbase support two release modes.

Ignoring files is done with skipFiles as a data parameter, while full publishing can be done by passing true to isForce. So how exactly does incremental publishing work?

In general, incremental publishing comes in two ways, as shown below:

The first is the most accurate method, which is to check the live Web every time to see if the resources exist, and to check MD5 again for HTML files at the Web entrance – that is, for most non-HTML resources, MD5 strings will be added to the file names, but HTML does not. However, this kind of accurate solution will bring the consumption of CDN resources, because each release has to be checked, and the release speed will be slowed down.

The second option is to choose space for time, save the information of published files in a MANIFEST file, and then pull this file before each release, if it appears in the file will not be released, and will update the released file to the MANIFEST file. The downside of this approach is that it can be imprecise, because for some other reason, such as manually deleting a file, the file in the service may not exist, but it is already published in the MANIFEST. HTML files will record the MD5 value of their contents in the manifest, while non-HTML files will record the Boolean value of whether or not to publish. In addition, isForce parameter is provided to allow users to force full publishing, so that some files will not be lost. You can release the full volume first.

The above solution already addresses the first two requirements, but what about the third requirement? Let’s list the deployment code for the last part of the imprinted Chinese master site. This Github action uses Pendect/action-rsyncer to transfer the HTML file to the remote server using rsync.

 - name: Deploy To Server
        uses: Pendect/[email protected]
        env:
          DEPLOY_KEY: ${{secrets.DEPLOY_KEY}}
        with:
          flags: '-avzr'
          options: ' '
          ssh_options: ' '
          src: 'build/'
          dest: '[email protected]: / data/docs/docschina'
          SSH_PRIVATE_KEY: The ${{ secrets.DEPLOY_KEY }}
Copy the code

But how do Github Actions connect to remote servers? The key is this DEPLOY_KEY. First you need to generate an SSH private key, which is similar to your Github SSH private key generation process, you can search for related articles.

Then, you need to have your server load the SSH private key as shown below:

Then, open the private key file, get the content, and configure the DEPLOY_KEY content for Github Action so that it automatically connects to the remote server when rsync is used.

Since then, we have basically implemented common static resource deployment in different situations by combining our own and other Github actions. Thanks to Tencent Yunyun development team for some help, let me more smoothly through the call of some internal API to better achieve customized deployment process, let me more willfully pull this wave of wool. This wave of $9.9 package year activity is said to end in July. If you want to move your static site to the cloud to develop a static deployment service, you can try using the tools recommended in this article.

If there are mistakes, please correct!