If the front-end and back-end projects of the framework are deployed separately (jar package + Nginx deployment)

If the front-end and back-end projects of the framework are deployed separately (jar package + Nginx deployment)

Recently, I made a small project with the front-end and back-end separation framework. I wanted to deploy it to another windows computer (server). There was a problem. Finally, I solved it and wrote a document to summarize it.

1. Required for deployment

To deploy the project to the server, the server must have the following conditions:
1. JDK1.8 or higher
2. Tomact (if you deploy the jar package, you don’t need it)
3. Nginx (required)
4. Redis service (download and run directly without setting Service is also possible)
5. Mysql connection and correctness

2. Pack

For this step, you can refer to the document given on the official website, here I write that I have implemented the part used

2.1 Background packaging

If you need to package to Tomact, modify the packaging in ruoyi/pom.xml to war. The jar package is used here, so there is no need to change it.

Insert picture description here


Then package it through Maven.

2.2 Front-end packaging

Enter the packaging command in the console

Insert picture description here
# 打包正式环境
npm run build:prod

# 打包预发布环境
npm run build:stage

After typing, a folder named dist will be generated

Insert picture description here

3. Deployment

The first step is to start the database.
The second step is to start the Redis service
. Directly enter cmd on the Redis file path and enter after entering redis-server.exe redis.windows.conf. If you don't, you can see the third step of starting redis in this window to
run the background jar package (or Tomact deployment war package).

The key to start:
Step 4: Configure Nginx, first put the front-end package (dist folder) just created into the HTML folder in Nginx.

Insert picture description here


Then return to the first level to modify the nginx configuration file under conf.

Insert picture description here


My modifications are as follows. When copying, delete the comment:

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       90;//前端项目的端口
        server_name  localhost;
        location / {
        root   html/dist;//刚刚保持的路径
        index  index.html index.htm;
        }
		
      location /prod-api/{
      	proxy_set_header Host $http_host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header REMOTE-HOST $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_pass http://localhost:8090/;//后台项目的运行端口
}

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

After doing this, run Nginx, and then access the front-end port (90)!