Teach you how to deploy front-end projects with Github Actions

This is not watered the first 96 original, well want to get more original text, search for the number of public concern us ~ This article first appeared in the government to adopt cloud front-end blog: taught you how to deploy the front-end project with Actions Github

Why use Github Actions?

As we all know, front-end deployment is nothing more than dropping the packaged code into the nginx html directory and it's done, but whenever the product frequently changes the demand, or even when you change a word on the line, you always have to repeat the following actions: Modify , Pack, log in to the server, upload the code, and restart the server. Over time, let alone you can't stand it, you can't stand it when you look at it next to me. At this time, have you ever thought that there is a robot that can help us complete these repetitive and non-technical tasks? Yes, you guessed it, Github Actions is the robot we need.

What are Github Actions?

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

Let’s sort out the development process for normal requirements (as shown in the figure above). The above operations are reusable. Using this concept, Github integrates the Actions market, allowing developers to write operations as independent scripts and publish them to the Actions market, allowing all For developers, it is a bit like plug-ins in npm and vscode.

Github provides us with a server with the following configuration to run the Actions corresponding to our configuration

2-core CPU
7 GB of RAM memory
14 GB of SSD disk space

This configuration is enough for us to use. Of course, if you have network latency requirements (such as network latency when pushing and pulling images), you can also build your own server .

Start: deploy your own front-end project

1. Select the Github project warehouse

bilibili-vue , which imitated the project 16076b6273eabc bilibili-vue 16076b6273eabe I did when I started learning vue a long time ago. Enter the project warehouse, you can see the corresponding Actions label, click to enter.

2. Create a new workflow and configure Actions

After entering Actions, you can see many recommended workflow templates. Here you can choose the template you need according to your needs, or skip the template and set it yourself.

Here because I am a pure front-end project, I choose Node.js template.

Clicking on the node.js template will automatically .github/workflows directory. We can change the file name to the name of our workflow. yml files can be set and exist here, such as deploy.yml, test.yml, gh-page.yml, etc.

# workflow名称。省略的话，默认为当前workflow文件名
name: Node.js CI
# 触发workflow的条件，
on:
push:
# 只有master分支发生push事件时，才会触发workflow
branches: [ master ]
pull_request:
branches: [ master ]
# jobs表示执行的一项或多项任务
jobs:
# 任务的job_id，具体名称自定义，这里build代表打包
build:

# runs-on字段指定运行所需要的虚拟机环境。注意：这个是必填字段
runs-on: ubuntu-latest
# 用于配置当前workflow的参数
strategy:
matrix:
node-version: [10.x, 12.x, 14.x, 15.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
# steps字段指定每个job的运行步骤，可以包含一个或多个步骤，每个步骤都可以配置指定字段
steps:
# 切代码到 runner
- uses: actions/checkout@v2
# 在当前操作系统安装node
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
# 该运行的命令或者action
# 安装依赖、运行测试、打包
    - run: npm install
    - run: npm test
    - run: npm run build

`3. Common Actions configuration`

`Create Tag Release`

Create Tag Release plugin in the Actions market is used here

on:
  push:
    # Sequence of patterns matched against refs/tags
    tags:
      - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
name: Create Release
jobs:
  build:
    name: Create Release
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@master
      - name: Create Release
        id: create_release
        uses: actions/create-release@latest
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # This token is provided by Actions, you do not need to create your own token
        with:
          tag_name: ${{ github.ref }}
          release_name: Release ${{ github.ref }}
          body: |
            Changes in this Release
            - First Change
            - Second Change
          draft: false
          prerelease: false

`Create a Github Pages site`

GitHub Pages v3 plugin in the Actions market is used here

name: github pages
    on:
      push:
        branches:
          - master # default branch
    jobs:
      deploy:
        runs-on: ubuntu-18.04
        steps:
          - uses: actions/checkout@v2
          - run: npm install
          - run: npm run docs:build
          - name: Deploy
            uses: peaceiris/actions-gh-pages@v3
            with:
              github_token: ${{ secrets.GITHUB_TOKEN }}
              publish_dir: ./docs-dist

`Multi-person collaborative development, cloud code inspection`

name: Test
    
    on: [push, pull_request]
    
    jobs:
      lint:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v2
        - uses: actions/setup-node@v1
          with:
            node-version: '12.x'
    
        - name: Install dependencies
          uses: bahmutov/npm-install@v1
    
        - name: Run linter
          run: npm run lint
    
      test:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v2
        - uses: actions/setup-node@v1
          with:
            node-version: '12.x'
    
        - name: Install dependencies
          uses: bahmutov/npm-install@v1
    
        - name: Run test
          run: npm test
    
      build:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v2
        - uses: actions/setup-node@v1
          with:
            node-version: '12.x'
    
        - name: Install dependencies
          uses: bahmutov/npm-install@v1
    
        - name: Build
          run: npm run build

The above are some common configurations in Github. For more Actions configuration please refer to the official website.

`4. With docker`

Why use docker?

Before docker, I used webhook to implement automatic deployment, but later when the server expires and replaces the server, I can only repeat the operation one by one to do the migration, and the file directory management is chaotic. When the number of projects increases, the maintenance cost will increase. Come higher. Let's look at the five major advantages of docker: continuous integration, version control, portability, isolation, and security. Are they just used to solve the problems we encountered above?

For example: bilibili-vue , students who don’t understand can refer to my configuration.

`4.1 New Nginx configuration in the project root directory`

Create a new nginx configuration file named vhost.nginx.conf at the root of the project (the name is arbitrary, follow the Dockerfile ) for subsequent use, for example:

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;
}
}

`4.2 Create a new Dockerfile file in the project root directory`

Dockerfile file in the root directory of the project to build the image package for use, for example:

