jenkins+gitlab+nginx deployment of front-end application

Related dependency installation

docker

Since the domestic installation is too slow, you can use https://docs.docker.com/desktop/ to speed up the download.
The specific download process will not be explained here.
Mirror source: "http://hub-mirror.c.163.com"

Install Jenkins with Docker

# Pull the jenkins image docker pull jenkins/jenkins

# Run a service named jk in the background, with an external port number of 3080 and a linked data volume of ~/docker/jenkins docker run -d --name jk -p 3080:8080 -v ~/docker/jenkins:/var/jenkins_home jenkins/jenkins

After the command is executed, you can start an http service with port number 3080 and open the browser.

• Enter http://localhost:3080/ and wait for the initialization to complete (which may take a long time). At this time, the administrator password is required. You can get the administrator password by running cat ~/docker/jenkins/secrets/initialAdminPassword.
• The next step is to install the plugin. I recommend the first option, the recommended plugin (this installation will be slow, so be patient)
• Create the first administrator account

Install gitlab on docker

docker pull gitlab/gitlab-ce

docker run -d --name gitlab -p 443:443 -p 9001:80 -p 222:22 -v ~/docker/gl/config:/etc/gitlab:Z -v ~/docker/gl/logs:/var/logs/gitlab:Z -v ~/docker/gl/data:/var/opt/gitlab:Z gitlab/gitlab-ce

• The initialization process may take a long time. Run docker logs -f gitlab to view the progress.
  
• Enter http://localhost:9001. You will be prompted to enter a password for the first time. After that, enter your username and password to enter (the default username is root).
• Set the address for cloning the project using https and ssh.

# Configure the access address used by the http protocol. If no port number is added, the default is 80.
external_url 'http://192.168.1.2:9001'

# Configure the access address and port used by the ssh protocol gitlab_rails['gitlab_ssh_host'] = '192.168.1.2'
gitlab_rails['gitlab_shell_ssh_port'] = 222 # This port is the 222 port mapped to port 22 during run # nginx listens to port 80, otherwise the port number of external_url will be used by default, resulting in unsuccessful port mapping nginx['listen_port'] = 80
:wq #Save the configuration file and exit, restart the container

If the ssh method is unsuccessful, it is probably because the key file permissions on the server are incorrect. docker exec -it gitlab sh Enter the container and check whether the user name and group of the three files ssh_host_ecdsa_key, ssh_host_ed25519_key, and ssh_host_rsa_key in the /etc/gitlab directory are git (chown to modify the user, chgrp to modify the group), and whether the file permissions are 600 (the chmod command can be modified).

Install nginx in docker

docker pull nginx
docker run -d --name nginx -p 80:80 -v ~/nginx/html:/usr/share/nginx/html nginx

summary

• localhost:3080, access jenkins (should be running on the server used for building)
• localhost:9001, access gitlab (should be run on the server where the source code is placed)
• localhost, access nginx (should be running on the server)

Configuration

1. Install gitlab related plug-ins

Home -> System Management -> Plugin Management

Then switch to optional plugins, search for gitlab, select the gitlab plugin (I have already installed it, so it is not shown here), then select the button in the lower left corner and wait for the installation to complete

2. Home -> System Management -> System Configuration

In Credentials, you must add the GitLab API token.

The method of obtaining GitLabAPI token is shown in the figure below. The generated token will be hidden after refreshing to ensure security.

After completing the configuration, it is best to click the test connection button to ensure that the configuration is correct.

3. Create a new job

4. Enter the task name and select Free style

5. Configure related build options

1. In the General configuration, select the options filled in the previous system configuration. If you do not select them, the build status will not be sent back to gitlab.

2. Source code management

The URL can only be in http format, so the Credentials below need to use username with password. If you choose the wrong one, you will not be able to pull the code.

The configuration below means that only builds are performed on master and branches starting with ci. For specific rules, please click the question mark on the right to learn more.

3. Check Build when a change is pushed to GitLab. on the build trigger. On the right is the webhook URL for gitlab, and below are some options for when to trigger the build (which needs to be coordinated with the configuration on gitlab).

The webhooj URL provided by the jenkins plugin cannot be used directly, because jenkins requires login, and the external API also requires login, otherwise HTTP 401 will be returned. Fortunately, this kind of login can be handled with HTTP basic authentication.
Click Username -> Settings -> API Token -> Add New Token -> Enter a name -> Generate, then copy the Token and concatenate it with the previous webhook URL. The splicing rule is <scheme>://<user>:<password>@<host>:<port>/<path>;<params>?<query>#<frag>. Finally, you can get http://ma1:[email protected]:3080/project/gl

You can save it first. Then go to gitlab to configure it.

4. Gitlab configures webhook URL
By default, gitlab does not allow the use of local URLs, so either use a public domain name or modify gitlab's privacy settings (as shown below)

Then open the project to be deployed -> settings -> webhooks, fill in the concatenated URL in the previous step, select the corresponding event, and click Add. After adding successfully, you can click Test to test whether the hooks are working smoothly ().

5. Build environment Front-end builds inevitably require the use of node, so here you must check Provide Node & npm bin/ folder to PATH (if not, go to the plugin center to install it)

6. Build

Go to the plugin center and install a plugin called Publish Over SSH, which is mainly used to send generated files to a remote server.

You need to configure the plug-in in -> System Management -> System Configuration.

2. Build tab, add build steps, and select execute shell
Replace gl with the corresponding project name

# Delete the previous file rm -rf /tmp/html.tar.gz

# Run the test npm run test
# npm build, package script npm run bd

# Switch to the project directory cd /var/jenkins_home/workspace/gl
# Package the target folder into a compressed file tar -zcvf /tmp/html.tar.gz --exclude .git -C ./dist .
# Make sure to put the compressed file in the project directory, so publish over ssh cannot access mv /tmp/html.tar.gz ./

Build tab, add build steps, select Send files or execute commonads over SSH

# Delete /tmp/html first, then create a new one. Prevent error rm -rf /tmp/html
mkdir /tmp/html

# Unzip the compressed file to /tmp/html, and then delete the compressed file tar -xvf ~/html/html.tar.gz -C /tmp/html
rm -rf ~/html/html.tar.gz

#Copy the unzipped files to ~/nginx/html (the local path mapped by docker nginx before)
cd /tmp/html
cp -R /tmp/html/* ~/nginx/html

7. Post-build steps Click Add post-build operation steps and select Publish build status to Gitlab. After the Jenkins build is completed, the status of the build can also be seen in Gitlab's CI/CD.

6. Push the code and trigger the build. After pushing the code, if everything goes well, you will see the build history here, otherwise just check the configuration.

7. Browsing the Website

After pushing the code, only static files are deployed, so nginx does not need to be restarted to see the new content.

Summarize

• When pushing code, gitlab notifies jenkins through the webhook URL
• After receiving the POST request, jenkins triggers the build, including test packaging, etc. After completion, it sends the file to the remote server and executes the corresponding commands, such as decompressing the file and copying it to the nginx-related directory. If it is a nodejs application, you also need to execute the node script .
• The remote server needs to have docker and nginx containers installed in advance , and run the nginx service in the background.
• If you need nodejs + nginx , you can use docker-compose to simplify command running, and then add the corresponding command to the exec command of publish over ssh.
  

This is the end of this article about the front-end application implementation of jenkins+gitlab+nginx deployment. For more relevant jenkins gitlab nginx deployment content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!