nginx配置后訪問出現(xiàn)白屏的問題解決
問題
服務(wù)器上有兩個web服務(wù)ab分別指向3000、3001兩個端口，使用nginx進(jìn)行反向代理，配置文件如下：
server {
listen 80;
server_name www.example.com;
location /a/ {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
server {
listen 80;
server_name www.example.com;
location /b/ {
proxy_pass http://localhost:3001;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
配置好后，重載：sudo systemctl reload nginx用瀏覽器訪問：www.example.com/a/，瀏覽器是白屏，沒有顯示任何內(nèi)容。
解決的思路：
1、查看日志：
`tail -n 10 /var/log/nginx/error.log`
顯示內(nèi)容如下：
[error] 1104804#1104804: *10 open()
“/usr/share/nginx/html/static/css/main.54631fc9.css” failed (2: No
such file or directory), client: 18.81.26.177, server:
www.example.com, request: “GET /static/css/main.54631fc9.css
HTTP/1.1”, host: “www.example.com”, referrer:
“http://www.example.com/a/”
2、分析
根據(jù)錯誤日志，Nginx正在嘗試在/usr/share/nginx/html/static/css/目錄下查找main.54631fc9.css文件，但是沒有找到。這是因?yàn)槲业膚eb應(yīng)用在/a路徑下尋找靜態(tài)文件，但是Nginx在默認(rèn)的靜態(tài)文件目錄下查找。
3、查找
find / -name main.54631fc9.css
結(jié)果什么都沒有找到
4、采用二級域名
配置文件調(diào)整如下：
server {
listen 80;
server_name a.example.com;
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
server {
listen 80;
server_name b.example.com;
location / {
proxy_pass http://localhost:3001;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
重載Nginx
在瀏覽器上b.example.com訪問正常，但a.example.com顯示Nginx的歡迎頁面，并未訪問到正確的web頁面。
5、再查日志
`tail -n 10 /var/log/nginx/error.log`
顯示內(nèi)容如下：
[error] 1106994#1106994: *780 open()
“/usr/share/nginx/html/favicon.ico” failed (2: No such file or
directory), client: 18.81.26.177, server: example.com, request: “GET
/favicon.ico HTTP/1.1”, host: “a.example.com”, referrer:
“http://a.example.com/”
6、再分析
根據(jù)錯誤日志中的提示信息，可以看到請求的是/favicon.ico文件，但是在/usr/share/nginx/html/目錄下找不到該文件。因此，與該錯誤相關(guān)的語句是代理到a.example.com的location塊中的proxy_pass語句。這條語句將請求代理到localhost:3000，而不是/usr/share/nginx/html/目錄下的文件。
7、再查找
find / -name favicon.ico
找到/favicon.ico文件在以下目錄：
/usr/local/src/a/web/berry/public/favicon.ico /usr/local/src/a/web/default/public/favicon.ico
8、添加多一個location
location = /favicon.ico {
alias /usr/local/src/a/web/berry/public/favicon.ico;
}
a應(yīng)用能正常訪問了。
9、完整的配置文件
server {
listen 80;
server_name a.example.com;
location = /favicon.ico {
alias /usr/local/src/a/web/berry/public/favicon.ico;
}
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
server {
listen 80;
server_name b.example.com;
location / {
proxy_pass http://localhost:3001;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
10、小結(jié)
nginx配置后遇到問題，查error.log是解決問題的關(guān)鍵，通過仔細(xì)分析里面的錯誤提示信息，不難找到解決的辦法。
到此這篇關(guān)于nginx配置后訪問出現(xiàn)白屏的問題解決的文章就介紹到這了,更多相關(guān)nginx配置訪問白屏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Nginx日志輪轉(zhuǎn)與定時啟動腳本的實(shí)現(xiàn)
本文主要介紹了Nginx日志輪轉(zhuǎn)與定時啟動腳本的實(shí)現(xiàn),通過批處理腳本rotate-logs.bat實(shí)現(xiàn)日志輪轉(zhuǎn),使用start-nginx.bat啟動和重啟Nginx服務(wù),借助Windows任務(wù)計(jì)劃程序每日凌晨自動執(zhí)行日志輪轉(zhuǎn),確保Nginx服務(wù)正常啟動,感興趣的可以了解一下2026-04-04
本篇文章主要介紹了Nginx 啟用 OCSP Stapling的配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
本文主要介紹了Nginx之https證書配置的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-12-12
Nginx安裝除了編譯以外,我們還可以直接用操作系統(tǒng)上自帶的工具比如說yum、apt-get直接安裝,這篇文章主要介紹了Nginx手動編譯、安裝超超詳解,需要的朋友可以參考下2023-09-09
Rewrite主要實(shí)現(xiàn)url地址重寫,以及url地址跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Nginx中rewrite(地址重定向)的深入剖析,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
國內(nèi)用Nginx的比較多,下面這篇文章主要給大家介紹了關(guān)于Nginx監(jiān)控模塊(vts模塊)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Nginx?Socket代理的實(shí)現(xiàn)方法
Nginx的socket代理通常指的是Nginx通過stream模塊來處理非HTTP的?TCP?流量,本文就來介紹一下Nginx?Socket代理的實(shí)現(xiàn)方法,具有一定的參考價值,感興趣的可以了解一下2024-04-04
這篇文章主要介紹了Nginx服務(wù)狀態(tài)監(jiān)控的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
nginx實(shí)現(xiàn)反向代理出現(xiàn)502的問題解決
本文主要介紹了nginx實(shí)現(xiàn)反向代理出現(xiàn)502的問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
Nginx+cpolar實(shí)現(xiàn)內(nèi)網(wǎng)穿透多個Windows Web站點(diǎn)端口的步驟詳解
這篇文章主要給大家介紹了Nginx+cpolar實(shí)現(xiàn)內(nèi)網(wǎng)穿透多個Windows Web站點(diǎn)端口的詳細(xì)步驟,文章通過圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-10-10