JISOU | 経験者専門プログラミングコーチングPublicationへの投稿

💻

AWS EC2でReactアプリをデプロイする方法

Masafumi

2025/03/26に公開

 はじめに今回は AWS の EC2 を使って、Vite で作成した React アプリをデプロイしていきます。最終的に Route 53 で取得したドメインに React アプリが表示できるようにしていきます。

 設定方法まず初めに EC2 インスタンスの起動時に必要なキーペアとセキュリティグループの設定を行います。

 キーペアの作成EC2 インスタンスの SSH 接続に必要なキーペアの作成を行います。
EC2 のメニューから「ネットワーク & セキュリティ」の「キーペア」をクリックします。
「キーペアを作成」をクリックします。
キーペアの設定画面が表示されるので詳細を入力します。


今回入力する設定項目です。


項目
値
説明


名前
masafumi
SSH 接続に利用する鍵の名前

キーペアのタイプ
RSA
SSH 接続で利用する暗号化アルゴリズム

プライベートキーファイル形式
pem
SSH 接続形式

キーペアは基本的に作業する人に属します。キーペアの名前には作業者の名前を設定してください。
設定項目を入力したら「キーペアを作成」をクリックします。
キーペアの一覧に名前のところで設定した値が表示されていたらキーペアの作成が完了です。Edge や Chrome であれば作成と同時に自動でキーペアのダウンロードがされます。
SSH 接続に必要なファイルは一般的に.sshディレクトリに配置します。先ほどダウンロードしたキーペアを下記のコマンドで.sshディレクトリにコピーします。xxxの部分はご自身のキーペア名を指定してください。
cp ~/Downloads/xxx.pem ~/.ssh/

.sshディレクトリにキーペアが表示されていればコピーが完了です。
ls -la ~/.ssh/

 セキュリティグループの設定セキュリティグループとは外部からのアクセスに制限をかける機能です。セキュリティグループではポート番号、IP アドレスの 2 つで制御することができます。
セキュリティグループの設定を行なっていきます。
今回入力する設定項目です。


項目
値
説明


セキュリティグループ名
vite-react-app
セキュリティグループにつける名前

説明
vite-react-app server
セキュリティグループの対象や用途の説明

インバウンドルール
タイプ:SSH ソース:0.0.0.0/0
タイプ:外部から接続を許可するプロトコルを設定
ソース:外部から接続を許可する IP アドレスを指定

インバウンドルール
タイプ:カスタム TCP ポート範囲:5173 ソース:0.0.0.0/0
Vite のローカルホスト接続確認用（開発環境）

インバウンドルール
タイプ:カスタム TCP ポート範囲:80 ソース:0.0.0.0/0
Vite のローカルホスト接続確認用（開発環境）

左上の検索欄から「VPC」と検索します。
VPC の設定画面の「セキュリティ」の「セキュリティグループ」をクリックします。
「セキュリティグループを作成」をクリックします。
セキュリティグループの設定画面が表示されます。
基本的な詳細を入力していきます。セキュリティグループ名はvite-react-app、説明にはvite-react-app server、VPC はデフォルトを設定します。
インバウンドルールにはアクセスを許可するポート番号を入力します。
SSH 接続用にポート 22 を設定します。
Vite のローカルホスト接続用にポート 5173 を設定します。
nginx の接続確認用にポート 80 を設定します。

「セキュリティグループを作成」をクリックします。
作成したセキュリティグループ名が表示されていれば完了です。

 EC2 インスタンスの作成EC2 インスタンスの設定を行なっていきます。
今回入力する設定項目です。


項目
値
説明


名前
vite-react-app
EC2 インスタンスの名前

Amazon マシンイメージ（AMI）
Amazon Linux 2023 AMI
EC2 インスタンスに導入する OS

インスタンスタイプ
t2.micro
EC2 インスタンスのスペック

キーペア (ログイン)
masafumi
EC2 インスタンスに接続するときに使用するキーペア

ファイアウォール (セキュリティグループ)
vite-react-app
EC2 インスタンスに適用するセキュリティグループ

「インスタンスを起動」をクリックします。
設定画面が表示されるので詳細を入力していきます。まずインスタンス名を入力します。今回はvite-react-appとします。

AMIを選択します。Amazon Linux 2023 AMIを選択します。

AWS 環境でサーバーを運用する場合はLinuxが適しています。特別に理由がない場合はLinuxを選択してください。
インスタンスタイプはt2.microを選択します。
先ほど設定したキーペアを選択します。
ファイアウォール（セキュリティグループ）は「既存のセキュリティグループを選択する」、共通のセキュリティグループは事前に作成したvite-react-appを選択します。
ここまで入力完了したら「インスタンスを起動」をクリックします。
インスタンスの管理画面に戻りインスタンスの状態が「実行中」になっていればインスタンスの設定が完了です。

 EC2 インスタンスの SSH 接続ssh コマンドを使ってサーバーに接続します。@以降に EC2 インスタンスのパブリック IP アドレスを入力してください。
