With the development of front-end technology, front-end engineers are not only limited to the realization of codes and functions, but also with the expansion of business volume, forming the requirements for front-end engineering. In this era of Internet where time is money, efficiency is very important, so CI/CD in engineering has become a skill that modern front-end engineers need to master.
This article is mainly to practice to let you quickly start a CI/CD process, the following is a brief introduction to the definition of CI/CD, the rest will not be further described, github action and docker related things here do not carry out in-depth introduction, interested or do not understand can refer to the information. Or the author can supplement the article to introduce.
I. Definition of CI/CD
CI/CD simply means automating the development rollout steps that we used to do.
1. The difference and connection between CI and CD values
-
CI is Continuous Integration: when the code in the repository changes, the code is automatically tested and built, and the results are reported.
-
Continuous Delivery is based on Continuous integration. Integrated code can be successively deployed to test environment, release environment, production environment, etc
2. Create a project
The React scaffolding creation project is used as an example
1. Create a project
create-react-app demo
Copy the code
2. Package projects
yarn build
Copy the codeConnect to the server
ssh [email protected] # your server ip
Copy the code4. Install Docker
1. Install required installation packages
Check if docker is installed
yum list installed | grep docker
yum install -y yum-utils device-mapper-persistent-data lvm2
Copy the code2. Set the repository for the image
-
Default image (foreign)
yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo Copy the code -
Aliyun mirror (recommended)
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo Copy the code
3. Update the index of yum packages
yum makecache fast
yum makecache #centos8
Copy the code4, Install docker Docker-CE community edition EE is enterprise edition
yum install docker-ce docker-ce-cli containerd.io
Copy the code5. Start Docker
systemctl start docker
Copy the code6, test,
docker run hello-world
Copy the code7. Check the docker service status
Install nginx based on Docker
1. View existing images in Docker
docker images
Copy the code
2. Query the nginx image to be downloaded
docker search nginx
Copy the code
3. Pull the Nginx image
docker pull nginx
Copy the code
4. Check whether the pull is successful
docker images
Copy the code
5. Start the image
- -d: indicates running in the background
- -p: indicates the port mapping. The local port is preceded by a colon and the container port is followed by a colon
- –name= image name The last nginx is the created Nginx image
docker run -d -p 8080:80 --name=iamgeName nginx
Copy the code6. Check whether it can be accessed
Enter the public IP address of the server :8080. If the following screen is displayed, it indicates that nginx has been successfully installed
7. If you do not see this interface, it may be that the purchased cloud server is not configured with ports. Here, take Tencent Cloud as an example to talk about how to configure it
- Find the firewall, then click Add Rule and select Custom application type
- Then access the public IP address of the server :8080
Configure github Action
Scheme 1: the combination of image container service hosting image realization
1. Configure the container mirroring service
Here I choose ali Cloud container mirror service
A. Create an instance
Personal version is free, basic enough, use online projects need to use the enterprise version
B. Set the login password
C. Create a mirror vault
-
Creating a namespace
-
Creating a Mirror repository
-
Configure the source code
-
I chose the local warehouse
- To unify logs, you can see all logs in Github Actions,
- You can directly push an image to the image repository through the command line, which provides high freedom
-
D. View the mirror vault
Click on the warehouse name to see some basic information and instructions for the warehouse
2. Create the project in the root directorynginx.conffile
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; }}Copy the code3. Create the project in the root directoryDockerfilefile
# specify base mirror, must be the first command
FROM nginx
Copy the build file to the container
COPY ./dist/ /usr/share/nginx/html/
# copy the nginx configuration to the container
COPY ./nginx.conf /etc/nginx/conf.d/react-demo.conf
# specify port
EXPOSE 80
Copy the code4. Create the project in the root directorydockerBootstrap.shfile
echo -e "--------- Log in to the image container service --------"
# Log in to Aliyun image container service
docker login --username=The $1 registry.cn-hangzhou.aliyuncs.com --password=$2
echo -e "--------- Stop mirroring --------"
# Stop the container
docker stop react-demo
echo -e "--------- Delete local container and mirror --------"
# delete local container
docker rm react-demo
# Delete a local mirror
docker rmi registry.cn-hangzhou.aliyuncs.com/yusongh/react-demo:latest
echo -e "--------- pull mirror --------"
# pull mirror
docker pull registry.cn-hangzhou.aliyuncs.com/yusongh/react-demo:latest
echo -e "--------- Create container and run container --------"
# -rm: Docker deletes the volume associated with the container when it exits
# -d: Run the container in the background and return the container ID
# -p: port mapping, native port: container port
# --name: specifies the container name
The last name is the mirror name
docker run --rm -d -p 8080:80 --name react-demo registry.cn-hangzhou.aliyuncs.com/yusongh/react-demo:latest
echo -e "--------- completed --------"
Copy the code5. Create it under the project.github/workflows/test.ymlfile
name: Docker Image CI # the name of the Actions
on: # Execution timing
push:
branches:
- 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:
# pull code
- name: checkout Step name
# use actions/checkout to pull source code
uses: actions/checkout@master
# install dependencies
- name: install
run: npm install
# packaged
- name: build project
run: npm run build
# Log in ali Cloud image container service, package image, push image
- name: Build the Docker image
run: | # login ali cloud image container services docker login - username = ${{secrets. DOCKER_USERNAME}} - registry.cn-hangzhou.aliyuncs.com password = ${{ DOCKER_PASSWORD}} # React-demo :latest docker build -t react-demo:latest Registry.cn-hangzhou.aliyuncs.com/yusongh/react-demo:latest # push to ali cloud image container services docker push Registry.cn-hangzhou.aliyuncs.com/yusongh/react-demo:latest # login server executing scripts - name: SSH docker login USES: appleboy/ssh-action@master with: host: ${{ secrets.SSH_HOST }} username: ${{ secrets.SSH_USERNAME }} password: ${{ secrets.SSH_PASSWORD }} script: cd /home/react-demo/ && sh react-demo.sh ${{ secrets.DOCKER_USERNAME }} ${{ secrets.DOCKER_PASSWORD }}Copy the code6. Configure Actions secrets
After completing the above steps, the Github Action’s Workflow is triggered when the code is submitted to the Master branch. Automatic pull code, build image to the image container service, and log in to the server to pull the image to start the image.
Scheme 2: Map the local directory of the server to the container
This scheme eliminates the need to build the image to the image service, and directly overwrites the server specified directory after pulling the packaging code, which is mapped to the container to modify the resources in the container
Map the local directory to the container directory
To explain the title, what if we want to change the configuration of nginx and want to change the resource file in Nginx? This is to map the directory in the container to the local directory so that modifying the local directory files affects the files in the container.
1. Create folders on the machine
- General directory
/home
|---yusong
|----nginx
|----conf.d
|----html
Copy the code2. Create the default.conf file in the conf.d folder
server {
listen 80;
server_name localhost;
The original configuration matches the root path
#location / {
# root /usr/share/nginx/html;
# index index.html index.htm;
#}
# change the configuration, match/path, and change the name of index.html to distinguish the configuration file from the configuration file in the container
location / {
root /usr/share/nginx/html;
indexindex-test.html index.htm; }}Copy the code3. Compile index-test. HTML in HTML to judge the folder mapping success
<html>
<body>
<h1>this is homePage</h2>
</body>
</html>
Copy the code4. Start nginx(8080) and map the path
docker run -d -p 8080:80 -v /home/panwei/nginx/conf.d:/etc/nginx/conf.d -v /home/panwei/nginx/html:/usr/share/nginx/html nginxCopy the code-v, -v means the local path before the colon, and the container path after the colon. The two paths are mapped, and the files in the local path will overwrite the files in the container. Some file locations in the nginx container: log location: /var/log/nginx/ configuration file location: /etc/nginx/ project location: /usr/share/nginx/ HTML
7. Access server IP address :8080
Seeing the packaged page indicates success
8. Refer to the article
- A step-by-step guide to deploying front-end projects using Github Actions