nginx配置后訪問出現(xiàn)白屏的問題解決
問題
服務器上有兩個web服務ab分別指向3000、3001兩個端口，使用nginx進行反向代理，配置文件如下：
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文件，但是沒有找到。這是因為我的web應用在/a路徑下尋找靜態(tài)文件，但是Nginx在默認的靜態(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應用能正常訪問了。
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)鍵，通過仔細分析里面的錯誤提示信息，不難找到解決的辦法。
到此這篇關(guān)于nginx配置后訪問出現(xiàn)白屏的問題解決的文章就介紹到這了,更多相關(guān)nginx配置訪問白屏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
nginx 配置靜態(tài)緩存及靜態(tài)緩存文件沒有生成的問題及解決方案
這篇文章主要介紹了nginx 配置靜態(tài)緩存及靜態(tài)緩存文件沒有生成的問題及解決方案,本文分步驟結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-11-11
雖然nginx的源碼非常精致，但是不得不說開發(fā)nginx很有挑戰(zhàn)性，越想更大程度上定制自己的模塊，越需要對nginx的每個細節(jié)了解頗深。2015-08-08
這篇文章主要給大家介紹了Nginx 502 Bad Gateway 錯誤的原因及解決方法,在php服務當中,有兩個參數(shù)非常的重要：max_requestst和max_children,具體的原因必須要查看日志才可以弄明白,接下就和小編一起來看看具體原因及解決方法吧2023-08-08
這篇文章主要介紹了為Nginx啟用Brotli壓縮算法的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了CentOS7安裝Nginx并配置自動啟動的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了nginx日志導入elasticsearch的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了Nginx處理跨域問題小結(jié),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
本文介紹下，重啟nginx服務后丟失nginx.pid文件的解決方法，有需要的朋友，可以作個參考2014-01-01
nginx作為一款高性能的服務器,用途很多,下面這篇文章主要給大家介紹了Nginx多種匹配方式的相關(guān)資料,文中通過圖文介紹的介紹的非常詳細,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了給小白的 Nginx 30分鐘入門指南(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02