初心者向け！EC2（Amazon Linux2023）にReact開発環境を構築する方法！

こんにちは、@Manabu です。

今まで主に、PHPが仕事の範疇でしたが、個人で開発したいアプリがあり、それがReactで開発できそうだったので勉強を始めることにしました！

今回も、これまでと同じようにAWSのEC2(AL2023)を使って開発していきたいと思います。

EC2の中身は、以下で構成するようになります。

※バージョンは特に指定していないので、その時の最新になると思います。

この手順で、簡単にAL2023環境にReactアプリで開発できるようになると思うので、ぜひ参考にしてください！

注意点

手順紹介の前に、開発環境を構築する内の注意点を消化

インスタンスタイプ

t2.microなどのような１GBのメモリしか持たないインスタンスでは、「JavaScript heap out of memory」ようなエラーが発生してしまう可能性があります。

これは、Node.jsが割り当てられたメモリの上限に達したため発生するエラーです。この状態ですと、create-react-appコマンドでアプリの作成実行が中断されてしまいます。

t3.mediumやm5.largeなどの４GB以上のメモリを持つインスタンス対応を使用することをお勧めします。
※今回は「t3.medium」を使用しています。

プロジェクト名は小文字の英語

create-react-appコマンドを実行する時、作成するプロジェクト名を設定することができます。

この時、プロジェクト名に大文字や特定の記号を使用すると、エラーが発生してしまいます。

注意するようにしましょう。

Apacheのインストールと起動

まずは、WebサーバーとしてApacheをインストールして起動します。

以下のコマンドを順番に実行します。

// Apacheのインストール
sudo dnf install -y httpd

// Apacheの起動コマンド
sudo systemctl start httpd

// Apacheの起動ステータス確認コマンド
sudo systemctl status httpd

// Apacheの自動起動コマンド
sudo systemctl enable httpd

// Apacheの自動起動確認コマンド
sudo systemctl is-enabled httpd

// Apacheのバージョン確認コマンド
httpd -v

ステータスが「Actice」になっており、自動起動も「enabled」であれば正しく起動設定が行えています。

Node.jsとnpmのインストール

以下のコマンドで、Node.jsとnpmをインストールします。

sudo dnf install -y nodejs npm
// インストールの確認
node -v
npm -v

それぞれバージョンが確認できたら問題ないです。

Reactアプリの作成

Node.jsとnpmがインストールできたら、Reactアプリを作成します。
※今回は/var/www配下に作成します。

cd /var/www
npx create-react-app react-app

これで、/var/www/react-appというディレクトリが作成され、中に色々インストールされるようになります。

アプリの作成がうまくいかない場合は、再度「注意点」を確認するようにしましょう。

Apacheの設定を変更

Reactアプリは開発中に、リアルタイムでコードの変更を反映する「ホットリロード」機能を提供する開発サーバーを使用します。この開発サーバーは、デフォルトでポート3000を使用して動作します。

そのため、Apacheの設定では80ポートで来たリクエストを3000ポートに転送するように設定します。
※EC2のセキュリティグループは、80ポートだけ開けておけば良いです。

以下のコマンドで、Apacheの設定ファイルを編集します。

// Apacheの設定ファイルを編集
sudo vi /etc/httpd/conf/httpd.conf
// ドキュメントルートとディレクトリを変更
DocumentRoot "/var/www/react-app"
<Directory "/var/www/react-app">

// ファイルの一番下に以下を追加
ProxyRequests Off
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/

<Proxy *>
    Require all granted
</Proxy>

これで、80ポート（http）でブラウザからアクセスした時、Reactの開発サーバーで実行されている画面にアクセスできるようになります。

変更したApacheの設定を再起動して反映させます。

sudo systemctl restart httpd

これで設定自体は完了になります。

Reactアプリの開発サーバーを起動

以下のコマンドで、Reactの開発サーバーを起動します。

cd /var/www/react-app
npm start

ブラウザからアクセスすると、Reactアプリの画面が表示されます。

npm startコマンドを実行していないタイミングでは、以下のような画面が表示されます。

開発自体は、EC2にVScodeでアクセスして編集していくのが良いかと思います。
以下を参考にしてください。

まとめ

EC2にReactアプリの開発環境を構築する方法を紹介しました。

Buildの方法やそのほかについては、今後更新していきたいと思います。