【AWS】Cloud9環境レシピ（React編）

AWSのCloud9を使って、Reactの開発環境を作る手順を記録します。

ベース環境は「【AWS】最低限のネットワーク環境レシピ」を参照のこと

１．Cloud9 Environment作成

項目	設定値例	備考
Name	my-cloud9-react
Description		任意で説明文を記述

項目	設定値例	備考
Environment Type	Create a new no-ingress EC2…	SystemManager統合でEC2に接続（SSHポート不要）
Instance Type	t2.micro	使用するEC2のスペック。 （今回は無料利用枠で設定）
Platform	Amazon Linux2	OSを選択
Cost-saving setting	After 30 minutes	EC2コスト削減。Cloud9終了後から30分経過でEC2を休止
Network(VPC)	my-vpc	自分で用意したVPCなどを指定
Subnet	my-subnet-a-public	自分で用意した外部接続可能なサブネット。 (Internet GatewayまたはNATが設定されている）

これで作成すると、Cloud9というエディタのインスタンスと、対となるEC2が作成されます。

２．Reactに必要なパッケージをインストール（最新化）

「Amazon Linux2」はRedhat系なのでyumを使ってセットアップしていきます。

（１）yumを最新化

sudo yum -y update

（２）Node.jsインストール

// 現在のバージョンを確認
node -v

// バージョンアップする場合の手順
// nvmのインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
command -v nvm

// 「nvm」と表示され、インストールされたことを確認

//Node.jsをインストール
nvm install stable --latest-npm
nvm alias default stable

// バージョンを確認
node -v

// ついでにnpmもバージョンを確認
npm -v

（３）yarnインストール

※Reactでは必須パッケージとなっているのでインストール

curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo yum -y install yarn

（４）create-react-appパッケージをグローバルインストール

npm install -g create-react-app

※インストールしないでreactプロジェクトを作る方法もあります（後述）

（５）プロジェクト作成

cd （任意のディレクトリ）
create-react-app （プロジェクト名）

// プロジェクト名のディレクトリが作成され、その下にReactテンプレート（構成）が作られる

（補足１）既に作成済みのディレクトリにReact一式を作りたい場合

cd （当該ディレクトリ）
create-react-app .

（補足２）上記（４）で「create-react-app」パッケージをインストールせずにReact構成
　　　　　を作りたい場合

npx create-react-app （プロジェクト名）

　　　　「npx」はnpmに梱包されているコマンドで、インストール・実行・アンインストールまで
　　　　行ってくれます。
　　　　通常npmでインストールしたパッケージ情報はPackage.jsonに記録されたり、コマンドで
　　　　バージョン確認できたりしますが、npmで代替してしまうとそれが残らないため、後々
　　　　バージョンが分からなくなったりとデメリットもあります。

（６）Reactテンプレートの実行確認

npm start

以下のような画面が表示されればOKです。
ターミナル上で　Ctrl+Cでサーバを停止できます。

おわり