Before, they were all packaged by themselves and then manually uploaded to the server to deploy the project. Here we introduce a method based on GitLab-Runner to automatically package and deploy the front-end and back-end projects to the server.
I. Environment preparation
Prepare two virtual machines, one for setting up the GitLab and one for deploying the project.
The server operating system is Centos8. Docker and GitLab need to be installed to build gitLab machine. The machine used to deploy the project requires nginx, Node, gitlab-Runner installed.
Docker is used here because you can quickly install the required software.
Docker installation
Install docker according to the official documentation.
Docs.docker.com/engine/inst…
In order to be able to normal and quick installation, use ali Cloud mirror warehouse to install Docker.
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
Copy the codeFollow the documentation and then execute the command to install docker.
yum install docker-ce docker-ce-cli containerd.io
Copy the codeIO >= version 1.4.1 is required as shown in the figure.
Install containerd. IO version 1.4.3.
Yum install https://download.docker.com/linux/centos/8/x86_64/stable/Packages/containerd.io-1.4.3-3.1.el8.x86_64.rpmCopy the codeAfter containerd. IO is installed, run the previous command again.
After the installation is complete,docker -v views the installed Docker version, as shown in the figure below.
Systemctl start docker Starts the docker and runs the systemctl enable docker command
After the Docker environment is installed, you can start installing Gitlab by executing the following command. The default address of the image is a foreign address, which is slow to download. Change the address of the image in vim /etc/dock/daemon. json.
{
"registry-mirrors":["https://almtd3fa.mirror.aliyuncs.com"]
}
Copy the codeRestart docker systemctl daemon-reload
systemctl restart docker
Install gitlab
docker run \
-d \
-p 9980:9980 \
-p 9922:22 \
-v /opt/gitlab/etc:/etc/gitlab \
-v /opt/gitlab/log:/var/log/gitlab \
-v /opt/gitlab/opt:/var/opt/gitlab \
--restart always \
--privileged=true \
--name gitlab \
gitlab/gitlab-ce
Copy the codeThe file to be downloaded is large, so wait patiently for the download and installation to complete. Here need to modify the/opt/gitlab/etc/gitlab. The contents of the rb, otherwise the clone is displayed on the web address is the address of a string with random string, Find external_url modified to external_url ‘http://192.168.1.225:9980’, as shown in the figure below.
Modify the address and port in /etc/gitlab.yml.
docker restart gitlabWait a few minutes and then you can access it normally.
To access the gitlab address, you will initially be required to reset the password of the root account.
The following is installed on the machine where the project is deployed
Install nginx
Wget HTTP: / / http://nginx.org/download/nginx-1.19.10.tar.gzCopy the codePersonally, I prefer to download the compressed package for installation. Of course, I can also install the file by docker, but I think it is more convenient to install the replacement file by compiling the compressed package.
Decompression package
The tar - ZXVF nginx - 1.19.10. Tar. GzCopy the codeCompile and install nginx. Installation depends on the installation of the GCC environment
yum -y install gcc gcc-c++
Copy the codeInstalling pcre
yum -y install pcre pcre-devel
Copy the codeInstall the zlib
yum -y install zlib zlib-devel
Copy the codeInstall openssl
yum -y install openssl openssl-devel
Copy the code./configure --prefix=/usr/local/nginx --with-http_ssl_module
Copy the code
Then do make && make install, nginx will be installed in the path/usr/local/nginx, executive/usr/local/nginx/sbin/nginx command, start nginx.
Install gitlab – runner
Download the gitlab-Runner RPM file.
Wget HTTP: / / https://mirrors.tuna.tsinghua.edu.cn/gitlab-runner/yum/el8-x86_64/gitlab-runner-13.8.0-1.x86_64.rpmCopy the codeExecute the downloaded installation package.
The RPM - the ivh gitlab - runner - 13.8.0-1. X86_64. RPM -- nodepsCopy the code
Install the node
Wget HTTP: / / https://nodejs.org/dist/v14.17.0/node-v14.17.0-linux-x64.tar.gzCopy the codeUnpack the
The tar - ZXVF node - v14.17.0 - Linux - x64. Tar. GzCopy the codeSoft connection mode
Ln -s /opt/node-v14.17.0-linux-x64/bin/node /usr/local/bin/node ln -s /opt/node-v14.17.0-linux-x64/bin/ NPM /usr/local/bin/npmCopy the code
Two. Front-end project deployment
Create a VUE project
Upload the project to the built GitLab. After uploading the project, click the CI/CD button in the sidebar of the project repository to find Runners and expand it, as shown in the figure below. It contains the information necessary to register as a Gitlab-Runner.
Registered gitlab – runner
The steps are as follows:
1. Run the gitlab-runner register command.
2. According to the prompt for built gitlab address, here is http://192.168.1.225:9980/.
3. Enter the token required for registration.
4. Enter a description, which is named CI.
5. Enter runner tags that must be consistent with the tag set in the. Gitlab-ci. yml file and set it to CI.
Configuration. Gitlab – ci. Yml
Create a.gitlab-ci.yml file in the project root directory for ci configuration. The following code is the configuration of.gitlab-ci.yml
Stages: - install_deps - build_prod-deploy_prod cache: paths: -node_modules / -dist # install_deps_job: Stage: install_deps only: -master script: -echo '-pwd -npm install # Install dependency tags: -ci when: Manual # Package new file build_prod_job: stage: build_prod variables: GIT_STRATEGY: None only: -master script: -rm -rf./dist # Delete dist folder from current folder -npm run build # delete tags: -ci when: Manual # Log in to the project deployment server, remove the old version of the project files, and finally copy the packaged files to the deploy_prod_job: stage: deploy_prod variables: GIT_STRATEGY: None only: /dist /usr/local/nginx/ HTML tags: -ci when: -cd: -cd: -cd: -cd: -cd: -cd: -cd: -cd: -cd: -cd manualCopy the codeAny number of steps can be defined under the stages configuration item in the file. There are three total steps defined as install_deps,build_prod, and deploy_prod. It can be adjusted according to specific needs.
Where install_deps installs the project dependencies, build_prod packages the files, and deploy_prod deploys the packaged files to the specified location.
A task is defined under each step. The following uses install_DEPs_job as an example. Install_deps_job indicates the task name, and stage indicates the step to which it belongs. Only indicates under which branch it can be triggered. Script Indicates the command script to be executed. Tags can be triggered under the specified tag. When defines when a job is started. It is indicated here as manual trigger that is triggered by clicking a button. The other two are similar.
Finally, upload the submission code.
Start deploying the project
Enter the project repository and click on the piplines sidebar to see the latest row, clicking the buttons from left to right.
Failure may occur after the first button is clicked. This may be because the git version on the machine where the project is being deployed is too low, with the default being 1.8. You can uninstall the original git and install a higher version of Git 2.x.
Gitlab-runner uninstall can uninstall the gitlab-runner default user.
Gitlab-runner install –working-directory /home/gitlab-runner –user root Reinstall gitlab-runner and set user to root.
Service gitlab-runner restart Restarts gitlab-runner.
or
Chomd -r 777 /usr/local/nginx/html Grants folder permissions. Click Run again. The command is executed successfully.
The deployed dist folder appears under the /usr/local/nginx/html directory.
Modify the vim/usr/local/nginx/conf/nginx. Conf file location, the paths point to the new deployment under the dist folder.
location / {
root html/dist;
index index.html index.htm;
}
Copy the code
Save the restart nginx, / usr/local/nginx/sbin/nginx -s reload.
Access to the addresshttp://192.168.1.227, you can see the deployed page.
If there is a subsequent submission, a new line will appear on the Piplines, which can be deployed by clicking the button again, or clicking the previous submission if you want to roll back the previous version.
The spring Boot project and multiple deployments will be described later.