One, foreword

As a front-end chicken, the server is small. When I first started to deploy the website on Linux server, I usually packed the front-end code and manually FTP it, and the back-end code directly connected to the server using SSH in VScode to synchronize the code changes directly.

But little black as a life endlessly toss about the program ape, certainly want to explore better fun more efficient methods, so this time, we start to toss about the next automated deployment scheme

Second, preparation work

1. Continuous integration service (CI) scheme selection

Implementing an automated workflow for code submission relies on continuous integration (CI) (or in addition to continuous delivery (CD)) services. Now the mainstream public free continuous integration services are:

  • Travis CI
  • Jenkins
  • Circle CI
  • Azure Pipeline
  • GitHub Actions

Among them, GitHub Actions is GitHub’s own continuous integration and automated workflow service, which is simple and easy to use, and is also the service used by Hei this time. It is very simple to use and enable the GitHub Actions service by creating a.github/workflows folder in your repository root directory and placing your workflow configuration (YAML file) in that directory.

Xiao Hei’s website is deployed to Tencent cloud server, so server related configuration is used in the configuration process. If you want to put the website on GitHub Pages, you only need to have a GitHub repository to start the work. Please ignore the configuration of remote server below.

2. Add the deployment key

To deploy a file to a remote server, you first need to resolve the issue of login validation.

The more common ones are password login, SSH key login, or VNC login. Little black recommended using SSH key login, both convenient and secure.

2.1 Generate SSH key pairs

I believe that if you need to deploy to the server remotely, you must have already configured the SSH key pair, so we can copy the corresponding private key file directly and configure it in GitHub later. Hei will not repeat this here

2.2 Fill in the automatic configuration item on GitHub

After the SSH key pair is generated, the preparation work is almost done. The last step is to configure the configuration items needed in the YAML file to GitHub

First open the corresponding repository, click Setting > Secrets > New Skeret, and then add the key file content, server host and login user name we copied to the corresponding configuration as shown below, so that even if the project is open source like Hei, privacy information will not be leaked.

With all of this configured, we are ready to write the workflow file

III. Configuration process

1. Write the workflow file

Created in the warehouse the root directory. Making/workflows folder, create a YAML file, file name set, I here named deploy yml, so the full path to the file should for. Making/workflows/deploy yml, within the meaning of the configuration is written in the comments! Of course, Xiao Hei will also briefly introduce the key configuration items

1.1. Basic configuration of files

The first is the basic configuration of YAML files

The content of the on is important. Specifies the events that automatically trigger the workflow file. You can also set the workflow to run only on certain branches, paths, or tags. For example, Hei triggers when a push is made on the master branch, ignoring changes to readme. md and LICENSE files

“Jobs” is all the workflow to be run in the future. Hei set the job “Build-Production”, and you can set more than one job according to your needs

There is also Runs-on. At the first time, Xiao Hei thought that he wanted to fill in the operating system of his cloud server, so he filled in a CentOS, which reported an error as soon as he ran. Later, after reading the document, he realized that this is a new virtual machine hosted by GitHub that is configured to run Job, which has nothing to do with the operating system and server system you are using. Just configure it to Ubuntu-Latest like the Blackie

Node-version in the strategy can not be configured. In order to be consistent with the local node version, Hei has configured it

In the steps section, there are each of the specific steps that need to be performed. Here is Heuro’s description of the steps

Name: Blog CI/CD on: push: branches: -master # Push only on master trigger Paths deployed - Ignore: -readme.md-license jobs: build-production: runs-on: Run automated scripts using Ubuntu-Latest # Ubuntu system images (Note: it doesn't matter which operating system or server you are using, Windows 10 for my local server, CentOS for the cloud server) Steps: # Steps: # Steps: # Steps: # Steps: # Steps: # steps

1.2. Download the code

The step is to checkout your repository and download the code into the Runner. Actions /checkout@v2 is a custom made wheel and just use it

-uses: actions/checkout@v2 # The first step is to checkout the repository copy

1.3. Configure Node version (optional)

The next step is to install Node, the wheels are official, the version is optional, and the package is NPM (if you don’t need to package, you can omit 1.3-1.5).

- name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v1 with: node-version: ${{matrix.node.version}} # Node.js: ${{matrix.node.version} #

1.4. Install dependencies

I don’t need to explain this step

-name: Install Dependencies # Step 2: Run: NPM Install

1.5. Package the code

The –if-present flag is used to avoid non-zero exit if the script is not defined. The pro test can be written in the current project or not, so you don’t have to think about it

-Name: Build # Step 3: Package the code run: NPM run Build --if-present

In the deployment of the server Xiaohei stepped into a big pit, is clearly packaged to complete, but is not to end the task, into the next step

They all went to the toilet with pay and did not finish the Build task. So Hei was not upset because of the discipline of love and kill with the product

Switch to yarn? Failure + 1

Modify the Node version? Failure + 2

… ？？？？？？？ Failure + N

He could not bear uncle, uncle could not bear his aunt!

This is to force the little black to use a big kill!

Face the wind!

