基本設定

ビルド後のファイルをNginxのhtmlフォルダに配置し、nginx.confを設定することで、Vue Routerのヒストリーモードを簡単に実装できます。

location / {
    # rootディレクティブでパスを指定可能
    # root /var/www/dist;
    try_files $uri $uri/ /index.html;
}

設定の原理

try_filesディレクティブ

try_filesはNginxのhttp_coreモジュールに含まれるディレクティブです。2つの形式があります：

try_files ファイル ... URI;
try_files ファイル ... =コード;

このディレクティブの動作：

1. 指定された順序でファイルをチェックし、最初に見つかったファイルをレスポンスとして返します
2. チェックされるパスはrootまたはaliasで設定されたパスに基づきます
3. 末尾の/でディレクトリ内のファイルをマッチングできます
4. ファイルが見つからない場合、最後のパラメータで指定されたURIにリダイレクトされます

location /images/ {
    try_files $uri /images/default.gif;
}

location = /images/default.gif {
    expires 30s;
}

2番目の形式では、最後のパラメータが=404のような形式の場合、指定されたファイルがすべて見つからない時に指定されたHTTPステータスコードを返します。

$uri変数

http {
    include       mime.types;
    default_type  application/octet-stream;
    
    # ログフォーマット設定
    log_format  main  '$uri --- $request_uri -- $remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;

異なるパスに3回アクセスした場合のログ例：

1. http://127.0.0.1:8023/index
2. http://127.0.0.1:8023/img/sample.jpg
3. http://127.0.0.1:8023/mobile
4. http://127.0.0.1:8023/test

ログ出力：

/index.html --- /index -- 127.0.0.1 - - [07/Jul/2021:23:00:06 +0800] "GET /index HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64" "-"
/img/sample.jpg --- /img/sample.jpg -- 127.0.0.1 - - [07/Jul/2021:23:02:25 +0800] "GET /img/sample.jpg HTTP/1.1" 200 32273 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64" "-"
/index.html --- /mobile -- 127.0.0.1 - - [07/Jul/2021:23:03:03 +0800] "GET /mobile HTTP/1.1" 200 1232 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64" "-"
/test --- /test -- 127.0.0.1 - - [07/Jul/2021:23:08:34 +0800] "GET /test HTTP/1.1" 301 169 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64" "-"
/test/index.html --- /test/ -- 127.0.0.1 - - [07/Jul/2021:23:08:34 +0800] "GET /test/ HTTP/1.1" 200 9 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64" "-"

$uriはアクセスしようとしているファイル名を表し、具体的なファイルが指定されていない場合はindex.htmlが使用されます。

以下のような設定の場合：

location /images/ {
    root /var/www/dist;
    try_files $uri   $uri/  /public/sample.jpg;
}

http://127.0.0.1:8023/unknown.jpgにリクエストがあった場合（unknown.jpgは存在せず、/public/sample.jpgは存在する）、次の順序でチェックされます：

1. /var/www/dist/unknown.jpg - 存在しない
2. /var/www/dist/unknown.jpg/index.html - 存在しない
3. /var/www/dist/public/sample.jpg - 存在する

最終的にsample.jpg画像が表示されます。

Nginx基本コマンド

1. 起動：
   Nginxディレクトリでstart nginxコマンドを実行、またはプログラムをダブルクリック
2. 停止：
   Nginxディレクトリでnginx.exe -s stopで即時停止、nginx.exe -s quitで正常終了
3. 再起動：
   Nginxディレクトリでnginx.exe -s reloadで設定を再読み込み