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

搭建若依环境

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

---

  

---

后端部署

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

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

3.后端打包部署

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

     首先启动redis，然后使用命令行，进入ruoyi-admin.jar文件地点的位置，输入命令行：java –jar ruoyi.jar。此时后端启动，出现如下图所示，若依后台运行乐成：

---

前端部署

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

---

    接下来将前端打包。首先打包之前确保已经安装完依赖项，即:npm install 乐成且没问题。在终端中，进入到ruoyi-ui目次，输入命令行：npm run build:prod。

    等待一段时间打包乐成，此时在ruoyi-ui文件夹下生成dist目次。此目次就是打包之后的前端的资源。然后将此dist目次放在服务器上的某个目次下，下面使用Nginx代分析用。

不要动dist下文件的路径

---

下载安装Nginx

Nginx下载地点：Nginx下载，选择相应版本的Windows版本

下载后解压压缩包到服务器的某一个目次下，

Nginx代理配置

进入到conf目次下，编辑配置文件nginx.conf

找到server节点

    首先这里的listen下的端口就是代理前的接口，要与前面前端项目的vue.config.js中的端口一致。
    然后下面的server_name是你服务器的ip,这里纵然是使用的本地也发起不要用localhost，制止修改hosts文件导致的问题。下面的两个配置保持默认不要更改，配置的是防止404和入口页面。

1. server {
2.     listen       70;
3.     server_name  10.118.2.142;
5.     location / {
6.         root   C:\Users\Administrator\Desktop\dist;
7.         try_files $uri $uri/ /index.html;
8.         index  index.html index.htm;
9.     }

复制代码

然后再下面的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/就是跟前面前端项目设置代理的路径重写一致。
附上完备的代码：

1. worker_processes  1;
3. events {
4.     worker_connections  1024;
5. }
7. http {
8.     include       mime.types;
9.     default_type  application/octet-stream;
10.     sendfile        on;
11.     keepalive_timeout  65;
13.     server {
14.         listen       70;
15.         server_name  10.118.2.142;
16.                 charset utf-8;
18.    location / {
19.             root   C:\Users\Administrator\Desktop\software\apache-tomcat-10.0.27-windows-x64\apache-tomcat-10.0.27\webapps\dist;
20.             try_files $uri $uri/ /index.html;
21.             index  index.html index.htm;
22.         }
23.                
24.                 location /prod-api/ {
25.                         proxy_set_header Host $http_host;
26.                         proxy_set_header X-Real-IP $remote_addr;
27.                         proxy_set_header REMOTE-HOST $remote_addr;
28.                         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
29.                         proxy_pass http://localhost:8080/;
30.                 }
32.         error_page   500 502 503 504  /50x.html;
33.         location = /50x.html {
34.             root   html;
35.         }
36.     }
37. }

复制代码

启动Nginx

进入到Nginx文件夹目次下，用命令行输入：start nginx.exe，启动Nginx，窗口会一闪而过

如果对Nginx配置文件进行修改的话，需要重新加载：nginx -s reload
打开使命管理器，查察Nginx是否开启。

启动Nginx乐成后打开浏览器验证，输入（服务器ip：70）：比方：http://10.229.36.158:70/
启动乐成！

参考博客

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。