iT邦幫忙

0

NGINX搭配WEBPACK DEV SERVER開發模式

  • 分享至 

  • xImage

其實最近開始要跟處理一些前端的工作。所以就開始架個開發環境。
由於我的開發區是一台LINUX主機。採用NGINX的WEB SERVER來處理。

先說明我碰到的問題。因該有用VUE的大多會碰到吧。
就是當我的vue路由設定為 "history" 會碰到404的錯誤問題。

其實在發布站也就是正式站。
我是可以用如下的nginx設定方式來解決的

location / {
           index  index.html index.htm;
           try_files $uri $uri/ @router;            
        }
        
        location @router {
            rewrite ^.*$ /index.html last;
        }        

可是,這不能用在開發生產環境下。
開發生產環境只能用如下的方式來處理

server_name  tadmin.test.net;
  	location  / {
    		proxy_pass http://127.0.0.1:8080/;
    		proxy_http_version 1.1;    		
  	}
    #給sockjs回應用
    location /sockjs-node {  		
    		proxy_pass http://127.0.0.1:8080;
    		proxy_http_version 1.1;
    		proxy_set_header Upgrade $http_upgrade;
    		proxy_set_header Connection "upgrade";    		
  	}  	

可惜的是,只要有用到路由。就一定會發生「Cannot GET /xxxx」的錯誤
我試著用很多設定的方式。都對應不了。目前只剩下如下的方式可以處理

server_name  tadmin.test.net;
  	location  / {
    		proxy_pass http://127.0.0.1:8080/;
    		proxy_http_version 1.1;    		
  	}
    #給sockjs回應用
    location /sockjs-node {  		
    		proxy_pass http://127.0.0.1:8080;
    		proxy_http_version 1.1;
    		proxy_set_header Upgrade $http_upgrade;
    		proxy_set_header Connection "upgrade";    		
  	}  	
    ## 對應路由建立 ##
    location  /login {
    		proxy_pass http://127.0.0.1:8080/;
    		proxy_http_version 1.1;    		
  	}
    location  /round1 {
    		proxy_pass http://127.0.0.1:8080/;
    		proxy_http_version 1.1;    		
  	}
    location  /user/get {
    		proxy_pass http://127.0.0.1:8080/;
    		proxy_http_version 1.1;    		
  	}
    location  /user/put {
    		proxy_pass http://127.0.0.1:8080/;
    		proxy_http_version 1.1;    		
  	}

也就是每一個對應路由我只能在nginx建立好對應。才會正常。
想問看看。是否有能用的設定方式,如

location ~ /.* {
    		proxy_pass http://127.0.0.1:8080/;
    		proxy_http_version 1.1;    		
  	}

以上是已經試過,也是不行的。

另外附帶一提我的開發環境。雖然上面用的proxy_pass指向是127.0.0.1
不過其實我的開發環境並不是直接再我本機上。而是我內網中的一個開發機器。
其test.net對應的是 192.168.0.100 這台機器。

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
froce
iT邦大師 1 級 ‧ 2020-07-06 20:25:08
server_name  tadmin.test.net;
  	location  / {
    		proxy_pass http://127.0.0.1:8080/;
    		proxy_http_version 1.1;    		
  	}
    #給sockjs回應用
    location /sockjs-node {  		
    		proxy_pass http://127.0.0.1:8080;
    		proxy_http_version 1.1;
    		proxy_set_header Upgrade $http_upgrade;
    		proxy_set_header Connection "upgrade";    		
  	}

這個我測試是正常的啊?
location /
應該就連後面的網址都match到了。
但是api的部份可能你得特別寫連結到api server。

去確認看看404是vue router吐出來的還是nginx吐的吧。

反而

~ /.*

不好,這樣範圍太大。


倒是這樣被我偷學到一招了,呵呵
我本來都是直接用hash mode來debug。

正常我也認為是如此。
因為 我也沒其它條件。
location /
因該就可以符合

可是,只要重新整理就是會給我報 Cannot GET /xxxx 錯誤。
這因該是 vue router 報錯的。

我推測它可能並沒 proxy_pass 代理指向過去。跑在我原本的位置上發生的。

非得要加上
location /xxxx

才可以正常。

讓我搞不清楚問題出在哪。
幸好這只在開發環境下才會這樣。

正式環境打包後倒還正常。

忘了說,是要重新整理才會報錯。如果是根目錄下的域名使用是沒問題的。有正確跑在vue router

我要發表回答

立即登入回答