【更新版】とりあえず動かす！Cloud9 & React & Amplify & GraphQLの環境構築（Cloud9&React準備編）
導入
前に書いた記事（とりあえず動かす！Cloud9 & React & Amplify & GraphQLの環境構築）の更新版です。
Cloud9にReactプロジェクトを作成してAmplifyを構築して疎通確認するまでの手順をまとめました。前回記事からの変更点は要点ごとに記事を分けたことです。
留意事項
- リージョン：オレゴン（us-west-2）
- リージョンは↑で統一しているので、以降の手順を進める際にはリージョンをオレゴン（us-west-2）で進めます
- Reactのプロジェクト名：sampleapp
- 全て↑のフォルダ配下で行います
関連する記事の全体
- IAM作成編
- Cloud9&React準備編 ← イマココ
- Amplify初期化編
- GraphQL構築編
- function構築編
- 疎通確認編
- ホスティング編
- 後かたずけ編
構成
最終的に下の構成にしたいので今回はCloud9の準備とReactプロジェクトの作成を行います。
Cloud9の作成
Cloud9で「環境の作成」をクリックします。
名前にsampleappと入力してそれ以外は全てデフォルトのままで、一番下の「作成」をクリックします。
しばらくして作成が完了すると以下のようになります。
ディスクボリュームの変更
EC2のディスク容量を拡張します。Amplify CLIをインストールする際にnode.jsのパッケージ容量が増加したため、容量不足によるエラー回避が目的です。
まずはインスタンスを停止するので、EC2で「インスタンス（実行中）」を選択します。
実行中のインスタンスを選択して、「インスタンスの状態」からインスタンスを停止を選択します。
停止したことを確認したら、インスタンスIDを選択します。
下にある「ストレージ」タブをクリックします。
表示されたボリュームIDを選択します。
右の「変更」をクリックします。
サイズ(Gib)で10から20へ変更して、変更ボタンを押します。ダイアログで「変更」を押してしばらく待ちます。
サイズが20GiBになったらディスクボリュームの変更が完了です。
Cloud9の一時認証情報を無力化する
Cloud9を選択して「開く」をクリックします。
しばらくするとCloud9が起動します。
Cloud9の左上「9」(cloud9のアイコン)→Preferenceの順にクリックします。
AWS Settingsを選択します。
「Credencials」のトグルをOFFにします。
npmのアップデート
Amplifyのパッケージで最新を取り込むため、npmをアップデートします。
Cloud9の下にあるターミナルで以下のコマンドを実行します。
npm update -g npm
create-react-appのインストール
Cloud9のターミナルから以下のコマンドで「create-react-app」をインストールします。
npm install -g create-react-app
yarnのインストール
以下のコマンドでyarnをインストールします。
npm install -g yarn
Reactプロジェクト作成
以下のコマンドでReactプロジェクトを新規作成します。
create-react-app sampleapp
次回以降に実行するコマンドは全てsampleappの配下で行うため、あらかじめsampleapp配下へ移動しておきます。
cd sampleapp
以上でCloud9とReactの準備ができました。次回はやっとAmplifyです。
参考にしたサイト
Discussion