寫給前端的nginx配置指南基于docker所有配置秒級運行(最新講解)

更新時間：2022年06月07日 10:35:24 作者：程序員山月

這篇文章主要介紹了寫給前端的nginx配置指南基于docker所有配置秒級運行,通過?docker?高效學習?nginx?配置，本文給大家介紹的非常詳細，需要的朋友可以參考下

通過 docker 高效學習 nginx 配置

推薦一種高效學習 nginx 的方法: 在本地使用 nginx 鏡像并掛載 nginx 配置啟動容器。

通過以下 docker-compose 可秒級驗證 nginx 配置，無疑是學習 nginx 的絕佳利器。

我將所有關(guān)于 nginx 的配置放置在 simple-deploy，并且每一份配置對應 docker compose 中的一個 service，如以下 nginx、location、order1 就是 service。

version: "3"
services:
  # 關(guān)于 nginx 最常見配置的學習
  nginx:
    image: nginx:alpine
    ports:
      - 8080:80
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
      - .:/usr/share/nginx/html
  # 關(guān)于 location 的學習
  location: ...
  # 關(guān)于 location 匹配順序的學習
  order1: ...

每次修改配置時，需要重啟容器，可根據(jù)服務名學習指定內(nèi)容。

$ docker-compose up <service>
# 學習 nginx 最基礎(chǔ)的配置
$ docker-compose up nginx
# 學習關(guān)于 location 的配置
$ docker-compose up location

本篇文章所有的 nginx 配置均可以通過 docker 來進行學習，并附全部代碼及配置。

root 與 index

root: 靜態(tài)資源的根路徑。見文檔 nginx.org/en/docs/htt…
index: 當請求路徑以 / 結(jié)尾時，則自動尋找該路徑下的 index 文件。見文檔 nginx.org/en/docs/htt…

root 與 index 為前端部署的基礎(chǔ)，在默認情況下 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，我會在以下示例中添加一個自定義響應頭 X-Config，可通過瀏覽器控制臺網(wǎng)絡(luò)面板驗證其響應頭。

add_header X-Config B;

注意，我所有配置文件中的鏈接可直接點擊，避免了在 compose 配置文件中尋找映射端口號的不方便。

location 修飾符驗證

對于此四種修飾符可以在我的 nginx 下進行驗證。

由于此處使用了 proxy_pass，因此需要 location2，api 兩個服務一起啟動，在 location2 服務中，可直接通過 service 名稱作為 hostname 即 http://api:3000 訪問 api 服務。

而 api 服務，為我自己寫的一個 whoami 服務，用以打印出請求路徑等信息，詳見 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 {
        # 可通過查看響應頭來判斷是否成功返回
        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 {
        # 可通過查看響應頭來判斷是否成功返回
        add_header X-Config E;
        proxy_pass http://api:3000;
    }
}

location 優(yōu)先級驗證

在我配置文件中，以 order 打頭來命名所有優(yōu)先級驗證的 nginx 配置，此處僅僅以 order1 為例進行驗證。

配置如下:

# 以下配置，訪問以下鏈接，其 X-Config 為多少
#
# http://localhost:8210/shanyue，為 B，若都是前綴匹配，則找到最長匹配的 location
server {
    root   /usr/share/nginx/html;
    # 主要是為了 shanyue 該路徑，因為沒有后綴名，無法確認其 content-type，會自動下載
    # 因此這里采用 text/plain，則不會自動下載
    default_type text/plain;
    location ^~ /shan {
        add_header X-Config A;
    }
    location ^~ /shanyue {
        add_header X-Config B;
    }
}

啟動服務:

$ docker-compose up order1

curl 驗證:

當然也可以通過瀏覽器控制臺網(wǎng)絡(luò)面板驗證，由于此處只需要驗證響應頭，則我們通過 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)容，這也是常用的解決跨域的問題。

當使用 proxy_pass 代理路徑時，有兩種情況

代理服務器地址不含 URI，則此時客戶端請求路徑與代理服務器路徑相同。強烈建議這種方式
代理服務器地址含 URI，則此時客戶端請求路徑匹配 location，并將其 location 后的路徑附在代理服務器地址后。

# 不含 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)境有多個示例，使用以下代碼啟動可反復測試:

$ docker-compose up proxy api

由于 proxy_pass 所代理的服務為 whoami，可打印出真實請求路徑，可根據(jù)此進行測試

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 {
        # 可通過查看響應頭來判斷是否成功返回
        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

控制響應頭。

由于很多特性都是通過響應頭控制，因此基于此指令可做很多事情，比如:

Cache
CORS
HSTS
CSP
...

Cache

location /static {
    add_header Cache-Control max-age=31536000;
}

CORS

location /api {
    add_header Access-Control-Allow-Origin *;
}
復制代碼

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 學習 nginx 配置，并可配置 index.html 強緩存 60s 時間
高階: 基于 docker 學習 nginx 配置，并可配置 gzip/brotli
面試: brotli/gzip 有何區(qū)別

到此這篇關(guān)于寫給前端的nginx配置指南基于docker所有配置秒級運行的文章就介紹到這了,更多相關(guān)docker nginx 配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具