Nginxのインストールとフロントエンドコードのデプロイメントについて説明します。特にWindows環境でページリフレッシュ時に発生する404エラーの解決方法も紹介します。

1. Nginxのインストール

1.1 Windows

• ダウンロードURL: Nginx公式サイト
• 安定版をダウンロードすることをお勧めします。
• ダウンロード後、ファイルを解凍します。

1.2 Linux

Nginxのソースからインストールする場合、以下の依存パッケージが必要です：

• GCCコンパイラ: yum install -y gcc
• PCREライブラリ: yum install -y pcre pcre-devel
• zlibライブラリ: yum install -y zlib zlib-devel
• OpenSSLライブラリ: yum install -y openssl openssl-devel

すべての依存パッケージを一度にインストールするには:

yum install -y gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel

Nginxのインストール:

wget https://nginx.org/download/nginx-1.16.1.tar.gz
tar -zxvf nginx-1.16.1.tar.gz
cd nginx-1.16.1
./configure --prefix=/usr/local/nginx
make && make install

2. Nginxの起動とコマンド

2.1 基本的なコマンド

• 起動: start nginx
• 停止: nginx -s stop (強制停止), nginx -s quit (正常終了)
• 設定ファイル再読み込み: nginx -s reload
• 設定ファイルの検証: nginx -t -c conf/nginx.conf
• バージョン確認: nginx -v

3. フロントエンドのdistパッケージのデプロイメント

以下のNginx設定を使用してフロントエンドアプリケーションをデプロイします。

server {
    listen 8080;
    server_name localhost;

    location / {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' true;
        add_header 'Access-Control-Allow-Headers' '*';
        add_header 'Access-Control-Allow-Methods' '*';
        add_header 'Access-Control-Expose-Headers' '*';
        root /var/www/html/dist;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /var/www/html;
    }

    location /api/ {
        proxy_pass http://backend-server:8080/;
    }
}

4. リフレッシュ時の404エラーの解決

フロントエンドアプリケーションが単一ページアプリケーションである場合、ブラウザのリフレッシュが404エラーを引き起こすことがあります。これを防ぐためには、Nginxの設定にtry_filesディレクティブを追加します。

location / {
    root /var/www/html/dist;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
}

また、ファイルアクセス権限の問題も404エラーの原因となる可能性があります。Nginxのユーザーアカウントに適切な権限があることを確認してください。