若依前後端分離版本，Windows下使用Nginx代理的方式進行部署(全流程，圖文教程)
場景
若依官網:
前提：
伺服器上安裝Mysql，並將資料庫匯入，在SpringBoot中的application-druid.yml配置mysql資料庫連線。
伺服器安裝Redis服務端，並在application.yml中配置連線。
具體可以參照：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107486313
注：
部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。
實現
後端部署
首先將後臺專案進行打包，在application.yml配置後臺埠，這裡是8080。
然後在IDEA中將後臺系統打成jar包，然後將jar包複製到伺服器上，然後執行後臺jar包。
這塊比較簡單，可以具體參照下面的官網教程。
後端部署
bin/package.bat 在專案的目錄下執行
然後會在專案下生成 target資料夾包含 war 或jar （多模組生成在ruoyi-admin）
1、jar部署方式
使用命令列執行：java –jar
ruoyi.jar 或者執行指令碼：bin/run.bat
2、war部署方式
pom.xml packaging修改為war
放入tomcat伺服器webapps
提示
SpringBoot去除內嵌tomcat
<!-- 多模組排除內建tomcat --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <exclusions> <exclusion> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-tomcat</artifactId> </exclusion> </exclusions> </dependency> <!-- 單應用排除內建tomcat --> <exclusions> <exclusion> <artifactId>spring-boot-starter-tomcat</artifactId> <groupId>org.springframework.boot</groupId> </exclusion> </exclusions>
這裡推薦使用Nginx代理的方式，所以需要將其打成jar包執行的方式，不用再搭建Tomcat執行war包。
最終將後臺專案執行之後，訪問後臺介面
http://localhost:8080/captchaImage
此介面是登入時的驗證碼介面，是不需要許可權驗證的。
對應的後臺介面位置
com.ruoyi.project.common下的CaptchaController
設定此介面放開不需要驗證的配置的地方
部署成功後臺專案後訪問驗證碼介面如果出現以下介面則是部署成功
前端部署
這裡是用VSCode作為前端的IDE，首先開啟前端專案的vue.config.js
找到devServer下的proxy代理部分
這裡的target是代理的請求後臺的介面，對應上面部署的後臺介面的url，下面還有一個路徑重寫，添加了一個
process.env.VUE_APP_BASE_API]:
此路徑的配置在
所以在使用
npm run dev
執行專案時，請求都會被代理到你設定的localhost:8080/dev-api下
所以要保證你在自己的本地執行前端專案和後臺專案後能代理成功，即本地的前端能訪問到本地的後臺介面。
接下來將前端打包。
首先打包之前確保已經安裝完依賴項，即
npm install 成功且沒問題。
然後開啟vue.config.js
首先將上面的這個埠改為你要在打包後訪問的埠，即使用nginx代理前的介面。
這個埠預設是80埠，這裡把其修改為不會衝突的70埠，不推薦使用80埠。
因為80埠是預設埠在部署到伺服器上和下面啟動nginx可能存在佔用等問題。
除了這個70埠外，下面的target的url和埠要和你伺服器上能訪問到後臺的介面一致。
然後在VSCode中新建終端，或者在前端專案下開啟cmd
npm run build:prod
進行前端專案的打包
打包前端成功之後
此時會在專案目錄下生成dist目錄
此目錄就是打包之後的前端的資源。
然後將此dist目錄放在伺服器上的某個目錄下，下面使用Nginx代理會用
不要動dist下檔案的路徑
下載安裝Nginx
Nginx下載地址
http://nginx.org/en/download.html
這裡點選相應版本的Windows版本
下載之後是一個壓縮包，將其解壓到伺服器上的某個目錄
Nginx代理配置
進入到上面解壓的conf目錄下，編輯Nginx的配置檔案nginx.conf
找到server節點
首先這裡的listen下的埠就是代理前的介面，要與前面前端專案的vue.config.js中的埠一致。
server { listen 70; server_name 10.229.36.158;
然後下面的server_name是你伺服器的ip,這裡即使是使用的本地也建議不要用localhost，避免修改hosts檔案導致的問題。
所以這裡就直接設定你要部署專案的伺服器的ip。
然後下面的location /下面配置的就是代理前前端靜態資源的路徑等。
root 對應的就是在伺服器上前端資源的dist目錄的全路徑，即代表根路徑。
下面的兩個配置保持預設不要更改，配置的是防止404和入口頁面。
location / { root D:/www/kaoqin/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/就是跟前面前端專案設定代理的路徑重寫一致。
下面的一些是設定請求頭等，防止出現跨域問題。
然後最下面的proxy_pass就是設定的代理後的地址，即你的伺服器上後臺介面的url。
通過上面兩個配置就能實現在伺服器上所有的請求
只要是通過
http://10.229.36.158/70/dev-api/
傳送過來的請求全部會被代理到
下。這樣就能實現前後端專案的請求代理。
完整conf程式碼
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 70; server_name 10.229.36.158; #charset koi8-r; #access_log logs/host.access.log main; location / { root D:/www/kaoqin/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/; } # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} }
啟動Nginx
來到上面Nginx解壓之後的目錄下(伺服器上)即含有nginx.exe的目錄下，在此處開啟命令列
start nginx.exe
啟動nginx
如果對nginx的配置檔案進行修改的話
nginx -s reload
如果沒配置環境變數或者提示不行的話前面使用nginx.exe的全路徑。
正常停止或關閉Nginx：
nginx -s quit
啟動Nginx成功後開啟瀏覽器驗證，輸入
如果能出現頁面，即對應的前端靜態資源的index.html的頁面，並且能顯示驗證碼，驗證碼是通過代理後的
後臺介面獲取。那麼就是代理成功，記住不要關閉此nginx的命令列。
如果訪問伺服器上的地址不成功後檢查70埠是否開放
控制面板-防火牆-高階設定
入站規則-新建規則-埠，新增70
點選下一步
選擇允許連線
配置連線域點選下一步
設定名稱點選儲存。