ssh -i ~/.ssh/masafumi.pem ec2-user@57.181.34.248
IP アドレスは下記から確認できます。インスタンス ID をクリックします。
パブリック IPv4 アドレスの内容をコピーして ssh コマンドの@以降に貼り付けてください。
初めてインスタンスを起動する際は以下のようなメッセージが表示されます。
The authenticity of host '57.181.34.248 (57.181.34.248)' can't be established.
ED25519 key fingerprint is SHA256:aN5bOSqSsRj570x9W97PibuaFhF+PxlLCs2DvtRLw98.
This host key is known by the following other names/addresses:
    ~/.ssh/known_hosts:22: 57.181.34.248
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes

yesを押して Amazon Linux 2023 が表示されれば SSH 接続の完了です。
Warning: Permanently added '57.181.34.248' (ED25519) to the list of known hosts.
   ,     #_
   ~\_  ####_        Amazon Linux 2023
  ~~  \_#####\
  ~~     \###|
  ~~       \#/ ___   https://aws.amazon.com/linux/amazon-linux-2023
   ~~       V~' '->
    ~~~         /
      ~~._.   _/
         _/ _/
       _/m/'


 Nginx のインストールとセットアップEC2 インスタンスを起動しただけでは React アプリを公開することができません。Web サーバー上で HTTP リクエストを受け付ける必要があります。今回は Nginx を使った方法で作成します。

 Nginx のインストール以下のコマンドで Nginx をインストールします。
sudo yum update -y
sudo yum install nginx -y
以下のコマンドでバージョンが表示されればインストールの完了です。
nginx -v
# nginx version: nginx/1.26.3（バージョンは環境によって異なる場合があります）
以下のコマンドで Nginx を起動します。
sudo systemctl start nginx
Nginx を自動起動するように設定します。
sudo systemctl enable nginx
パブリック IPv4 アドレスかパブリック IPv4 DNS にブラウザからアクセスします。
以下のように Nginx のデフォルトページが表示されていれば完了です。

 Nginx のセットアップNginx の設定は、利用環境（開発環境または本番環境）によって異なります。
以下のコマンドで nginx.conf を編集します。
sudo vi /etc/nginx/nginx.conf
開発環境の場合

開発環境では、Vite のローカル開発サーバー（ポート 5173）へプロキシする設定を使用します。
http {
    ...
    server {
        ...
        location / {
            proxy_pass http://localhost:5173;
        }
    ...
    }
}
本番環境の場合

本番環境では、ビルドしたファイル（dist ディレクトリ内）を静的コンテンツとして配信します。
http {
    ...
    server {
        ...
        location / {
            root /home/ec2-user/aws-vite-app/dist;  # ビルドされたファイルのパス
            index index.html;
            try_files $uri $uri/ /index.html;
        }
    ...
    }
}
設定を変更した後、以下のコマンドで Nginx を再起動して変更を反映させます。
sudo systemctl restart nginx
Nginx の設定が正しいか確認します。
sudo nginx -t
エラーがなければ、ブラウザでパブリック IP アドレスにアクセスしてください。
開発環境の場合: この時点では React アプリがまだ起動していないため、エラー画面が表示されます（これは正常な状態です）。
本番環境の場合: この時点ではまだ React アプリをビルドしていないため、エラー画面が表示されます。React アプリのセットアップとビルドを完了した後に確認します。

 React アプリのセットアップGitHub に push されているアプリをクローンして起動します。
!Vite で作成した React アプリは事前に作成されており GitHub にプッシュされている前提で進めていきます。

 Git のインストール以下のコマンドで Git をインストールします。
sudo yum install git -y
以下のコマンドで該当のリポジトリをクローンします。今回は aws-vite-app というリポジトリをクローンします。
git clone https://github.com/<your repository>/aws-vite-app.git
以下のコマンドで該当のレポジトリが表示されていればクローンの完了です。
ls
#  aws-vite-app

 Node.js のインストールReact アプリが動作する環境を作成するために Node.js をインストールします。

AWS の公式ドキュメントがあるのでそちらにそってインストールしていきます。
Node.js のインストール方法
以下のコマンドでノードバージョンマネージャー (nvm) をインストールします。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
以下のコマンドで nvm をロードします。
source ~/.bashrc
以下のコマンドで nvm を使用して Node.js の最新の LTS バージョンをインストールします。（執筆時点での LTS バージョンは 22.x です）
nvm install --lts
以下のコマンドで Node.js が正しくインストールされているかを確認します。
node -e "console.log('Running Node.js ' + process.version)"
Node.js のバージョンが表示されていれば完了です。
Running Node.js v22.14.0 # バージョンは時期によって異なります

 React アプリの起動クローンした React アプリを、環境に応じて起動します。