FROM nginx
COPY ./dist/ /usr/share/nginx/html/
# 第一步nginx配置文件名称
  COPY ./vhost.nginx.conf /etc/nginx/conf.d/bilibili-vue.conf
EXPOSE 80

`4.3 Configure Container Image Service`

Here I chose Cloud’s container mirroring service , why not use the foreign dockhub , because it is faster to use, and there is a free personal version that is enough for us to use.

`4.3.1 The first step`

To open it for the first time, you need to activate the service and configure the login password (write it down and use it later).

`4.3.2 Second step`

Then create a namespace, and then create our mirror warehouse, here if you don't want others to download your mirror, you can choose private. Then click Next to configure the code source. Here I chose a local warehouse. On the one hand, for log unification, you can see all logs in Github Actions. On the other hand, you can directly push the mirror image to the mirror warehouse through the command line, which has a relatively high degree of freedom.

`4.3.3 The third step`

After that, you can see the warehouse we created on the page, click on the warehouse name to enter, and you can see the basic information and operation guide of the warehouse. At this time, a mirror warehouse is completely created successfully.

`4.4 How to link with Actions`

We only need to log in to the Alibaba Cloud Registry instance after building the mirror in Actions, but at this time, if the plaintext is written directly in the yml, it will definitely not work. Github has already taken this into consideration for us. Go back to the Github project, and then Click Settings => Secrets => New repository secret, set secret, configure the user name (Alibaba Cloud user name) and password of the container image account above (the login password set when configuring the container image service above).

`5. Complete Actions`

name: Docker Image CI # Actions名称
on: [push] # 执行时机
jobs:

# 这里我使用的是yarn，想用npm的同学将yarn命令修改为npm命令即可
build:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
# 安装依赖
- name: install
run: yarn
# 打包
- name: build project
run: yarn run build

# 打包镜像推送到阿里云容器镜像服务
- name: Build the Docker image
run: |
docker login --username=${{ secrets.DOCKER_USERNAME }} registry.cn-hangzhou.aliyuncs.com --password=${{ secrets.DOCKER_PASSWORD }}
docker build -t bilibili-vue:latest .
docker tag bilibili-vue registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
docker push registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest # 推送
- name: ssh docker login # 使用appleboy/ssh-action@master登录服务器执行拉取镜像脚本，服务器ip、用户名、密码配置方式同容器镜像服务配置方式一样
uses: appleboy/ssh-action@master
with:
        host: ${{ secrets.SSH_HOST }} 
username: ${{ secrets.SSH_USERNAME }}
password: ${{ secrets.SSH_PASSWORD }}
script: cd ~ && sh bilibili-vue-deploy.sh ${{ secrets.DOCKER_USERNAME }} ${{ secrets.DOCKER_PASSWORD }}

After logging into the server in the last step, I executed a script to pull the latest cloud image, delete the old image, and start the new image. The content of the script is as follows.

echo -e "---------docker Login--------"
docker login --username=$1 registry.cn-hangzhou.aliyuncs.com --password=$2
echo -e "---------docker Stop--------"
docker stop bilibili-vue
echo -e "---------docker Rm--------"
docker rm bilibili-vue
docker rmi registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
echo -e "---------docker Pull--------"
docker pull registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
echo -e "---------docker Create and Start--------"
docker run --rm -d -p 8081:80 --name bilibili-vue registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
echo -e "---------deploy Success--------"

`6. Test process, check log`

We push a code test, and after opening Actions, you can see the real-time workflow results that run automatically, as well as the log information of each step.

`to sum up`

At this point, we have successfully automated deployment. Don’t modify the code every time. Manually update the online. Later migration will be more convenient. Of course, there are more automated deployment methods, such as direct use of Github + Alibaba Cloud image warehouse triggers. The same can be done, and container services are not limited to Alibaba Cloud. Other cloud service vendors such as Tencent Cloud also use the same way. The above is some summary of my personal use of Actions. If there are errors, please correct me. Of course, students who are interested in more Actions are welcome to exchange and learn together. Of course, this is only limited to personal project play. The company’s internal projects have more mature and complete automation solutions. For example, the cloud leader system we use internally solves such problems. The specific functions of the cloud leader, what did he do, Stay tuned.

`references`

GitHub Actions Getting Started Tutorial

What is continuous integration?

`Recruitment`

The ZooTeam front-end team (ZooTeam), a young, passionate and creative front-end team, belongs to the product R&D department of Zheng Caiyun, and the Base is located in picturesque Hangzhou. The team now has more than 40 front-end partners with an average age of 27 years old. Nearly 30% are full-stack engineers, a proper youth storm troupe. The membership consists of not only “veteran” soldiers from Ali and Netease, as well as newcomers from Zhejiang University, University of Science and Technology of China, Hangzhou Electric Power and other schools. In addition to the daily business docking, the team also conducts technical exploration and actual combat in the material system, engineering platform, building platform, performance experience, cloud application, data analysis and visualization, and promotes and implements a series of internal technical products. Explore the new boundaries of the front-end technology system.

If you want to change that you have been tossed by things, hope to start to toss things; if you want to change and have been warned, you need more ideas, but you can’t break the game; if you want to change you have the ability to make that result, but you don’t need you; if If you want to change what you want to accomplish, you need a team to support it, but there is no position for you to lead people; if you want to change the established rhythm, it will be "5 years of work time and 3 years of work experience"; if you want to change the original The comprehension is good, but there is always the ambiguity of the window paper... If you believe in the power of belief, believe that ordinary people can achieve extraordinary things, believe that you can meet a better self. If you want to participate in the process of business take-off, and personally promote the growth of a front-end team with in-depth business understanding, complete technical system, technology to create value, and influence spillover, I think we should talk. Anytime, waiting for you to write something, send it to ZooTeam@cai-inc.com