nginx代理實現靜態資源訪問的示例代碼

 更新時間:2022年06月29日 11:53:43   作者:chenhaotao  
本文主要介紹了nginx代理實現靜態資源訪問的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

一. 目標:

為了通過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:\Windows\System32\drivers\etc,找到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 靜態資源訪問內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • Nginx四層負載均衡的配置指南

    Nginx四層負載均衡的配置指南

    當一臺服務器的單位時間內的訪問量越大時,服務器壓力就越大,大到超過自身承受能力時,服務器就會崩潰.為了避免服務器崩潰,讓用戶有更好的體驗,我們通過負載均衡的方式來分擔服務器壓力,這篇文章主要給大家介紹了關于Nginx四層負載均衡配置的相關資料,需要的朋友可以參考下
    2021-06-06
  • nginx參數的詳細介紹

    nginx參數的詳細介紹

    這篇文章主要介紹了nginx參數的詳細介紹的相關資料,需要的朋友可以參考下
    2017-06-06
  • nginx日志按天生成和定期刪除日志的方法

    nginx日志按天生成和定期刪除日志的方法

    日志文件大會影響訪問的速度和查找難度。本篇文章主要介紹了nginx日志按天生成和定期刪除日志的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-03-03
  • Nginx upstream的5種權重分配方式分享

    Nginx upstream的5種權重分配方式分享

    Nginx upstream的5種權重分配方式分享,需要的朋友可以參考下
    2012-09-09
  • nginx 504 Gateway Time-out錯誤解決方法

    nginx 504 Gateway Time-out錯誤解決方法

    我們經常會發現大量的nginx服務器訪問時會提示nginx 504 Gateway Time-out錯誤了,下面我來總結了一些解決辦法,有需要了解的同學可進入參考
    2014-11-11
  • Nginx開啟Brotli壓縮算法實現過程詳解

    Nginx開啟Brotli壓縮算法實現過程詳解

    這篇文章主要介紹了Nginx開啟Brotli壓縮算法實現過程詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-11-11
  • 為高負載網絡優化Nginx和Node.js的方法

    為高負載網絡優化Nginx和Node.js的方法

    如果不先對Nginx和Node.js的底層傳輸機制有所了解,并進行針對性優化,可能對兩者再細致的調優也會徒勞無功。一般情況下,Nginx通過TCP socket來連接客戶端與上游應用
    2013-02-02
  • Python的Bottle框架基本知識總結

    Python的Bottle框架基本知識總結

    這篇文章主要介紹了Python的Bottle框架基本知識總結,本文翻譯自Bottle官方開發文檔,需要的朋友可以參考下
    2015-05-05
  • nginx 代理服務器配置雙向證書驗證的方法

    nginx 代理服務器配置雙向證書驗證的方法

    這篇文章主要介紹了nginx 代理服務器配置雙向證書驗證的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • Nginx中配置開啟Nginx Status來查看服務器運行狀態

    Nginx中配置開啟Nginx Status來查看服務器運行狀態

    這篇文章主要介紹了Nginx中配置開啟Nginx Status來查看服務器運行狀態的方法,Nginx Status為Nginx服務器內置的狀態頁,需要的朋友可以參考下
    2016-01-01

最新評論

美丽人妻被按摩中出中文字幕