nginx代理實現靜態資源存取的範例程式碼

2022-06-29 18:04:31

一. 目標:

為了通過nginx請求靜態資源（css、圖片等），通過nginx代理進行頁面預覽。

二. 實現效果:

通過瀏覽器輸入nginx代理地址以開啟頁面方式存取本地html檔案,也可以通過存取代理路由存取介面實現頁面預覽功能.
注:我演示的是在本地windows開發環境下的設定

三. 具體設定

1. nginx設定本地靜態工程代理

找到nginx組態檔nginx.conf,設定nginx代理

server{
listen       80;

#前端門戶工程
location / {
    alias   D:/workspace/sc-multipl-static-web-project/;
    index  index.html;
}

說明:
D:/workspace/sc-multipl-static-web-project/ 是你的前端工程檔案路徑

儲存組態檔並重啟nginx,瀏覽器輸入 localhost:80 驗證

2. win10設定本地域名實現域名存取

域名存取實際上是通過對應ip地址,再通過ip存取服務的,如果我們沒有開通網際網路域名,可以通過設定本地域名對映模擬域名存取的(只在本機有效)
開啟C:WindowsSystem32driversetc,找到hosts檔案,如果沒有則自己新增一個,以管理員身份開啟編輯,輸入

127.0.0.1 www.chen123.com

再開啟nginx組態檔

server{
    listen       80;
    server_name  www.chen123.com;
    ssi on;
    ssi_silent_errors on;
    #前端門戶工程
    location / {
        alias   D:/workspace/sc-multipl-static-web-project/;
        index  index.html;
    }
    
   }

儲存組態檔並重啟nginx,瀏覽器輸入 localhost:chen123 驗證

3.nginx設定頁面預覽路由

首先,你要先實現一個頁面預覽介面,返回格式為String型別,內容其實就是html的文字內容
再開啟nginx組態檔

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    #cms頁面預覽路由
    upstream cms_server_pool {
        server 127.0.0.1:31001 weight=10;
    }

    server{
    listen       80;
    server_name  www.xuecheng.com;
    ssi on;
    ssi_silent_errors on;
    #前端門戶工程
    location / {
        alias   D:/workspace/sc-multipl-static-web-project/;
        index  index.html;
    }
    #頁面預覽
    location /cms/preview/ {
        proxy_pass http://cms_server_pool/cms/preview/;
    }
    
   }
}

http://cms_server_pool/cms/preview/ 就是你要實現的頁面預覽介面,通過設定路由實現跳轉到真實地址,

    upstream cms_server_pool {
        server 127.0.0.1:31001 weight=10;
        #如果有多個伺服器,可以寫在下面,例如
        #server 127.0.0.1:31002 weight=10;
    }

儲存組態檔並重啟nginx,瀏覽器輸入 http://cms_server_pool/cms/preview 驗證

我原生的nginx設定如下

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    #gzip  on;
    #cms頁面預覽路由
    upstream cms_server_pool {
        server 127.0.0.1:31001 weight=10;
    }

    server{
    listen       80;
    server_name  www.xuecheng.com;
    ssi on;
    ssi_silent_errors on;
    #前端門戶工程
    location / {
        alias   D:/workspace/sc-multipl-static-web-project/;
        index  index.html;
    }
    #頁面預覽
    location /cms/preview/ {
        proxy_pass http://cms_server_pool/cms/preview/;
    }
   }
}

到此這篇關於nginx代理實現靜態資源存取的範例程式碼的文章就介紹到這了,更多相關nginx 靜態資源存取內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！