快捷導(dǎo)航

若依部署Nginx和Tomcat全過(guò)程

更新時(shí)間：2024年12月28日 16:17:10 作者：狂暴的小祥

文章總結(jié)了兩種部署方法：Nginx部署和Tomcat部署,Nginx部署包括打包、將dist文件拉到指定目錄、配置nginx.conf等步驟,Tomcat部署包括前端打包、將文件拉到webapps目錄、訪問(wèn)測(cè)試等步驟,文章還解決了前后端無(wú)法通信和404問(wèn)題

Nginx部署

第一步：打包

# 構(gòu)建測(cè)試環(huán)境
npm run build:stage
 
# 構(gòu)建生產(chǎn)環(huán)境
npm run build:prod

第二步：將生成的dist文件中的

拉到

第三步：配置nginx.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;
 
    sendfile        on;
 
    keepalive_timeout  65;
 
    server {
        listen       80;
        server_name  localhost;
 
        location / {
            index  index.html;
            # 這里的配置 是防止 刷新后 找不到路徑
            try_files $uri $uri/ @router;
        }
        # 這里的配置 是防止 刷新后 找不到路徑
        location @router {
            rewrite ^.*$ /index.html last;
        }
        # 只寫了 生產(chǎn) 環(huán)境
        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;
        }
    }
 
}

后端部署

可以直接打成jar包，雙擊或者命令運(yùn)行

Tomcat部署

第一步：前端打包

# 構(gòu)建測(cè)試環(huán)境
npm run build:stage
 
# 構(gòu)建生產(chǎn)環(huán)境
npm run build:prod

第二步：拉到webapps

第三步：訪問(wèn)測(cè)試

訪問(wèn)：http://localhost:8080/dist/

可以看到已經(jīng) 可以訪問(wèn) 若依的頁(yè)面了

問(wèn)題：一直等待

解決方法

將靜態(tài)文件拉到webapps下面

效果

第四步：后端打包war

maven打包

或者去Maven本地倉(cāng)庫(kù)

第五步：放在webapps下面

第六步：?jiǎn)?dòng)tomcat看效果訪問(wèn)：http://localhost:8080/ruoyi-admin/

訪問(wèn)：http://localhost:8080/dist 前后端無(wú)法通信

可以清楚看到驗(yàn)證碼獲取不到，說(shuō)明前后端無(wú)法通信

解決方法將原本的war包名字修改掉

以為前端訪問(wèn)的是prod-api這個(gè)請(qǐng)求路徑

或者在打包前修改

測(cè)試環(huán)境：

或者

后端：

第七步：重啟tomcat

可以正常訪問(wèn)了

出現(xiàn)問(wèn)題：點(diǎn)擊刷新404

問(wèn)題出現(xiàn)在，若依采用的vue中的單頁(yè)面，頁(yè)面的變換是根據(jù)路由（routes）來(lái)變換的，在點(diǎn)擊刷新時(shí)走的tomcat的目錄路徑，所以404

解決方案

第一步：前端打包時(shí)設(shè)置路由

export default new Router({
  mode: 'history', // 去掉url中的#
  base: '/apps/', // -----------設(shè)置這里 和 前端 打包后的包名一直，不一致 等打包成功修改包名
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

第二步：添加文件

在項(xiàng)目中添加WEB-INF文件夾，并在WEB-INF文件下創(chuàng)建web.xml

添加如下配置

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0"
         metadata-complete="true">
 
    <display-name>webapp</display-name>
    <description>
        webapp
    </description>
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

重啟后即可