【初学者におすすめ】EC2にNginxとReactでWebサーバーを立てるデモ
こんにちは、やまだゆうです。
今回はAmazon Linux 2023で起動したEC2にNginxとReactでWebサーバーを立てるデモンストレーションを見せたいと思います。
ちょっと長いですが、頑張って付いてきてください！
この記事の内容
- なぜやるのか：基礎理解のため
- Reactアプリの用意
- Amazon Linux 2023にNginxをインストール
- ReactアプリをEC2上に配置
- Nginxの設定
- トラブルシューティング：なぜ500エラーが出るのか
スポンサーリンク
なぜやるのか：基礎理解のため
仕事で他のチームが作ったReactアプリをAWSにどのように構築するか検討する機会がありました。
ちょっと調べてみるとNginxと組み合わせてWebサーバーを構築している事例が多かったので初めてNginxを使ってみました。
仕事の方の検討は完了したので、落ち着いてNginx+ReactでWebサーバーの構築を理解したいと思い復習を目的にしています。
エンジニアへの転職を目指して勉強している方にも理解しやすいよう手順にこだわって書いていますので、本記記事をぜひ役に立ててください！
Reactアプリの用意
まずはReactアプリを用意しましょう。最近ホットなVite（ヴィート）でプロジェクトを作ります。
ここではNPMを介してVite + Reactのプロジェクトを作りますが、公式で紹介されている他のコマンドから作っても構いません。
npm create vite@latest上記コマンドを実行するとプロジェクト名を求められます。なんでもいいので初期名のvite-projectのままエンターキーを押します。
vite-projectのままエンターキーをクリック続いて使用するフレームワークを聞かれます。Reactを選択しましょう。
Reactを選択してエンターキーをクリック最後にどの組み合わせで使いたいか問われます。かっこいいのでTypeScriptを選択します。
これでプロジェクトが作られました。次の案内に従ってプロジェクトを実行してみましょう。
npm run devを実行するとlocalhost:5173でReactアプリが起動されます。
これでReactアプリの用意が完了しました。
スポンサーリンク
Amazon Linux 2023にNginxをインストール
EC2を起動する
まずはAWSでEC2を起動します。
Amazon Linux 2023（以下、「AL2023」）でEC2を起動しましょう。ぼくはこんな感じで作りました。VPCやサブネットはAWSアカウント作ったときに用意されるデフォルトのものを使ってます。
使ったマシンイメージはami-0ad215c298e692194（al2023-ami-2023.4.20240528.0-kernel-6.1-arm64）です。
SSM接続でのサーバー接続とS3へのアクセスを行うので、IAMロールはAmazonSSMManagedInstanceCoreとAmazonsS3FullAccessというポリシーを当てましょう。
デモンストレーション用に権限が大きいポリシーを当てていますが、本番運用ではカスタムで権限を絞ったポリシーを用意して当てましょう。
EC2にNginxをインストール
EC2に接続したらec2-userにログインします。
sudo su --login ec2-userAL2023ではDNFがパッケージ管理ツールです。これを使ってNginxをインストールします。
sudo dnf update
sudo dnf install nginx -ynginxコマンドが使えればインストール完了です。
nginx -v
# nginx version: nginx/1.24.0ReactアプリをEC2上に配置
Reactアプリをビルド
さきほど作成したReactアプリをビルドしましょう。Reactアプリのルートディレクトリに移動して以下のコマンドを実行します。
npm run buildビルドが完了するとdistディレクトリが作成されます。（初期設定のままの場合）
いったんS3にソースコードをアップロードするためにdistディレクトリの内容をzipファイルに纏めます。
zip react-app -r distS3バケットにソースコードをアップロードする
S3バケットを用意しましょう。名前以外は初期設定のままで作ってください。
先ほど作ったzipファイルをバケットの直下にアップロードします。アップロードしたら、ファイルのS3 URIをコピーしておきます。
S3からEC2にReactアプリをコピーする
再びEC2にSSM接続して、ec2-user直下にappフォルダを作ります。
sudo su --login ec2-user
mkdir appS3にアップロードしたReactアプリのソースコードをEC2にコピーします。
aws s3 cp *先ほどコピーしたS3 URI* app/コピーしたソースコードを解凍します。
cd app
unzip react-app.zipスポンサーリンク
Nginxの設定
Nginxの設定を行います。
sudo vim /etc/nginx/nginx.confhttp > serverディレクティブ内のerror_pageの前に以下の設定を追加しましょう。
location / {
root /home/ec2-user/app/dist;
index $uri /index.html;
}
Nginxのサービスを起動します。
sudo systemctl enable --now nginx.serviceEC2インスタンスのパブリック IPv4 アドレスにhttpで接続します。すると以下の画像のようなエラー画面が出ます。
トラブルシューティング：なぜ500エラーが出るのか
これはかなり解決に時間がかかったエラーです。原因はルートディレクトリからReactアプリがあるディレクトリまでにnginxユーザーが実行できないディレクトリがあることです。
参考：【nginx】アクセス権限が正しいのにPermission deniedになるときの原因と対処 – 新米エンジニアの失敗再発防止メモ
本件でいえば、/home/ec2-userディレクトリに実行権限がありません。
ということで、その他のユーザーに実行権限を与えます。
sudo chmod 701 /home/ec2-userもう一度/home/ec2-userディレクトリの権限を確認すると、その他のユーザーでも実行できるようになりました！
これで再度サイトにアクセスすると、無事にReactアプリが表示できました！
yamaday0uを応援お願いします！あなたの１クリックが励みになります。
>> にほんブログ村