寫給前端的nginx配置指南基于docker所有配置秒級運行(最新講解)
三年經(jīng)驗的前端或多或少與 nginx 配置打過交道。
nginx 的重要性不言而喻。
本篇文章以前端的視角，介紹下 nginx 的常見配置。
通過 docker 高效學(xué)習(xí) nginx 配置
推薦一種高效學(xué)習(xí) nginx 的方法: 在本地使用 nginx 鏡像并掛載 nginx 配置啟動容器。
通過以下 docker-compose 可秒級驗證 nginx 配置，無疑是學(xué)習(xí) nginx 的絕佳利器。
我將所有關(guān)于 nginx 的配置放置在 simple-deploy，并且每一份配置對應(yīng) docker compose 中的一個 service，如以下 nginx、location、order1 就是 service。
version: "3"
services:
# 關(guān)于 nginx 最常見配置的學(xué)習(xí)
nginx:
image: nginx:alpine
ports:
- 8080:80
volumes:
- ./nginx.conf:/etc/nginx/conf.d/default.conf
- .:/usr/share/nginx/html
# 關(guān)于 location 的學(xué)習(xí)
location: ...
# 關(guān)于 location 匹配順序的學(xué)習(xí)
order1: ...每次修改配置時，需要重啟容器，可根據(jù)服務(wù)名學(xué)習(xí)指定內(nèi)容。
$ docker-compose up <service> # 學(xué)習(xí) nginx 最基礎(chǔ)的配置 $ docker-compose up nginx # 學(xué)習(xí)關(guān)于 location 的配置 $ docker-compose up location
本篇文章所有的 nginx 配置均可以通過 docker 來進(jìn)行學(xué)習(xí)，并附全部代碼及配置。
root 與 index
root: 靜態(tài)資源的根路徑。見文檔 nginx.org/en/docs/htt…index: 當(dāng)請求路徑以/結(jié)尾時，則自動尋找該路徑下的 index 文件。見文檔 nginx.org/en/docs/htt…
root 與 index 為前端部署的基礎(chǔ)，在默認(rèn)情況下 root 為 /usr/share/nginx/html，因此我們部署前端時，往往將構(gòu)建后的靜態(tài)資源目錄掛載到該地址。
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html index.htm;
}location
location 用以匹配路由，配置語法如下。
location [ = | ~ | ~* | ^~ ] uri { ... }其中 uri 前可提供以下修飾符
=精確匹配。優(yōu)先級最高^~前綴匹配，優(yōu)先級其次~正則匹配，優(yōu)先級再次 (~* 只是不區(qū)分大小寫，不單列)/通用匹配，優(yōu)先級再次
為了驗證所匹配的 location，我會在以下示例中添加一個自定義響應(yīng)頭 X-Config，可通過瀏覽器控制臺網(wǎng)絡(luò)面板驗證其響應(yīng)頭。
add_header X-Config B;
注意，我所有配置文件中的鏈接可直接點擊，避免了在 compose 配置文件中尋找映射端口號的不方便。
location 修飾符驗證
對于此四種修飾符可以在我的 nginx 下進(jìn)行驗證。
由于此處使用了 proxy_pass，因此需要 location2，api 兩個服務(wù)一起啟動，在 location2 服務(wù)中，可直接通過 service 名稱作為 hostname 即 http://api:3000 訪問 api 服務(wù)。
而 api 服務(wù)，為我自己寫的一個 whoami 服務(wù)，用以打印出請求路徑等信息，詳見 shfshanyue/whoami。
$ docker-compose up location2 api
以下是關(guān)于驗證 location 的配置文件，詳見 shfshanyue/simple-daploy:learn-nginxs
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html index.htm;
# 通用匹配，所有 /xxx 任意路徑都會匹配其中的規(guī)則
location / {
add_header X-Config A;
try_files $uri $uri.html $uri/index.html /index.html;
}
# http://localhost:8120/test1 ok
# http://localhost:8120/test1/ ok
# http://localhost:8120/test18 ok
# http://localhost:8120/test28 not ok
location /test1 {
# 可通過查看響應(yīng)頭來判斷是否成功返回
add_header X-Config B;
proxy_pass http://api:3000;
}
# http://localhost:8120/test2 ok
# http://localhost:8120/test2/ not ok
# http://localhost:8120/test28 not ok
location = /test2 {
add_header X-Config C;
proxy_pass http://api:3000;
}
# http://localhost:8120/test3 ok
# http://localhost:8120/test3/ ok
# http://localhost:8120/test38 ok
# http://localhost:8120/hellotest3 ok
location ~ .*test3.* {
add_header X-Config D;
proxy_pass http://api:3000;
}
# http://localhost:8120/test4 ok
# http://localhost:8120/test4/ ok
# http://localhost:8120/test48 ok
# http://localhost:8120/test28 not ok
location ^~ /test4 {
# 可通過查看響應(yīng)頭來判斷是否成功返回
add_header X-Config E;
proxy_pass http://api:3000;
}
}location 優(yōu)先級驗證
在我配置文件中，以 order 打頭來命名所有優(yōu)先級驗證的 nginx 配置，此處僅僅以 order1 為例進(jìn)行驗證。
配置如下:
# 以下配置，訪問以下鏈接，其 X-Config 為多少
#
# http://localhost:8210/shanyue，為 B，若都是前綴匹配，則找到最長匹配的 location
server {
root /usr/share/nginx/html;
# 主要是為了 shanyue 該路徑，因為沒有后綴名，無法確認(rèn)其 content-type，會自動下載
# 因此這里采用 text/plain，則不會自動下載
default_type text/plain;
location ^~ /shan {
add_header X-Config A;
}
location ^~ /shanyue {
add_header X-Config B;
}
}啟動服務(wù):
$ docker-compose up order1
curl 驗證:
當(dāng)然也可以通過瀏覽器控制臺網(wǎng)絡(luò)面板驗證，由于此處只需要驗證響應(yīng)頭，則我們通過 curl --head 只發(fā)送 head 請求即可。
# 查看其 X-Config 為 B $ curl --head http://localhost:8210/shanyue HTTP/1.1 200 OK Server: nginx/1.21.4 Date: Fri, 03 Jun 2022 10:15:11 GMT Content-Type: text/plain Content-Length: 15 Last-Modified: Thu, 02 Jun 2022 12:44:23 GMT Connection: keep-alive ETag: "6298b0a7-f" X-Config: B Accept-Ranges: bytes
proxy_pass
proxy_pass 反向代理，也是 nginx 最重要的內(nèi)容，這也是常用的解決跨域的問題。
當(dāng)使用 proxy_pass 代理路徑時，有兩種情況
- 代理服務(wù)器地址不含 URI，則此時客戶端請求路徑與代理服務(wù)器路徑相同。強(qiáng)烈建議這種方式
- 代理服務(wù)器地址含 URI，則此時客戶端請求路徑匹配 location，并將其 location 后的路徑附在代理服務(wù)器地址后。
# 不含 URI proxy_pass http://api:3000; # 含 URI proxy_pass http://api:3000/; proxy_pass http://api:3000/api; proxy_pass http://api:3000/api/;
再舉一個例子:
- 訪問 http://localhost:8300/api3/hello，與以下路徑匹配成功
proxy_pass附有 URI- 匹配路徑后多余的路徑為
/hello，將其附在proxy_pass之后，得 http://api:3000/hello/hello
location /api3 {
add_header X-Config C;
# http://localhost:8300/api3/hello -> proxy:3000/hello/hello
proxy_pass http://api:3000/hello;
}有點拗口，在我們試驗環(huán)境有多個示例，使用以下代碼啟動可反復(fù)測試:
$ docker-compose up proxy api
由于 proxy_pass 所代理的服務(wù)為 whoami，可打印出真實請求路徑，可根據(jù)此進(jìn)行測試
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html index.htm;
# 建議使用此種 proxy_pass 不加 URI 的寫法，原樣路徑即可
# http://localhost:8300/api1/hello -> proxy:3000/api1/hello
location /api1 {
# 可通過查看響應(yīng)頭來判斷是否成功返回
add_header X-Config A;
proxy_pass http://api:3000;
}
# http://localhost:8300/api2/hello -> proxy:3000/hello
location /api2/ {
add_header X-Config B;
proxy_pass http://api:3000/;
}
# http://localhost:8300/api3/hello -> proxy:3000/hello/hello
location /api3 {
add_header X-Config C;
proxy_pass http://api:3000/hello;
}
# http://localhost:8300/api4/hello -> proxy:3000//hello
location /api4 {
add_header X-Config D;
proxy_pass http://api:3000/;
}
}add_header
控制響應(yīng)頭。
由于很多特性都是通過響應(yīng)頭控制，因此基于此指令可做很多事情，比如:
- Cache
- CORS
- HSTS
- CSP
- ...
Cache
location /static {
add_header Cache-Control max-age=31536000;
}CORS
location /api {
add_header Access-Control-Allow-Origin *;
}
復(fù)制代碼HSTS
location / {
listen 443 ssl;
add_header Strict-Transport-Security max-age=7200;
}CSP
location / {
add_header Content-Security-Policy "default-src 'self';";
}作業(yè)
- 初階: 基于 docker 學(xué)習(xí) nginx 配置，并可配置 index.html 強(qiáng)緩存 60s 時間
- 高階: 基于 docker 學(xué)習(xí) nginx 配置，并可配置 gzip/brotli
- 面試: brotli/gzip 有何區(qū)別
到此這篇關(guān)于寫給前端的nginx配置指南基于docker所有配置秒級運行的文章就介紹到這了,更多相關(guān)docker nginx 配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Docker?Desktop?啟用?Kubernetes?失敗后處理方案
?在setting -> Kubernetes 中，選中 Enable Kubernetes 后，長時間顯示 Starting ...? ，在Images中顯示幾個自動下載的鏡像后，顯示 Start Kubernetes failed，這篇文章主要介紹了Docker?Desktop啟用Kubernetes失敗后處理方法,需要的朋友可以參考下2023-08-08
docker中nginx卸載、安裝、配置及掛載詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于docker中nginx卸載、安裝、配置及掛載的相關(guān)資料,文中通過實例代碼介紹是非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-09-09
docker-compose搭建etcd集群的實現(xiàn)(三節(jié)點）
本文主要介紹了docker-compose搭建etcd集群的實現(xiàn)(三節(jié)點),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
本文介紹了在Docker容器中配置用戶和權(quán)限的方法,包括在Dockerfile中設(shè)置用戶和權(quán)限,使用dockerrun命令設(shè)置用戶和權(quán)限,以及在DockerCompose文件中設(shè)置用戶和權(quán)限,通過這些方法,可以解決容器內(nèi)部權(quán)限不足的問題2024-11-11
在默認(rèn)情況下,Docker?需要?root?權(quán)限或?sudo?才能運行,這對于日常開發(fā)和?CI/CD?流水線可能不夠方便,那么,如何讓?非?root?用戶?也能構(gòu)建和運行?Docker?容器呢？本篇文章將介紹?三種方法?來實現(xiàn)這一目標(biāo),需要的朋友可以參考下2025-04-04
docker報錯x509:certificate has expired or
這篇文章主要介紹了docker報錯x509:certificate has expired or is not yet valid問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
docker安裝tomcat并部署Springboot項目war包的方法
這篇文章主要介紹了docker安裝tomcat并部署Springboot項目war包的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
Compose是一個定義和管理多容器的工具,使用Python語言編寫,下面這篇文章主要給大家介紹了關(guān)于如何使用Docker?Compose一鍵部署前后端分離項目的相關(guān)資料,需要的朋友可以參考下2023-01-01
在現(xiàn)代微服務(wù)與分布式架構(gòu)中,RabbitMQ?是一款成熟的開源消息隊列中間件,提供了可靠的消息投遞、豐富的路由策略和管理插件,本文將詳細(xì)介紹Docker?搭建?RabbitMQ的過程,感興趣的朋友一起看看吧2025-04-04
這篇文章主要介紹了使用Docker安裝Jenkins的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03