… %… (￥@* (￥@$(*$))

Look at my operation as fierce as a tiger ~

Finally, after offering three precious hair, finally let the small black to find the problem

I’m bald and strong! – the little black

The Node.js process does not terminate after packaging. Normally, it is closed by hand with Ctrl + C. I didn’t notice this problem at all.

The storm cries ~

At this time, the problem comes again, as the most common front end of the Chinese service, the webpack I only know a little bit, the observation mode is not opened, Baidu Google a search, the document I also looked and looked, analysis to analysis, also do not know which is taking up the Node.js process, just cut the mess quickly, a line process.exit(0); Kill indiscriminately!

Give me a push, and the Build task has been successfully completed. I am really a genius, reward myself a kilo of delicious feed!

1.6 Push deployment to the server

Once the package is done, it’s time for an exciting deployment to the server, where we’re still using wheels built by someone else

Deploy_key, Server_IP, Username are the SSH private key, host name, and login name that we have just configured on GitHub, so we won’t go into details here

The main things to keep in mind are Folder, and Server_Destination, which is our push FOLDER and destination FOLDER. Make sure the path is written correctly here.

Source address:
rsync-deploy 

-name: Deploy to Server # # # # # # # # # # # # # # # # # # # # ${{secret.deploy_key}} ${{{sector.deploy_key} ${{{secret key ARGS: -avz --delete --exclude='*.pyc' # SERVER_PORT: '22' # SSH port FOLDER:./build/* # FOLDER to push, path relative to code repository root SERVER_IP: ${{secrets.SSH_HOST}} # ${{secrets.SSH_HOST}} # ${{secrets. SSH_USERNAME}} # reference configuration, the server login name SERVER_DESTINATION: / WWW/below/lmsworld. Cn / # deployed to the target folder

I’m here is to build a folder file replace directly to web root directory, there is not file cannot be replaced with the same situation, intended to first remove web root folder to replace, but consider the packaging the possibility of failure or deployment, delete may not be able to access the site, hence temporarily don’t use this method, the subsequent have time continue to improve, Write here or hope the big guys give directions to the maze ~

1.7 Restart the service (as the case may be)

If only the front-end code is deployed, the service may not need to be restarted; if the back-end code is needed, the service will need to be restarted

You can add another back-end deployment job in the YAML configuration file, use the need to control the workflow, and then write down the command line running on the server in the script, Xiao black is written in Node background, for reference only

-Name: Restart Server # Uses: Appleboy /ssh-action@master with: Host: ${{secrets.SSH_HOST}} # ${{secrets.SSH_HOST}} # ${{secrets.SSH_HOST}} # ${{secrets. ${{secrets.DEPLOY_KEY}} # Migrate to database and reboot server: | cd /www/server/web-server/ pm2 reload app.js

1.8 Complete configuration file

Post the complete configuration file, according to their own project conditions to modify the configuration line, can not be used to leave a message to the small black

Name: Blog CI/CD on: push: branches: -master # Push only on master trigger Paths deployed - Ignore: -readme.md-license jobs: build-production: runs-on: Ubuntu - latest # image using ubuntu system automation scripts (warm prompt: and the operating system you are using and the server system has nothing to do, my local use Windows 10, cloud services for centos) strategy: matrix: [12. X] # steps: # automate - uses: actions/checkout@v2 # Use node.js ${{matrix.node.version}} # uses: actions/setup-node@v1 with: node.version: ${{matrix.node.version}} -name: Install dependencies # run: NPM Install -name: Build # NPM run build -- if-present-name: Deploy to Server # Step 4: rsync push file uses: Env: DEPLOY_KEY: ${{secrets. Deploy_key}} ${{secrets. Deploy_key} -avz --delete --exclude='*.pyc' # rsync ${{secrets.SSH_HOST}} # Server_ip: ${{secrets. Ssh_host}} # ${{secrets. SSH_USERNAME}} # reference configuration, the server login name SERVER_DESTINATION: / WWW/below/lmsworld. Cn / # # - deployed to the target folder name: # Restart server # uses: appleboy/ssh-action@master # with: # host: ${{secrets.SSH_HOST}} # ${{secrets.SSH_HOST}} # ${{secrets. ${{secrets.DEPLOY_KEY}} # # migrate to database and reboot server # script: | # cd /www/server/web-server/ # pm2 reload app.js

2. Final effect

Hei couldn’t wait to modify the configuration file and push it to the warehouse. The workflow ran smoothly without any mistakes. It was perfect!

In this panel you can see the time and output information of each step of the task, and the error information can also be searched here

Finally, if you are deployed to Tencent cloud, Ali cloud and other cloud service platforms, you will generally receive a security warning notice, such as Xiaohei is using Tencent cloud

There is an abnormal login from IP :40.122.43.158, who is this IP, let Xiaohei check

Microsoft data center? It should be the IP of the GitHub server. The problem is not big. Let’s ignore it here, and we will find a way to solve it later

IV. The part to be optimized

Xiaohei recently work is too busy, just a simple implementation of the automated deployment function, but not yet in time to optimize, leave a pit first, and then more

1. Cache dependencies speed up workflow

GitHub documents – Cache dependencies

2. Optimized deployment of COS

GitHub Actions + COS for optimized deployment

Five, the reference

Because the small black knowledge is shallow, the level is limited, the content that writes certainly has a lot of inadequacy, also asks each big guy not stingy comment, very grateful!

The following documents, blog to the small black great help, in this fried chicken thanks!

1.
Making Actions document

2, How to deploy a create-react-app with github actions

3. Automate blog deployment using GitHub Actions