安裝

安裝 Brew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安裝 Nginx

brew install nginx

nginx -v
# nginx version: nginx/1.21.6

啟動 Nginx

nginx

重啟

nginx -s reload

配置

默認靜態(tài)頁面

cd /usr/local/var/www

默認配置

cat /usr/local/etc/nginx/nginx.conf

默認日志目錄

cd /usr/local/var/log/nginx

新增的配置目錄

cd /usr/local/etc/nginx/servers/

新增一個靜態(tài)頁面服務(wù)

touch static.conf

vim static.conf

server {
    listen 8607;
    root /Users/mazey/Web/ProjectXYZ;
    index index.html;
}

配置了 History 路由模式的 SPA 頁面。

server {
    listen 8621;

    location / {
        root /Users/mazey/Web/ProjectXYZ;
        index index.html;
        try_files $uri /index.html;
    }
}

解釋 try_files

語法：

try_files file... uri

try_files 后面定義多個文件路徑進行依次嘗試，響應(yīng)存在的第一個文件，若文件都不存在，則會響應(yīng)最后一個 uri 進行內(nèi)部重定向。

try_files $uri /index.html;

例如訪問 http://example.com/detail：

1. 判斷 / 目錄下是否存在 detail 文件。
2. 若 detail 文件不存在則返回 http://example.com/index.html。

附錄

安裝 Nginx 后的 Terminal 輸出。

==> Caveats
Docroot is: /usr/local/var/www

The default port has been set in /usr/local/etc/nginx/nginx.conf to 8080 so that
nginx can run without sudo.

nginx will load all files in /usr/local/etc/nginx/servers/.

To restart nginx after an upgrade:
  brew services restart nginx
Or, if you don't want/need a background service you can just run:
  /usr/local/opt/nginx/bin/nginx -g daemon off;
==> Summary
??  /usr/local/Cellar/nginx/1.21.6_1: 26 files, 2.2MB
==> Running `brew cleanup nginx`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).
==> Caveats
==> nginx
Docroot is: /usr/local/var/www

The default port has been set in /usr/local/etc/nginx/nginx.conf to 8080 so that
nginx can run without sudo.

nginx will load all files in /usr/local/etc/nginx/servers/.

To restart nginx after an upgrade:
  brew services restart nginx
Or, if you don't want/need a background service you can just run:
  /usr/local/opt/nginx/bin/nginx -g daemon off;

參考

1. Module ngx_http_core_module - try_files
2. react/vue-router在history mode下，nginx所需配置 & try_files & root 、alias詳解
3. 【nginx】History模式的配置細節(jié)

版權(quán)聲明

本博客所有的原創(chuàng)文章，作者皆保留版權(quán)。轉(zhuǎn)載必須包含本聲明，保持本文完整，并以超鏈接形式注明作者后除和本文原始地址：https://blog.mazey.net/2851.html

（完）