Preliminary preparation
- One cloud server based on CentOS 7 system.
- Projects based on Vue-CLI are deployed on GitLab.
Deployment target
Build a Docker+Nginx+Jenkins environment to realize the process of front-end automated deployment. The specific implementation effect is that developers develop locally, push submit code to the designated branch, and automatically trigger Jenkins to perform continuous integration and automatic deployment. You can set the email notification after the deployment is completed, whether the deployment is successful or not, after the success, the packaged file will be uploaded to the server, the page will be displayed through the nginx reverse proxy, and the related error log will be printed if it fails.
Friendly reminder: Try to choose Alibaba Cloud or Tencent Cloud server, Jenkins may not start normally when other servers are deployed!
Dcoker environment construction
Connect to cloud server
You can choose the online terminal (sometimes stuck) provided by Alibaba Cloud or Tencent Cloud, but it is recommended to use a local computer to connect. Enter the connection command in the terminal:
ssh root@你的服务器公网地址
After entering the cloud server password, the command displays the following results:
There are two branch versions of Docker: Docker CE and Docker EE, namely the community edition and the enterprise edition. This tutorial is based on CentOS 7 to install Docker CE.
Install Docker environment
1. Install Docker's dependent libraries.
yum install -y yum-utils device-mapper-persistent-data lvm2
2. Add the software source information of Docker CE.
sudo yum-config-manager --add-repo \ https://download.docker.com/linux/centos/docker-ce.repo
3. Install Docker CE.
sudo yum install docker-ce
4. Start the Docker service.
sudo systemctl enable docker // 设置开机自启
sudo systemctl start docker // 启动dockerDocker install Docker Compose
Docker Compose is a tool for defining and running multi-container Docker applications. With Compose, you can use YML files to configure all services required by your application. Then, with one command, all services can be created and started from the YML file configuration. Download docker-compose:
sudo curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
Elevate permissions after installation:
sudo chmod +x /usr/local/bin/docker-compose
Enter docker-compose -v to display the following page:
Docker install Nginx and Jenkins service
Install Nginx and Jenkins
The Docker image pulls the Nginx and Jenkins environment commands as follows:
docker pull nginx
docker pull jenkins/jenkins:lts
After the installation is complete, execute docker images to clearly see the current images under Docker.
docker images
Nginx and Jenkins catalog writing
In order to facilitate management, under Docker we gather Nginx and Jenkins into a file directory. The directory structure is as follows:
+ compose
- docker-compose.yml // docker-compose执行文件
+ nginx
+ conf.d
- nginx.conf // Nginx配置
+ jenkins
- jenkins_home // Jenkins挂载卷
+ webserver
-static //存放前端打包后的dist文件
The Web server directory belongs to the post-generation generation and will not be discussed. The Compose, Nginx and Jenkins directories and their subordinate files need to be created manually. The most important ones are the configuration of the docker-compose.yml file and the nginx.conf file. The above folder is recommended to be placed under the root directory, it can be placed under the home folder or a new folder can be created separately.
docker-compose.yml file configuration
version: '3'
services: # 集合
docker_jenkins:
user: root # 为了避免一些权限问题 在这我使用了root
restart: always # 重启方式
image: jenkins/jenkins:lts # 指定服务所使用的镜像 在这里我选择了 LTS (长期支持)
container_name: jenkins # 容器名称
ports: # 对外暴露的端口定义
- 8080:8080
- 50000:50000
volumes: # 卷挂载路径
- /home/jenkins/jenkins_home/:/var/jenkins_home # 这是我们一开始创建的目录挂载到容器内的jenkins_home目录 - /var/run/docker.sock:/var/run/docker.sock
- /usr/bin/docker:/usr/bin/docker # 这是为了我们可以在容器内使用docker命令
- /usr/local/bin/docker-compose:/usr/local/bin/docker-compose
docker_nginx:
restart: always
image: nginx
container_name: nginx
ports:
- 8090:80
- 80:80
- 433:433
volumes:
- /home/nginx/conf.d/:/etc/nginx/conf.d - /home/webserver/static/jenkins/dist/dist:/usr/share/nginx/html
nginx.conf file configuration
server{
listen 80;
root /usr/share/nginx/html;index index.html index.htm;
}
After the above two files are configured, you need to enter the /home/compose directory and enter the following command to start the environment:
docker-compose up -d
Enter docker ps -a to view the status of the container:
The status shows up, and the port number at the back shows the above as normal status. Enter the public IP of your cloud server and the port number of 8080 in the browser to display the following page:
important point:
- Before this step, remember to open the 80-port security group of the cloud server (you can refer to the one-click activation function provided), but in addition, it is recommended to manually add the 8080 port security group.
- Port 80: It is a port opened for HTTP (HyperText Transport Protocol).
- 8080 port: is used for WWW proxy service, which can realize web browsing.
The password required in the above figure is in /home/jenkins/jenkins_home/secrets/initAdminPassword in volumes in docker-compose.yml. It can be obtained by the following command:
cat /home/jenkins/jenkins_home/secrets/initialAdminPassword
Install Jenkins plugin
After entering the page, select recommended installation.
After the installation is complete, select the Manage Jenkins option on the left. As shown below:
Manage Plugins in Jenkins search for the following plugins GitLab, Publish Over SSH, Nodejs and install them.
After the installation is complete, configure the Nodejs environment and SSH parameters. Select global tool Configuration>NodeJS on the home page to select automatic installation and the corresponding Nodejs version number. After the selection is successful, click Save.
Configure SSH information, Manage Jenkins>configure System and fill in the server information:
Connect Jenkins and GitLab
Generate key
Execute the following command in the root directory:
ssh-keygen -t rsa
The default is to enter twice, as shown in the following figure:
Use cd ~/.ssh to view the generated file. Copy and paste the generated key id_rsa into the credentials in Jenkins. as the picture shows:
Log in to GitLab and configure the id_rsa.pub public key in GitLab:
New Project
After preparation, start to create a new task, select new item>freestyle project to build a free style project.
Source code management
After the creation is complete, configure Git information in the source code management, and select the credentials we just added for credentials.
Build trigger
In the build trigger, select the time when we trigger the build. You can choose the hook of your teammate, such as when pushing code or when Merge Request:
Click the advanced option to find secret token>Generate to generate a token value:
After the configuration is successful, you also need to add the corresponding hook to GitLab. Write down the webhookURL (framed in red) and the secret token value in the above figure, and configure it in GitLab.
Build environment and build configuration
After completing the above configuration, Jenkins will be associated with GitLab. When you push the file locally, it will be built automatically. You can access the modified project by accessing the public IP address of the cloud server. You can also manually build on Jenkins, such as The picture shows:
Concluding remarks
Finally, the simple online deployment project is over. Students with domain names can perform cloud resolution to map the IP address of the public network, so that they can use more recognizable domain names for project development and launch.