鍍金池/ 問答/Linux  HTML/ vue項目直接部署在tomcat的某一個項目下,如何配置nginx?

vue項目直接部署在tomcat的某一個項目下,如何配置nginx?

前端用vue寫的,用webpack打包后生成static文件夾和index.html,直接放在java項目的webapp目錄下,

|--webapp

|--static
|--index.html
|--WEB-INF

這是目錄結(jié)構(gòu),放在tomcat中,后端只寫提供接口,不負責頁面跳轉(zhuǎn),使用html5的history模式進行路由,但是nginx中不知道如何配置,以前java代碼控制跳轉(zhuǎn)配置如下:

server{ 
        listen 80;
        server_name www.xxx.com;
        access_log logs/app-vue.access.log combined;
        root /data/tomcat/webapps/app-vue;
        location /
        {  
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-Host $host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                #try_files $uri $uri/ /index.html; 
                proxy_pass http://127.0.0.1:8080/app-vue/;
        }
     }

這樣導致如果刷新連接就會訪問java后臺的controller,簡介導致404錯誤,看了官方文檔需要nginx配置文件中添加

try_files $uri $uri/ /index.html;

配置文件中注釋掉的那一部分,但是配置之后,就無法訪問了,nginx直接報500.

要如何配置才能達到效果?
先謝謝各位!

回答
編輯回答
我以為

你應該把Nginx的靜態(tài)根目錄配置成你這個webapp的目錄

2017年2月27日 15:40
編輯回答
怪痞

問題應該是出在proxy_pass上，是我沒有很好的理解proxy_pass,
我以前的配置：

location / {
 proxy_pass http://127.0.0.1/app-vue/;
}

當我在瀏覽器訪問www.xxx.com/api/1xx/2xx方法的時候，我猜想location的/并沒有替換app-vue，真正的訪問路徑是http://127.0.0.1/app-vue/1xx/...
然而我現(xiàn)在配置是：

location /api/ {
 proxy_pass http://127.0.0.1/app-vue/;
}

這樣子當我再訪問www.xxx.com/api/1xx/2xx方法的時候，由于代理給我替換了路徑，真正的路徑變成了http://127.0.0.1/api/1xx/2xx，然而再tomcat中的訪問應該是http://127.0.0.1/app-vue/api/...，我現(xiàn)在最終的解決方案是：

location /api/ {
 proxy_pass http://127.0.0.1/app-vue/api/;
}

這樣子就可以達到訪問的地址www.xxx.com/api/1xx/2xx的時候，匹配到location中的/api/的時候，他就替換成了正確的地址。
--------------網(wǎng)上的資料------------
第三種：
location /proxy/ {

proxy_pass http://127.0.0.1/aaa/;

}
代理到URL：http://127.0.0.1/aaa/test.html

2017年8月23日 08:59
編輯回答
亮瞎她
location / {
    root WEBAPPROOT;
}

可能存在權(quán)限問題顯示403,修改權(quán)限即可

2017年4月1日 13:25