EC2 Reactセットアップ（Amazon Linux 2023）
こんにちは。MSP部の道端です。
最近フロントエンドのReactの勉強を始めました。
EC2（Amazon Linux 2023）にReactの環境を構築しましたが、Swap領域やreactのバージョン管理で躓いたので備忘録もかねてブログにしました。
▶EC2インスタンスの作成
================================================================================================
パブリックサブネットにEC2を立てます。パブリックサブネットとはインターネットゲートウェイを通じて直接インターネットに接続できる
VPC内のサブネットです。通常はwebサーバーやロードバランサーなど外部からアクセス可能なリソースを配置します。
セキュリティグループはインバウンドルールでTCPの80ポートと同じくSSHの22番ポートを開け、ソースを自分のIPアドレスにします。
こうすることでこのインスタンスへはhttp接続（webアクセス）とssh接続（インスタンスへのログイン）が自分のみ可能になります。
名前 ：好きなもの
AMI ：Amazon Linux 2023 AMI
インスタンスタイプ ：t2.micro
セキュリティグループ ：Http接続とSSH接続が可能なもの
ストレージ ：1ボリューム – 8 GiB
▶必要なソフトウェアのインストール
================================================================================================
EC2の中にウェブサーバーとNode.jsとnpmをインストールします。
ウェブサーバーはApacheを使います。Apacheは、広く使用されているウェブサーバーソフトウェアの1つです。
このソフトウェア下のフォルダに自分の作ったファイルをアップロードすることでchromeやsafariなどから表示させることができます。
sudo yum install httpd -y # apache（httpd）のインストール
sudo yum install nodejs npm -y # Node.jsとnpmのインストール
▶スワップ領域の確保
================================================================================================
t2.microインスタンスはメモリが限られているため、初期設定ではswap領域が0になっています。
この後実行するnpm run buildの処理がswap容量不足で終わらなくなってしまうため、2GBのスワップ領域を作成しておきます。
# スワップフィルの作成
sudo dd if=/dev/zero of=/swapfile bs=1M count=2048
# 権限変更
sudo chmod 600 /swapfile
# スワップ領域の初期化
sudo mkswap /swapfile
# スワップ領域の有効化
sudo swapon /swapfile
# 自動割り当て設定を行うため、fstabファイルを編集します
sudo vi /etc/fstab
ファイルの末尾に追記。
/swapfile swap swap defaults 0 0
こうなっていればOKです。
▶Reactアプリケーションの作成
================================================================================================
create-react-appコマンドでプロジェクトを作成します。
npx create-react-app react-app
※ ここでエラーが出てきます。
エラーの原因は @testing-library/react@13.4.0 が peerDependencies として react@”^18.0.0″ を指定していることにあります。
手動でバージョンを修正してエラーとなってしまったパッケージをインストールします。
# react-appフォルダ下にあるpackage.json内のreactとreact-domのバージョンを手動で18に修正
“react”: “^18.0.0”,
“react-dom”: “^18.0.0”,
# reactとreact-domを手動でインストール
npm install react@18 react-dom@18
# インストールに失敗したパッケージ群を手動でインストール
npm install @testing-library/react@13.4.0 @testing-library/jest-dom@5.14.1 @testing-library/user-event@13.2.1 web-vitals@2.1.0
▶アプリケーションのビルドとデプロイ
================================================================================================
npm run buildで生成したbuildフォルダをapache配下に移動させて80ポートから表示できるようにします。
apacheサーバーをリバースプロキシサーバとして80番ポートへの接続をreactアプリケーション（3000番ポート）にリバースすることも可能です。
また、作成されたbuildフォルダをs3に配置して、cloudfrontから配信することも可能です。
# プロジェクトフォルダに移動
cd react-app
# ビルドを開始
npm run build
# apacheに初期配置されているファイルを削除
sudo rm -rf /var/www/html/*
# buildフォルダをapacheのフォルダに移動
sudo cp -r /home/ec2-user/react-app/build/* /var/www/html/
▶Apacheの起動と設定
================================================================================================
# apacheの起動
sudo systemctl start httpd
# シンボリックリンクの作成
sudo systemctl enable httpd
▶動作確認
================================================================================================
インスタンスのパブリックIPをブラウザの検索バーに入力するとreactのページが表示されます。
以上でセットアップは完了です。
