Github Actions Rebuild your Blog Workflows

preface

My previous blog deployment was somewhat manual and not very friendly in terms of continuous updates and releases. Here we can use Github Actions to optimize our project deployment. This will save us time to package, release, and deploy.

What are Github Actions

As you know, continuous integration consists of many Actions, such as pulling the latest code, running tests, logging in to the server, deploying the server, etc. GitHub calls these Actions collectively Actions.

If you are interested in Github Actions, please read the Github Actions Tutorial.

Deployment Project Scheme

Here I would like to introduce two schemes to you:

Scheme 1: When we push code to the master branch, we can trigger the task defined by us, build our project first, and then publish it to NPM. This step is mainly to use the CDN capability provided by NPM, but it may not be necessary. We then package our packaged Dist and our defined Dockerfile as a Docker image and publish the image to the image repository. Next, we need to log in to the remote server. Here, I choose EcS of Ali Cloud or Github. Then pull our uploaded image on the remote server, execute our startup script, so that the flow of our automation project is clear, let’s configure step by step.
Scheme 2: Different from Scheme 1, we do not need to build a Docker image. Instead, we use SCP protocol to copy the packaged resources to the folder responded by the remote machine, and then start the nginx we installed at the time.

Plan a

We want github Actions to follow the following process:

Create a workflow and configure Actions

You can go into Actions and see a number of recommended workflow templates. You can choose the templates you want or skip them.

Created after the project be generated under the root of making/workflows/XXX. Yml configuration file.

Listen for master code push

We want to trigger the task we defined in master Code push, which can be configured as follows:

name: Build and Deploy
on:
  push:
    branches:
      - master
Copy the code

Here you can listen for other branches, other Actions, and refer to the GitHub Actions workflow syntax

Build

Next we need to build our project.

- name: Checkout  ️
  uses: The actions/[email protected]

- name: Install and Build   
  run: | npm install npm run buildCopy the code

Actions /[email protected] This action checks out a branch on top of the original branch and performs subsequent steps on this branch, such as NPM install and NPM run build.

Build Docker image

We need a basic environment to build Docker Image. Our project needs an Nginx server, so we add Dockerfile file to the path of the project

FROM nginx
COPY ./docs/.vuepress/dist /usr/share/nginx/html/
COPY ./vhost.nginx.conf /etc/nginx/conf.d/blog.conf
EXPOSE 80
Copy the code

Nginx configuration file vhost.nginx.conf in the directory of the project

server {
    listen 80;
    server_name localhost;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        proxy_set_header Host $host;
        if (!-f $request_filename) {
            rewrite ^.*$ /index.html break;
        }
    }
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}
Copy the code

And then we start the next step

- name: Build the Docker image
  run: | docker login --username=${{ secrets.DOCKER_USERNAME }} --password=${{ secrets.DOCKER_PASSWORD }} docker build -t test-github-actions:latest . docker tag test-github-actions jaywade/test-github-actions:latest docker push jaywade/test-github-actions:latestCopy the code

These are the basic operations of Docker, you should do more, there are two points to note:

DOCKER_USERNAME and DOCKER_PASSWORD need to be configured in github project => Settings => Secrets. 2, this is the use of Docker official mirror, so you know, you can use the domestic mirror or use ali Cloud mirror warehouse, is free for individual developers.

Ssh Login && run

Next we need to SSH to the remote machine, again using Docker Login, pull the image, and then start the image.

- name: ssh docker login
uses: appleboy/ssh-action@master
with:
  host: The ${{ secrets.SSH_HOST }}
  port: The ${{ secrets.SSH_PORT }}
  username: The ${{ secrets.SSH_USERNAME }}
  password: The ${{ secrets.SSH_PASSWORD }}
  script: cd ~ && sh deploy.sh The ${{ secrets.DOCKER_USERNAME }} The ${{ secrets.DOCKER_PASSWORD }}
Copy the code

Use the Appleboy /ssh-action@master to help us with this step. The deploy.sh script on the remote server is executed in the postscript. The following

echo -e "---------docker Login--------" docker login --username=$1 --password=$2 echo -e "---------docker Stop--------" docker stop test-github-actions echo -e "---------docker Rm--------" docker rm test-github-actions docker rmi jaywade/test-github-actions:latest echo -e "---------docker Pull--------" docker pull jaywade/test-github-actions:latest  echo -e "---------docker Create and Start--------" docker run --rm -d -p 80:80 --name test-github-actions jaywade/test-github-actions echo -e "---------deploy Success--------"Copy the code

1. If the operating system of alicloud machine exposes SSH service port, there may be some problems. You can add the self-defined port to the SSH configuration file /etc/ssh/sshd_config and add it to the security group. You may also encounter other questions, please refer to here.

This is how we successfully deployed our blog project, isn’t it easy

Scheme 2

We want github Actions to follow the following process:

Scp copy

The process of project packaging is the same as above, except that in the static resource migration phase, we have different configurations as follows

- name: Deploy to self-host server
uses: appleboy/scp-action@master
with:
  host: The ${{ secrets.SSH_HOST }}
  port: The ${{ secrets.SSH_PORT }}
  username: The ${{ secrets.SSH_USERNAME }}
  password: The ${{ secrets.SSH_PASSWORD }}
  command_timeout: "20m"
  source: "./docs/.vuepress/dist/"
  strip_components: 4
  target: "${{ secrets.DOCS_SERVER_DIR }}"
Copy the code

1, DOCS_SERVER_DIR is the path to our nginx static resource server. The default path is /usr/share/nginx/html.

conclusion

Solution two is more suitable for continuous integration of applications like blogs,Docker imagePerfect for continuous integration of enterprise applications.
We need to learn somethingyamlThis type of configuration language, due to their long history, so they may have some problems, not a problem, just for the habitjsonThe front-end partners are not friendly.
There are other things you can optimize, likenginxManagement of dynamic resources, and acceleration, etc.
vuepressThere is room for optimization of the packaging, and the current configuration results in too many parallel requests, affecting the speed of page loading.

Reference documentation

A step-by-step guide to deploying front-end projects using Github Actions
Workflow syntax for GitHub operations
vuepress-theme-reco
YAML language tutorials
Troubleshooting When you cannot remotely log in to a Linux instance through SSH