Nginxの設定で詰まった話

概要

1. ポートフォリオサイトをVueで作成したが、デプロイに詰まってしまった。
2. NginxのLogを確認したところ、permissionエラーであったため、対象ディレクトリの権限を付与した。
3. Nginxの再起動、インスタンスごとの再起動でも変わらずpermissionエラーが発生してしまう。
4. /WWWディレクトリを作成し、そこに権限を与えることで解決した。

環境

• EC2(AamazonLinux2023)
• Nginx v1.24.0
• Vue3

発生したエラー

2023/09/25 10:56:41 [crit] 2129#2129: *1 stat() "/home/ec2-user/[ディレクトリ名]/dist/" failed (13: Permission denied), client: 175.177.43.47, server: hogehoge.com, request: "GET / HTTP/1.1", host: "hogehoge.com"

要は、nginxユーザーが"/home/ec2-user/ec2-dep/dist/"にアクセスする権限を持たないことが原因で発生したようだった。

結論

/etc/nginx/conf.d/hogehoge.conf

server {
    listen 80;

    server_name hogehoge.com; # ここに実際のドメイン名を入れてください。

    location / {
        root /www; # ここにビルドされたコードへのパスを入れてください。
        try_files $uri $uri/ /index.html;
    }
}

ec2-userで実行

sudo mkdir /www

同じように下記コマンドを実施

sudo chmod 755 /www
sudo chown nginx:nginx /www

試し用のファイルを作成

echo '<h1>Hello, World!</h1>' | sudo tee /www/index.html

Nginxをリスタート

sudo systemctl restart nginx

インスタンスのオープンIPにアクセスして、Hello,World!と表示されたら成功です！！

あとは、

npm run build

して、アプリをbuildしてください。

sudo cp -r /home/ec2-user/[ディレクトリ名]/dist/* /www/

/www/にdistの内容をすべてコピーしてください。

Nginxをリスタート

sudo systemctl restart nginx

再度アクセスして、変更が反映されていたら終了です！！

参考サイト