若依配置教程（九）若依前后端分离版部署到服务器Nginx（Windows版）

不念不忘少年蓝@ 2024-03-26 12:59 80阅读 0赞

## 搭建若依环境 ##

要部署到服务器上，首先要在本地[运行若依系统][Link 1]

--------------------

#### 文章目录 ####

*  搭建若依环境
 *  后端部署
 *   *  1.在application.yml中修改后台端口，这里默认是8080。
     *  2.在application-druid.yml中修改正式环境数据库。
     *  3.后端打包部署
 *  前端部署
 *  下载安装Nginx
 *   *  Nginx代理配置
 *  启动Nginx

--------------------

## 后端部署 ##

### 1.在application.yml中修改后台端口，这里默认是8080。 ###

![在这里插入图片描述][1b485cfb60704fd8984a6e21a311b7e6.png_pic_center]

### 2.在application-druid.yml中修改正式环境数据库。 ###

![在这里插入图片描述][d983a8c2fc1d472ba1bd3674625e9b59.png_pic_center]

### 3.后端打包部署 ###

打开右侧的Maven，点击：生命周期->package，然后点击运行，等待打包成功，包在如图所示的文件夹中。然后将打包好的jar包（ruoyi-admin.jar），传到服务器的一个文件夹中，**记住地址，后期需要jar包运行后端**。

![在这里插入图片描述][f1738c699a4847d880f2d56ce7fccde0.png_pic_center]  
![在这里插入图片描述][2adaa52d500c4555bf42cd65d389b3a0.png_pic_center]  
首先[启动redis][Link 1]，然后使用命令行，进入ruoyi-admin.jar文件所在的位置，输入命令行：java –jar ruoyi.jar。此时后端启动，出现如下图所示，若依后台运行成功：  
![在这里插入图片描述][bb369f7bc5ec4baab75cb177b3ec4e50.png_pic_center]  
![在这里插入图片描述][c0baed7e49ab47a08cb559320000363a.png_pic_center]

--------------------

## 前端部署 ##

打开前端项目的vue.config.js文件，检查devServer下的proxy代理部分，然后将下面这个端口修改为你要在打包后访问的端口，即使用nginx代理前的接口。这个端口默认是80端口，这里把其修改为不会冲突的70端口，不推荐使用80端口。  
因为80端口是默认端口在部署到服务器上和下面启动nginx可能存在占用等问题。  
除了这个70端口外，下面的target的url和端口要和你服务器上能访问到后台的接口一致。

![在这里插入图片描述][8508390029a74c5e97b445e60b6601c6.png_pic_center]

--------------------

接下来将前端打包。首先打包之前确保已经安装完依赖项，即:npm install 成功且没问题。在终端中，进入到ruoyi-ui目录，输入命令行：npm run build:prod。  
![在这里插入图片描述][3839c7fbc5874aebae1139098f5a1cf2.png_pic_center]

等待一段时间打包成功，此时在ruoyi-ui文件夹下生成dist目录。此目录就是打包之后的前端的资源。然后将此dist目录放在服务器上的某个目录下，下面使用Nginx代理会用。  
![在这里插入图片描述][658f523e78fe4edcb1fb22eaa579b3e7.png_pic_center]  
不要动dist下文件的路径  
![在这里插入图片描述][b2d81a59462b4e85b6c0b65f470d5272.png_pic_center]

--------------------

## 下载安装Nginx ##

Nginx下载地址：[Nginx下载][Nginx]，选择相应版本的Windows版本  
![在这里插入图片描述][b29ab29e41734c269677ad75625f84ae.png_pic_center]  
下载后解压压缩包到服务器的某一个目录下，  
![在这里插入图片描述][049b9022ec274717a81c5162e7977528.png_pic_center]

### Nginx代理配置 ###

进入到conf目录下，编辑配置文件nginx.conf  
![在这里插入图片描述][0537d8b6d0cf4603a82a0f84be93f9dc.png_pic_center]  
找到server节点  
![在这里插入图片描述][4df694a52c12469f927bac61c143c746.png_pic_center]  
首先这里的listen下的端口就是代理前的接口，要与前面前端项目的vue.config.js中的端口一致。

