As a front end, I have been in contact with the establishment of mature and complete CI and CD processes in the company before. Later, I wondered if I could also build such a system. After studying and studying, I wrote such a blog to learn with you.

First of all, we need a server, the local computer is also good (recommended 2 core 8G configuration above, because the installation of the service is relatively accounted for memory).

Install Docker

The Linux server uses curl to download shell scripts for quick installation

curl -fsSL get.docker.com -o get-docker.sh
Copy the code

Once the download is complete, you can view it using the ls command. If it already exists, run the sh command to execute the script

sh get-docker.sh
Copy the code

Notice If you are not the root user, run sudo su to obtain the super administrator permission.

After the installation is complete, start Docker Server

systemctl start docker
Copy the code

Using the docker version command, you can see that the Client and Server are successfully started.

Install Gitlab based on Docker

1. One-click installation commands

docker run --detach \
  --hostname localhost \
  --publish 443:443 --publish 80:80 --publish 222:22 \
  --name gitlab \
  --restart always \
  --volume /home/gitlab/config:/etc/gitlab \
  --volume /home/gitlab/logs:/var/log/gitlab \
  --volume /home/gitlab/data:/var/opt/gitlab \
  gitlab/gitlab-ce:latest
Copy the code

Hostname: Change this to your own domain name (domain name to be resolved) or server IP

Publish: Port mapping (server port: in-container port)

“Restart” : indicates the restart mode

Volume: mounts the directory in the container to the local server (local directory on the server: directory in the container)

Gitlab /gitlab-ce: Latest image name

2. After the installation is complete, use the domain name or server IP address to access the IP address

Log in as user root

Pass the default password of user root

docker exec -it gitlab sh
Copy the code

Shell command into the container, and then

cat /etc/gitlab/initial_root_password
Copy the code

Check the default password. After logging in as the root user, change the default password. The default password file will be automatically deleted 24 hours later.

Install Gitlab Runner based on Docker

Gitlab Runner is the tool that provides our CI and CD capabilities.

1. One-click install and run Gitlab Runner

docker run -d --name gitlab-runner --restart always \
  -v /home/gitlab-runner/config:/etc/gitlab-runner \
  -v /var/run/docker.sock:/var/run/docker.sock \
  gitlab/gitlab-runner:latest
Copy the code

-d: background running

–name: Specifies the run container name

“Restart” : indicates the restart mode

-v: mounts a directory

2. View the Gitlab Runner configuration

Once Gitlab Runner is installed, it is just a service running in the container, and we need to associate it with Gitlab, at which point we need to register Gitlab Runner.

First, on Gitlab, through the Root user’s profile page, and in the Overview configuration of a Runners runner, you can see the tokens you need to sign up for.

3. Sign up for Gitlab Runner

Run the registration command

docker run --rm -v /home/gitlab-runner/config:/etc/gitlab-runner gitlab/gitlab-runner register \
  --non-interactive \
  --executor "docker" \
  --docker-image alpine:latest \
  --url "http://localhost/" \
  --registration-token "xxxxxx" \
  --description "runner" \
  --tag-list "build" \
  --run-untagged="true" \
  --locked="false" \
  --access-level="not_protected"
Copy the code

* –url: change to the url on your Gitlab

* registration-token: gitLab token

Other configuration items are basic information, such as tag and description.

After successful registration, you can see it in gitLab refresh

At this point, we have the basic CI and CD capabilities, and the next step is to write.gitlab-ci.yml to provide us with the corresponding configuration of GitLab Runner. It will do what we wrote in this file.

Gitlab-ci. yml provides ci and CD configuration items

1. Provide front-end compilation and construction functions

Create a.gitlab-ci.yml file in the project root directory and write it as follows

Image: node:16.13.2-slim stages: # section-install-eslint-build-deploy cache: # Cache paths: - node_modules - dist job_install: tags: - build stage: install script: - npm install job_build: tags: - build stage: build script: - npm run buildCopy the code

Image: specifies the base image environment. The front end is Node and Docker, and the back end is Java, Python and Docker

“Stages” : Specifies the stages for implementation. The stages are carried out in a flow line

Cache: For which directories cache is enabled

Job: Specifies the tasks to be executed at each stage. Tags are runners used, stage specifies the stage, and script specifies the shell command to be executed

After code push, the pipeline automatically executes according to this file, which can be seen below

2. Nginx configuration file writing

Create an nginx.conf file in the project root directory, copy this file into the container as an nginx configuration file, and write the following

Server {# port 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; try_files $uri $uri/ /index.html; } #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 code

3. Dockerfile writing

Create a Dockerfile file in the root directory of the project, runner will create a docker image according to this file, file to write the following content

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf
Copy the code

4. Use Docker to automatically deploy front-end projects

The first is. Gitlab-ci.yml file preparation

Image: node:16.13.2-slim stages: # section-install-eslint-build-deploy cache: # Cache paths: - node_modules - dist job_install: tags: - build stage: install script: - npm install job_build: tags: - build stage: build script: - npm run build job_deploy: image: docker stage: deploy script: - docker build -t appimages . - if [ $(docker ps -aq --filter name=app-container) ]; then docker rm -f app-container; fi - docker run -d -p 8080:80 --name app-container appimagesCopy the code

The main thing is that there are more tasks in the deploy phase

Image: Docker image is used

Script first line: create a docker image from the Dockerfile file in our project directory

Script second line: Check whether name=app-container is running and destroy it if it is running

Script line 3: Start an app-container based on our packaged image

The configuration to this deployment is almost complete, but you may encounter a connection error at deployment time

through

vi /home/gitlab-runner/config/config.toml
Copy the code

Modify the runner configuration items, the content of the runner for the corresponding volume that add “/ usr/bin/docker: / usr/bin/docker”, “/ var/run/docker. The sock: / var/run/docker. The sock”

At this point, all of the process is complete, and after we have completed the code submission, we automatically perform the package compilation and deployment to the appropriate container operation. If you have any questions can contact me, you can also comment on the exchange oh!