Recently learned how to integrate and deploy with one click of Github Actions. At the beginning, I realized one-click integration deployment of my single project into my Ali Cloud ECS server. I thought it was fun. Then IT occurred to me that I have been blogging all my life, so why not integrate my blog with Github Actions and deploy it to my own server? Below is a summary of some of the potholes and solutions I encountered during deployment.

1. Generate the SSH key locally

Open thegit bashThe inputssh-keygen -t rsa -C "[email protected]"Generate public and private keys.id_rsaIs the private key,id_rsa.pubIs the public key.

2. Set the private key

Log in your owngithubCreate a new project, or open an existing project. Then enter the project and clicksettingsOptions, and then clickSecretAnd then clickNew secret. Take the one you just generatedid_rsaCopy the denomination contents of the file tosecretThe value of. You are heregithubThe private key is deployed.

3. Set the public key

  • Logging In to the ServerSSH [email protected].
  • cd .sshGo to the folder where the public key is stored.
  • vi authorized_keysOpen theauthorized_keysFile. Will you generate locallyid_rsa.pubThe contents of the public key inside are copied to the file.

4. Generate YML files

Enter the project and clickActionsOptions, and then clickset up a workflow yourself And then it will generate one.github/workflows/main.ymlFile. Then start editing as instructedmain.ymlFile (this file is customizable).

5. Configure the YML file.

Here is a configuration file for one of my projects.

name: Build app and deploy to aliyun
on:
  # listen for push
  push:
    branches:
      # master branch, you can change it to another branch
      - master
jobs:
  build:
    # runs-on Specifies the VIRTUAL machine environment required by the job to run the job (required field)
    runs-on: ubuntu-latest
    steps:
      # get source code
      - name: Checkout
        # use actions/checkout to fetch the source code
        uses: actions/checkout@master
      # installation Node13
      - name: use Node.js 13.2. 0
        Install node using actions/setup-node
        uses: actions/setup-node@v1
        with:
          node-version: 13.2. 0
      # install dependencies
      - name: npm install
        run: npm install
      # packaged
      - name: npm build
        run: npm run build:prod
      # Deploy to Aliyun
      - name: Deploy to Aliyun
        uses: Easingthemes/[email protected]
        env:
          # the private key
          SSH_PRIVATE_KEY: The ${{ secrets.PRIVATE_KEY }}
          # SCP parameters
          ARGS: "-avzr --delete"
          # source directory, the directory of files generated after compilation
          SOURCE: "./dist"
          # server IP: Use your server IP
          REMOTE_HOST: "47.106.141.235"
          # the user
          REMOTE_USER: "root"
          Where you deploy code on the server
          TARGET: "/root/web/vue-drag-demo"
Copy the code

When your deployment files are written. When you push code on the master branch, it will automatically yML files itself, which will automatically deploy the code to your server. Then you can see your modified interface immediately. This is the effect of the project I deployed. This is the github address of my project vue-drag-project. If you’re interested, fork my project (which is a combination of drag and conditional rendering) and try it out for yourself.

Problems encountered while deploying the project

During the deployment, the SOURCE directory SOURCE was dist at the beginning and kept reporting errors, and was changed to./dist before the deployment was successful.

6. Configure nginx

In the configuration nginx encountered the following problems: the default nginx. Conf file will help you. * \. (js) | CSS? And $file. * \. (GIF | JPG | jpeg | PNG | BMP | SWF | ico) $these file cache. Because my vuepress configuration base was /blog/, so when I rewrote the route, rewrite did not take effect, tinkled for a few hours, finally solved, so here to record.

The server above is configured with its own open source project vue-drag-project. The following deployment is my blog project. If you are interested, you can go and have a look. If you feel good, you can follow me on Github or support me on STAR.

HTTP {# enable gzip compression gzip on; gzip_min_length 1k; gzip_buffers 4 16k; Gzip_http_version 1.0; gzip_comp_level 2; gzip_types text/plain application/x-javascript text/css application/xml; gzip_vary on; Server {listen 8002; Server_name 47.107.141.236; HTML index.htm index.php; root /root/web/vue-drag-demo/dist; Access_log off; } server { listen 8004; Server_name 47.107.141.236; HTML index.htm index.php; root /root/web/blog/dist; location ~ /(blog)/ { rewrite ^/blog/(.*) /$1 permanent; } #location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$ #{ #expires 30d; # access_log off; #} #location ~ .*\.(js|css)? $ #{ # expires 15d; # access_log off; #} access_log off; }}Copy the code