Teach your friends how to use Nginx to deploy the TienChin project!

Today, I will teach my friends how to deploy the TienChin project, and run this project together to see what kind of project it is.

Friends know that for this kind of project with front-end and back-end separation, when we actually deploy, we can deploy the front-end and back-end separation, or we can deploy the front-end and back-end without separation. I will share with my friends the next two different deployment methods.

1. Front-end and back-end separation deployment

1.1 Deployment architecture diagram

If the front and back ends are deployed separately, we generally need an Nginx server. Let me draw a simple deployment diagram for your reference:

A simple explanation is this:

  1. The browser makes the request.
  2. The request first reaches the Nginx server, and the Nginx server distributes the request by the Nginx server.
  3. If it is a static resource request, Nginx will forward it to the static resource server. Generally, Nginx may serve as the static resource server by itself, that is, read the data directly from Nginx’s own hard disk.
  4. If it is a dynamic resource, Nginx will forward it to Tomcat. For us, it is our Spring Boot service. Of course, if you don’t have so many servers, we can deploy Nginx and Spring Boot on the same server.

Well, this is our general deployment architecture diagram, which is very simple.

1.2 Preparations

Next, there are a few things that we need to prepare in advance.

First of all, let’s install MySQL and Redis on the server. I won’t go into details about how to install them here. It’s just basic exercises.

MySQL recommends that you install it with Docker to save trouble. If you don’t understand Docker, you can reply to the introductory tutorial written by Brother Song on Docker in the background of the official account; Redis can be installed directly. Song Ge included Redis tutorials in the previous vhr series of tutorials, and you can reply to vhr in the background of the official account to view details.

This completes our preparations.

1.3 Start deployment

1.3.1 Pull project

First of all, we need to pull our project from GitHub. The source code of the TienChin project is open source, and you can directly clone it:

  • https://github.com/lenve/tienchin

Just execute git clone directly.

After pulling it down, there are two folders:

  • tienchin is the server side code.
  • tienchin-ui is the front-end code.

1.3.2 Modify configuration

First, we create a database called tienchin, which is easy to say.

Next, we find the tienchin/sql/tienchin-video_2023-03-13.sql file and execute the script in the tienchin database.

Next, we find the tienchin/tienchin-admin/src/main/resources/application-druid.yml file. In this file, modify the database connection address, database name, user name and password.

Continue to open the tienchin/tienchin-admin/src/main/resources/application.yml file, and configure the Redis address, password and other information in this file.

In addition, there is another very important configuration that needs to be modified, that is, in the tienchin/tienchin-admin/src/main/resources/application.yml file, the server.servlet.context-path to /prod-api.

1.3.3 Server-side packaging

Next, we package the server side. Friends need to install Maven on their computers and configure environment variables. This is also a basic operation, so I won’t go into details.

If Maven has not been configured on the computer, it is recommended to use the Maven plug-in that comes with IDEA, so there is no need to download it additionally. The Maven plug-in that comes with IDEA is in the plugins/maven directory in the installation directory, and you can directly configure the bin directory here to the environment variable.

To package the server, we will enter the tienchin directory, and then execute the following code:

mvn package -Dmaven.test.skip=true

Seeing the following code indicates that the compilation was successful:

After the compilation is successful, in the tienchin/tienchin-admin/target directory, you can see a jar file named tienchin-admin.jar, which is what we need server code.

1.3.4 Front-end packaging

Next, go to the tienchin-ui directory and execute the following command to install dependencies (note that the front end requires NodeJS version 14 or higher):

npm install

Then execute the following command to compile and package:

npm run build:prod

After the packaging is complete, the dist directory will be generated, and the files inside are the static resource files we need:

In this way, the front-end code is packaged.

1.3.5 Install Nginx

Next, let’s install Nginx. I directly download the Nginx source code to compile and install it. The steps are as follows:

  1. First install the following two compilation tools
yum install -y zlib-devel
yum -y install pcre pcre-devel
  1. Download the Nginx source code and unzip it.
wget https://nginx.org/download/nginx-1.22.1.tar.gz
tar -zxvf nginx-1.22.1.tar.gz
  1. Compile and install

Enter the nginx decompression directory, and execute the following commands to compile and install:

./configure
make
make install

After that, our Nginx is installed.

1.3.6 Configure Nginx

Next, we first upload the newly packaged back-end tienchin-admin.jar and front-end dist directory to the server through commands or file upload tools.

Next, we first start the server tienchin-admin.jar:

nohup java -jar tienchin-admin.jar > tienchin.log &

When some partners deploy on the server side, the following exception will be thrown:

This is because the server lacks corresponding fonts, and Flowable needs to use these fonts when automatically generating deployment images, so we can install the required fonts:

yum install fontconfig
fc-cache --force

After the server is successfully started, we first use postman to test the login interface to ensure that it can run, which means that the server deployment is successful:

If you can log in successfully, it means that the server deployment is successful.

Next deploy the front end.

The front-end deployment is very simple, we only need to copy the content in dist to the html directory of nginx, the command is as follows:

cp dist/* /usr/local/nginx/html/

Next execute the following command to start nginx:

/usr/local/nginx/sbin/nginx

After nginx starts successfully, you can visit the page in the browser:

Of course, I can’t log in now, because there is still a lack of Nginx request forwarding. Now when we request Nginx, we can see the front-end page, but the server’s data request, Nginx will not automatically forward it to Spring Boot, so we still need to Continue to configure Nginx, the location of the Nginx configuration file is /usr/local/nginx/conf/nginx.conf, we add the following configuration:

location /prod-api {
       proxy_pass http://127.0.0.1:8080;
       tcp_nodelay on;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location / {
       root /usr/local/nginx/html/;
       expires 30d;
       try_files $uri $uri/ /index.html;
}

Here are the meanings of several configuration parameters, I will give you a little explanation:

  • try_files: Since our front-end Vue navigation is history mode, which is different from vhr’s hash mode, history mode will send the request path to Nginx to find it. Obviously, Ngnix cannot find such a path, so try_files means that if 404, Just display the index.html page by default, and then the specific routing navigation is done by vue-router.
  • tcp_nodelay: Enable TCP_NODELAY, which actually disables the Nagle algorithm and allows small packets to be sent. For delay-sensitive applications with relatively small data transmission volume, enabling the TCP_NODELAY option is undoubtedly a correct choice. The Nagle algorithm first caches the data and sends them together.

After the configuration is complete, restart Nginx:

/usr/local/nginx/sbin/nginx -s reload

Well, after restarting this time, you can play smoothly~

2. Regardless of front-end and back-end deployment

Deployment regardless of front-end and back-end is relatively simple, and Nginx is not needed, but the previous 1.3.1-1.3.4 is also needed.

In section 1.3.4, after we get the content compiled and packaged by the front end, we put it directly in the static resource directory of the tienchin-admin module, then continue to pack the server into a jar package, upload the jar package to the server and start the Yes, the startup command is the same as the jar package startup command introduced in Section 1.3.6. This process is relatively simple, and the relevant commands involved have been introduced earlier, so I will not repeat them.