This article uses the example of deploying a ReactJS project cloud server to record how to use Github Action for the project continuous integration & deployment

1. Desired results

Deploy what a project needs to do before using github Actions

  1. Build&test is done locally after development
  2. Connecting to the server
  3. Upload the generated static file to the server (if you are using Nginx, you can see the page after uploading the file and refreshing the page)

We can use
github actionHelp us work through these processes without manually deploying the project. You can also differentiate branches and deploy them separately to
The production environmentand
The test environment 。

2. For non-React projects

For other projects (like mine that was built using UMI), the process is consistent, except in the Actions
buildProcess. A little bit more complicated is the upload file part, which I’ve already written to use
sftpUpload file actions that you can even use
This actionThe deployment of
srpingbootThe project.

3. The implementation

1. Create a repO on Github and name it react-deploy

2. Use create-react-app to create a local React project

 npx create-react-app react-deploy
Copy the code

3. Write an action that will help us complete the build

Create a new one under the project path
.githubFolder, and then in
.githubUnder the new
workflowsFolder, under this folder to create
main.yml.
main.ymlIs a
action, we use it to implement the code push trigger project build



4. The following is the main.yml content

name: Continuous Integration # the name of the action
on: [push] Run this action when pushed

jobs:
  build_job:
    runs-on: ubuntu-latest  # Runtime environment
    name: build
    steps:
      # check out the repository
      - name: Checkout    
        uses: actions/checkout@v2    # checkout the project from github to virtual machine

      - name: Install Dependencies
        run: yarn
      - name: Build
        run: yarn buildCopy the code

5. Now that we have finished writing the action, we add remote to the project, submit it and push it to Github. By opening the repository on Github, we can see that Github has already executed its first action



6. After build, we need to upload the build file to the server. To use SFTP, we need some basic information to access the server such as ssh_private_key. For security, we cannot write the key to the action directly. We add information in Settings /secrets. Once added, you can reference it in the action.



7. Step 5 We’ve already got static files from build. All we need to do is upload these files to our deployment directory on the cloud server, like /var/www/react-app. Then modify main.yml and use another action after build to upload the file to wlixcc/SFTP- deploy-action

name: Continuous Deploy # the name of the action
on: [push] Run this action when pushed

jobs:
  deploy_job:
    runs-on: ubuntu-latest  # Runtime environment
    name: build
    steps:
      # check out the repository
      - name: Checkout    
        uses: actions/checkout@v2    # checkout the project from github to virtual machine

      - name: Install Dependencies
        run: yarn
      - name: Build
        run: yarn build

      /var/ WWW /react-app /var/ WWW /react-app /var/ WWW /react-app /var/ WWW /react-app /var/ WWW /react-app
      - name: deploy file to server
        uses: wlixcc/[email protected] 
        with:  
          username: 'root'   #ssh user name
          server: '${{ secrets.SERVER_IP }}' # reference previously created secret
          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }} # reference previously created secret
          local_path: './build/*'  # Corresponds to the folder path of our project build
          remote_path: '/var/www/react-app'Copy the code

At this point, we have completed a complete deployment process for a project



The process is very simple, and you can use a combination of different actions to complete your own deployment process, or you can write your own actions

4. Different branches are deployed in different environments (negligible)

name: continuous deployment
on: 
  push:
    branches:
      - master # When the master branch pushes, we deploy to the production server
      - test When the test branch is pushed, we deploy to the test server

jobs:
  deploy_job:
    runs-on: ubuntu-latest
    
    name: build&deploy
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Install Dependencies #install
        run: yarn
     
      - name: build  #build
        run:  yarn build

      - name: deploy file to test server
        if: github.ref == 'refs/heads/test' Check the branchUSES: wlixcc/[email protected] with: username:'username'
          server: '${{ secrets.TEST_SERVER_IP }}' Test server address
          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }}
          local_path: './build/*'
          remote_path: '/var/www/app' Test the server deployment path
      
      - name: deploy file to prod server
        if: github.ref == 'refs/heads/master' Check the branchUSES: wlixcc/[email protected] with: username:'username'
          server: '${{ secrets.SERVER_IP }}' # official server address
          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }}
          local_path: './build/*'
          remote_path: '/var/www/app' # server deployment pathCopy the code



Here you can see that only the test process is executed

5. Project links

1. React-Deploy

2. SFTP-Deploy-Action