One, foreword

I started a cloud server on November 11. In order to make the front-end code I wrote more convenient for deployment, I used Jenkins for automatic deployment.

This article is a record of this practice, but also hope that through this article, can help more students quickly deploy their own front-end code, improve the development efficiency.

Two, preliminary preparation

  • First of all, I definitely need a server of my own, which can be a cloud server or an old computer as a server. I used Tencent Cloud, and the operating system isCentOS 7.5;
  • Terminal simulation software, you can access your server through SSH. I use Xshell 4 community edition in Windows for SSH connection. If YOU use Mac or Linux, you can operate through Terminal. As long as you can connect to your own server;
  • Register a Gitee account. GitHub is a bit slow to access, so I use Gitee as my repository.
  • Finally, a cup of hot water and let’s get to work.

3. Deployment process

Before getting into practice, let’s take a look at the entire automated deployment process.

  1. First we pull the code from the code repository through Jenkins;
  2. We then compiled and packaged the code, and pushed the packaged static file to the deployed server (Jenkins and the deployment server use the same server in this article).
  3. On the deployed server, we reverse proxy through Nginx so that users can access it.

Now that you understand the process, let’s get started

4. Server configuration

4.1 Setting A User

First we connect to the server through SSH, usually the first use of account root, we better create a new user and give the new user sudo permission.

adduser user1 Create user user1
passwd user1 # 2. Set the password for user1
chmode -v u+w /etc/sudoers # 3. Add write permission to sudoers files. Default is read-only
vi /etc/sudoers # 4. Modify the sudoers file, press I to enter the editing mode, find the corresponding line below, modify, after the modification is complete, press Esc to enter the editing mode, and enter :wq to save and exit
-----------------------------------------------------------------------------------
## Allow root to run any commands anywhereRoot ALL=(ALL) ALL user1 ALL=(ALL) ALL ----------------------------------------------------------------------------------- chomd -v u-w /etc/sudoers# 5. Delete read and write permissions from sudoers
Copy the code

We are now ready to log in as user user1, and user1 has sudo permission.

4.2 installation of Java

Run the following command to install Java. You can verify the installation using the javac command.

Yum -y install Java -- 1.8.0 comes with its develCopy the code

4.3 installation Jenkins

  1. If you have imported the key using Jenkins before, skip this step and enter the following command for the first installation. 
    sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
Copy the code
  2. Jenkins installation; 
    yum -y install jenkins
Copy the code
  3. Start Jenkins and set it to boot; 
    systemctl start jenkins.service
chkconfig jenkins on
Copy the code

    By visitingIP address: 8080To verify that the startup was successful.

  4. Enter Jenkins, view the initial password, copy and enter; 
    cat /var/lib/jenkins/secrets/initialAdminPassword
Copy the code
  5. Choose the defaultinstall suggested pluginsInstall plug-ins;
  6. Create Jenkins user.

4.4 Configuring Jenkins Rights

If you run a Shell script in Jenkins, Jenkins does not have the permission. Sudo vi /etc/sysconfig/Jenkins, find JENKINS_USER and change it to root.

JENKINS_USER="root"
Copy the code

After that, modify Jenkins related folder user permissions.

chown -R root:root /var/lib/jenkins
chown -R root:root /var/cache/jenkins
chown -R root:root /var/log/jenkins
service jenkins restart
Copy the code

4.5 install Git

Because you need to pull code from a Git repository, you need to install Git.

sudo yum install git
Copy the code

4.6 installation node

Because the front-end code needs to be built and NPM is needed, node needs to be installed. The default node version is relatively low. You can use NVM to install a higher version of Node, which is not described in this article.

sudo yum install nodejs
Copy the code

4.7 Generating an SSH Public Key for Deployment

Since the deployment from Gitee requires the corresponding deployment public key to be configured, it is the corresponding public key.

ssh-keygen -t rsa -C "[email protected]"
Copy the code

Run cat ~/. SSH /id_rsa.pub to view the public key of the server.

5. Gitee configuration

5.1 Creating a Code Repository

Create a code repository and upload your own code.

5.2 Configuring and Deploying public Keys for the Warehouse

Click Warehouse Management, select Deploy Public Key Management in the sidebar, click Add Public Key, copy server Public Key in 4.7, and add.

6. Jenkins configuration

Step 1: Click New Item in the left sidebar to create a New Item.

ok

Source Code Management
Git
Branches to build

Step 4: Select Provide Node & NPM bin/ Folder to PATH in Build Environment.

Build
Execute shell

Step 6: Write shell steps. For convenience, I just installed the following NPM package and compiled it. Finally, I moved the compiled dist folder to /work.

build

Nginx configuration

7.1 install Nginx

sudo yum install nginx -y
Copy the code

7.2 throughnginxCommand to start Nginx

At this point, the access IP address will display the Nginx test page.

7.3 configurationnginx.conffile

Run the sudo vi /etc/nginx/nginx.conf command to edit the server file.

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
	   root /work/dist; The address of the compiled static file
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
Copy the code

7.4 restart Nginx

After the modification is complete, we need to do the following two steps.

Sudo nginx -t // verify that writing is correct nginx-sReload // Restart NginxCopy the code

7.5 Access our public IP address, then our page should appear

Eight, summary

Every time we change the code commit in the future, we will be able to deploy automatically in Jenkins.

This practice, over ~