まず、どちらの環境でも必要な共通の準備手順を実行します。
1.以下のコマンドでクローンしたディレクトリに移動します。
cd aws-vite-app
以下のコマンドで依存パッケージををインストールします。
npm install
環境に応じて React アプリを起動します。
開発環境での起動（テスト用）

開発環境では、Vite の開発サーバーを外部からアクセス可能な設定で起動します。
npm run dev
開発サーバーが起動したら、パブリック IPv4 アドレスにブラウザからアクセスして、Vite のデフォルト画面が表示されることを確認します。
本番環境での起動（推奨）

本番環境では、アプリをビルドして静的ファイルを生成します。
# 本番用ビルドを実行
npm run build
ビルドが完了すると、dist フォルダにビルドされたファイルが生成されます。既に Nginx の設定で/home/ec2-user/aws-vite-app/dist を指定している場合は、ブラウザからパブリック IPv4 アドレスにアクセスすると React アプリが表示されます。

 Route 53 で取得したドメインに表示Route 53 で取得したドメインに React アプリを表示させていきます。
!Route 53でドメインはあらかじめ取得している前提で進めていきます。
AWS コンソールから Route 53 のダッシュボードに移動します。
ホストゾーン名をクリックします。
「レコードを作成」をクリックします。
「シンプルなレコードを定義」をクリックします。
シンプルなレコードを定義を行なっていきます。
今回入力する設定項目です。


項目
値
説明


レコードタイプ
A – IPv4 アドレスと一部の AWS リソースにトラフィックをルーティングします。
IP アドレスをそのまま指定するタイプ

値/トラフィックのルーティング先
レコードタイプに応じた IP アドレスまたは別の値 57.181.34.248
ルーティング先の設定方法　ルーティング先の情報

入力が完了したら「シンプルなレコードを定義」をクリックします。
取得したドメインにアクセスして React アプリが表示されれば完了です。

 終わりに以上が EC2、Nginx、Vite で作成した React アプリをデプロイし、Route 53 で取得したドメインに表示するまでの手順になります。

 参考文献https://inakademac.com/react-ec2/
https://qiita.com/honda28/items/a9c3f6174620b22e1b9b
https://zenn.dev/jinwatanabe/articles/e27b219d897fd5b85649

項目	値	説明
名前	masafumi	SSH 接続に利用する鍵の名前
キーペアのタイプ	RSA	SSH 接続で利用する暗号化アルゴリズム
プライベートキーファイル形式	pem	SSH 接続形式

項目	値	説明
セキュリティグループ名	vite-react-app	セキュリティグループにつける名前
説明	vite-react-app server	セキュリティグループの対象や用途の説明
インバウンドルール	タイプ:SSH ソース:0.0.0.0/0	タイプ:外部から接続を許可するプロトコルを設定ソース:外部から接続を許可する IP アドレスを指定
インバウンドルール	タイプ:カスタム TCP ポート範囲:5173 ソース:0.0.0.0/0	Vite のローカルホスト接続確認用（開発環境）
インバウンドルール	タイプ:カスタム TCP ポート範囲:80 ソース:0.0.0.0/0	Vite のローカルホスト接続確認用（開発環境）

項目	値	説明
名前	vite-react-app	EC2 インスタンスの名前
Amazon マシンイメージ（AMI）	Amazon Linux 2023 AMI	EC2 インスタンスに導入する OS
インスタンスタイプ	t2.micro	EC2 インスタンスのスペック
キーペア (ログイン)	masafumi	EC2 インスタンスに接続するときに使用するキーペア
ファイアウォール (セキュリティグループ)	vite-react-app	EC2 インスタンスに適用するセキュリティグループ

項目	値	説明
レコードタイプ	A – IPv4 アドレスと一部の AWS リソースにトラフィックをルーティングします。	IP アドレスをそのまま指定するタイプ
値/トラフィックのルーティング先	レコードタイプに応じた IP アドレスまたは別の値 57.181.34.248	ルーティング先の設定方法　ルーティング先の情報

GitHubで編集を提案

JISOU | 経験者専門プログラミングコーチングPublication

「科学的根拠を基にしたアウトプットカリキュラム」現役専門プログラミングコーチングJISOUのメンバーによる記事投稿をしています。コミュニティの詳細はホームページをご覧ください。

Discussion

ログインするとコメントできます