preface
I bought a cloud host computer for three years before Tencent’s Double 11, but I didn’t have time to do anything about it after I bought it. During the New Year’s Day holiday, I just took time to learn the related operation of Github Action and made a note. If you have the same idea, you can try it. In this scenario, the dist folder is deployed in /usr/share/nginx/html. Use Github Action to achieve, the steps for the front-end project build -> generate docker image -> upload to Tencent cloud personal image service (private image) -> execute the server script to pull the image -> run the container through the image
The preparatory work
- A Github repository
- A tencent cloud server (remember installed docker) cloud.tencent.com/developer/a…
Deploying front-end blogs
Making new Action
Create a Github Action under Github’s own repository
Set up the workflow
Choose your own Setup Workflow
Configure the WORKFLOW YML file
Paste the following code directly into the newly generated YML file
name: Docker Image CI # the name of the Actions
on:
This is a manual trigger
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
# install dependencies
- name: install
run: yarn
# packaged
- name: build project
run: yarn run build
# Package image push to Tencent cloud container image service
- name: Build the Docker image
run: | docker login --username=${{ secrets.DOCKER_USERNAME }} ccr.ccs.tencentyun.com --password=${{ secrets.DOCKER_PASSWORD }} docker build -t lizonghao:latest . docker tag lizonghao ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest docker push ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest Use appleboy/ssh-action@master to log in to the server and execute the pull image script. Configure the server IP address, user name, and password in the same way as the container image service
- name: ssh docker login
uses: appleboy/ssh-action@master
with:
host: The ${{ secrets.SSH_HOST }}
username: The ${{ secrets.SSH_USERNAME }}
password: The ${{ secrets.SSH_PASSWORD }}
script: cd ~ && sh lizonghao.sh The ${{ secrets.DOCKER_USERNAME }} The ${{ secrets.DOCKER_PASSWORD }}
Copy the codeExplain the above YML file in several parts
Build the Docker image
The key part is to Build the Docker Image, which is the common front-end installation dependency and the part of building static resources. Create a new Dockerfile file in the root directory of the repository project. This is the simplest front end project configuration. There is also a copy of the nginx configuration. Dockerfile
FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
Copy the code/nginx/default.conf
server { listen 80; server_name localhost; #charset koi8-r; access_log /var/log/nginx/host.access.log main; error_log /var/log/nginx/error.log error; location / { root /usr/share/nginx/html; index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }}Copy the codeAmong them, docker login is the personal private container service to login to Tencent cloud. The personal version of this service is free. The service address is: console.cloud.tencent.com/tcr/reposit… Documents send address: cloud.tencent.com/document/pr…
run: | docker login --username=${{ secrets.DOCKER_USERNAME }} ccr.ccs.tencentyun.com --password=${{ secrets.DOCKER_PASSWORD }} docker build -t lizonghao:latest . docker tag lizonghao ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest docker push ccr.ccs.tencentyun.com/lizonghao/lizonghao:latestCopy the codeDOCKER_USERNAME and DOCKER_PASSWORD are the secrets Settings provided by Github, which is convenient for us to store the data that can not be leaked. The location of the Settings is at
In Tencent cloud personal container service, DOCKER_USERNAME is your Tencent cloud account.
And then let’s focus on that
ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
Copy the codeThe domain name in front of the path in the file is the domain name of Tencent personal container service, the second address is the namespace of your container service, and the third is the image name of your Docker.
Executing the deployment Script
- name: ssh docker login
uses: appleboy/ssh-action@master
with:
host: The ${{ secrets.SSH_HOST }}
username: The ${{ secrets.SSH_USERNAME }}
password: The ${{ secrets.SSH_PASSWORD }}
script: cd ~ && sh lizonghao.sh The ${{ secrets.DOCKER_USERNAME }} The ${{ secrets.DOCKER_PASSWORD }}
Copy the codeWhere secrets.SSH_HOST, secrets.SSH_USERNAME and secrets.SSH_PASSWORD are your cloud server host address, login user name, generally root and the login password you set. Script is the name of the server script to be executed after successful login. Therefore, you need to create a sh script on the server in advance. The content of the script is as follows
echo -e "---------docker Login--------"
docker login --username=The $1 ccr.ccs.tencentyun.com --password=$2
echo -e "---------docker Stop--------"
docker stop lizonghao
echo -e "---------docker Rm--------"
docker rm lizonghao
docker rmi ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
echo -e "---------docker Pull--------"
docker pull ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
echo -e "---------docker Create and Start--------"
docker run --rm -d -p 80:80 --name lizonghao ccr.ccs.tencentyun.com/lizonghao/lizonghao:latest
echo -e "---------deploy Success--------"
Copy the codeThis is a basic sh script, where the steps are 1. Login docker private image service 2. Close the current running front-end container. 3. Remove the current running front-end container image. 4. Pull the latest front-end container image from the remote end 6. Run the pull command to remove the latest front-end mirror mapped to port 80
Perform making Action
At this point, all operations are complete. You only need to execute the corresponding Action in the Github Action menu and wait for the deployment Action to complete.