然后下面的server\_name是你服务器的ip,这里即使是使用的本地也建议不要用localhost，避免修改hosts文件导致的问题。下面的两个配置保持默认不要更改，配置的是防止404和入口页面。

server {
        listen       70;
        server_name  10.118.2.142;
    
        location / {
            root   C:\Users\Administrator\Desktop\dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

然后再下面的location /prod-api/ 就是配置的代理后的地址。

**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:8080/;  
\}**

这里的 /prod-api/就是跟前面前端项目设置代理的路径重写一致。  
附上完整的代码：

worker_processes  1;
    
    events {
        
        worker_connections  1024;
    }
    
    http {
        
        include       mime.types;
        default_type  application/octet-stream;
        sendfile        on;
        keepalive_timeout  65;
    
        server {
        
            listen       70;
            server_name  10.118.2.142;
    		charset utf-8;
    
       location / {
        
                root   C:\Users\Administrator\Desktop\software\apache-tomcat-10.0.27-windows-x64\apache-tomcat-10.0.27\webapps\dist;
                try_files $uri $uri/ /index.html;
                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:8080/;
    		}
    
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
        
                root   html;
            }
        }
    }

## 启动Nginx ##

进入到Nginx文件夹目录下，用命令行输入：start nginx.exe，启动Nginx，窗口会一闪而过  
![在这里插入图片描述][44400b88cbb24cefaefb617214cbcafa.png_pic_center]  
如果对Nginx配置文件进行修改的话，需要重新加载：nginx -s reload  
打开任务管理器，查看Nginx是否开启。  
![在这里插入图片描述][21259ce071554095b3902454418aa53f.png_pic_center]  
启动Nginx成功后打开浏览器验证，输入（服务器ip：70）：例如：http://10.229.36.158:70/  
启动成功！  
![在这里插入图片描述][21ab38e05dd94c09ad37091ec16408c2.png_pic_center]

[参考博客][Link 2]

[Link 1]: https://blog.csdn.net/qq_46073825/article/details/128716794?spm=1001.2014.3001.5502
[1b485cfb60704fd8984a6e21a311b7e6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4c6baa8d638b41828ec15d0d712af558.png
[d983a8c2fc1d472ba1bd3674625e9b59.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/cdb19703de484ee1bc491dfa8cc68438.png
[f1738c699a4847d880f2d56ce7fccde0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2e2ef2464eef46dd861aca38c8666c65.png
[2adaa52d500c4555bf42cd65d389b3a0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1df3460caa894a0f94d5ddda5887a799.png
[bb369f7bc5ec4baab75cb177b3ec4e50.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5c079ff55386422d8b9ec1b856cf2a3a.png
[c0baed7e49ab47a08cb559320000363a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0fb90b277b4f4c818efd5aab2d46166c.png
[8508390029a74c5e97b445e60b6601c6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f82b519adc8d4e9fb3613351f2e4209a.png
[3839c7fbc5874aebae1139098f5a1cf2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d1d948442a744df18477dfcce875cb4f.png
[658f523e78fe4edcb1fb22eaa579b3e7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/68817098ddff4925adf5316f127e6425.png
[b2d81a59462b4e85b6c0b65f470d5272.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/29308f0a95b5475cb4108391c88c5ca1.png
[Nginx]: http://nginx.org/en/download.html
[b29ab29e41734c269677ad75625f84ae.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/07d5777bb37442c5a76f0ad7056f370f.png
[049b9022ec274717a81c5162e7977528.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/81d2efd3808c418b900b89b8968e0239.png
[0537d8b6d0cf4603a82a0f84be93f9dc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6d0c3fb61ab84aaeb9e60361c0aac895.png
[4df694a52c12469f927bac61c143c746.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b6e01e55383e40e08463d98e57f7570f.png
[44400b88cbb24cefaefb617214cbcafa.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/eb8b70e4f5e4424cb805691e71b50094.png
[21259ce071554095b3902454418aa53f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/953fe2f82e4140ab85118b2ea804ef1d.png
[21ab38e05dd94c09ad37091ec16408c2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b6f73b43f9bc4c9d843d293cbe8402d7.png
[Link 2]: https://blog.csdn.net/peter__xu/article/details/121898223?spm=1001.2014.3001.5506