若依配置教程（九）若依前后端分离版部署到服务器Nginx（Windows版）
搭建若依环境要部署到服务器上，首先要在本地运行若依系统
后端部署
1.在application.yml中修改后台端口，这里默认是8080。
https://img-blog.csdnimg.cn/1b485cfb60704fd8984a6e21a311b7e6.png#pic_center
2.在application-druid.yml中修改正式环境数据库。
https://img-blog.csdnimg.cn/d983a8c2fc1d472ba1bd3674625e9b59.png#pic_center
3.后端打包部署
打开右侧的Maven，点击：生命周期->package，然后点击运行，等待打包乐成，包在如图所示的文件夹中。然后将打包好的jar包（ruoyi-admin.jar），传到服务器的一个文件夹中，记着地点，后期需要jar包运行后端。
https://img-blog.csdnimg.cn/f1738c699a4847d880f2d56ce7fccde0.png#pic_center
https://img-blog.csdnimg.cn/2adaa52d500c4555bf42cd65d389b3a0.png#pic_center
首先启动redis，然后使用命令行，进入ruoyi-admin.jar文件地点的位置，输入命令行：java –jar ruoyi.jar。此时后端启动，出现如下图所示，若依后台运行乐成：
https://img-blog.csdnimg.cn/bb369f7bc5ec4baab75cb177b3ec4e50.png#pic_center
https://img-blog.csdnimg.cn/c0baed7e49ab47a08cb559320000363a.png#pic_center
前端部署
打开前端项目的vue.config.js文件，检查devServer下的proxy代理部分，然后将下面这个端口修改为你要在打包后访问的端口，纵然用nginx代理前的接口。这个端口默认是80端口，这里把其修改为不会辩论的70端口，不推荐使用80端口。
由于80端口是默认端口在部署到服务器上和下面启动nginx可能存在占用等问题。
除了这个70端口外，下面的target的url和端口要和你服务器上能访问到后台的接口一致。
https://img-blog.csdnimg.cn/8508390029a74c5e97b445e60b6601c6.png#pic_center
接下来将前端打包。首先打包之前确保已经安装完依赖项，即:npm install 乐成且没问题。在终端中，进入到ruoyi-ui目次，输入命令行：npm run build:prod。
https://img-blog.csdnimg.cn/3839c7fbc5874aebae1139098f5a1cf2.png#pic_center
等待一段时间打包乐成，此时在ruoyi-ui文件夹下生成dist目次。此目次就是打包之后的前端的资源。然后将此dist目次放在服务器上的某个目次下，下面使用Nginx代分析用。
https://img-blog.csdnimg.cn/658f523e78fe4edcb1fb22eaa579b3e7.png#pic_center
不要动dist下文件的路径
https://img-blog.csdnimg.cn/b2d81a59462b4e85b6c0b65f470d5272.png#pic_center
下载安装Nginx
Nginx下载地点：Nginx下载，选择相应版本的Windows版本
https://img-blog.csdnimg.cn/b29ab29e41734c269677ad75625f84ae.png#pic_center
下载后解压压缩包到服务器的某一个目次下，
https://img-blog.csdnimg.cn/049b9022ec274717a81c5162e7977528.png#pic_center
Nginx代理配置
进入到conf目次下，编辑配置文件nginx.conf
https://img-blog.csdnimg.cn/0537d8b6d0cf4603a82a0f84be93f9dc.png#pic_center
找到server节点
https://img-blog.csdnimg.cn/4df694a52c12469f927bac61c143c746.png#pic_center
首先这里的listen下的端口就是代理前的接口，要与前面前端项目的vue.config.js中的端口一致。
然后下面的server_name是你服务器的ip,这里纵然是使用的本地也发起不要用localhost，制止修改hosts文件导致的问题。下面的两个配置保持默认不要更改，配置的是防止404和入口页面。
server {
listen 70;
server_name10.118.2.142;
location / {
root C:\Users\Administrator\Desktop\dist;
try_files $uri $uri/ /index.html;
indexindex.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_processes1;
events {
worker_connections1024;
}
http {
include mime.types;
default_typeapplication/octet-stream;
sendfile on;
keepalive_timeout65;
server {
listen 70;
server_name10.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;
indexindex.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，窗口会一闪而过
https://img-blog.csdnimg.cn/44400b88cbb24cefaefb617214cbcafa.png#pic_center
如果对Nginx配置文件进行修改的话，需要重新加载：nginx -s reload
打开使命管理器，查察Nginx是否开启。
https://img-blog.csdnimg.cn/21259ce071554095b3902454418aa53f.png#pic_center
启动Nginx乐成后打开浏览器验证，输入（服务器ip：70）：比方：http://10.229.36.158:70/
启动乐成！
https://img-blog.csdnimg.cn/21ab38e05dd94c09ad37091ec16408c2.png#pic_center
参考博客
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]