はじめに

こんにちは。ビジネスアクセラレーション事業部の古川です。
この記事は、「AWSに興味はあるけどよく知らない」「資格を持っているけど実際に触ってみたことがない」という方向けに、「30分で学習できる」をテーマに毎週金曜日にお届けする連載シリーズの第2回です。

この記事では、AWS公式チュートリアルの「フルスタックのReactアプリケーションを構築する」に挑戦します。この記事は第二回となります。環境構築が済んでいない方は、前回の第一回の内容を行ってからこの記事をご覧ください。
本日も一緒に取り組んでいただけると嬉しいです！後半にコードをコピーして貼り付ける作業がありますが、このブログには参考画像のみを載せているため、公式ガイドからのコピーをお願いします。

※本ブログではmacOSを使用しています。
※Gitの代わりにCodeCommitを使用しています。ご了承ください。

1.新しいReactアプリケーションを作成する

本日はタスク１、Reactアプリのデプロイとホスト を進めます。ブログでは私が実際に行った手順を紹介しますが、公式ガイドも合わせてご確認ください。
React環境をセットアップするため、ターミナルで以下のコマンドを順番に実行します。

npm create vite@latest notesapp -- --template react
cd notesapp
npm install
npm run dev

うまく行かない場合は、Node.jsのインストールができていない可能性があります。こちらからインストールしてください。

Ok to proceed? (y)　と聞かれたら、「y」を入力します。インストールが進み、URLが表示されたら完了です。
URLをウェブで開くと、このようなページが出てきます。開けることを確認したらこのステップは完了です。

2.CodeCommitリポジトリを作成し、コードをコミットする

公式チュートリアルではGitHubを使用しますが、本ブログではCodeCommitに置き換えて進めていきます。

  1. SSHキーを作成する
    下記をターミナルに入力し、新しいSSHキーを作成します。「react-tutorial」の部分にはつけたい鍵の名前を入れてください。
    ssh-keygen -t rsa -b 4096 -C "react-tutorial"

続けてパスフレーズを2回聞かれますが、2回とも何も入力せずEnterで進めます

2.作成したキーを確認する
下記をターミナルに入力し、正しく作成されているか確認します。
ls ~/.ssh
react-tutorial と react-tutorial.pub が表示されれば成功です。

3.下記を入力して公開鍵の中身を表示します。ssh-rsaから始まる長い文字列が表示されるので、これをすべてコピーします。
cat ~/.ssh/react-tutorial.pub

4.公開鍵をAWSに登録します。AWSマネジメントコンソールからIAMを開きます。
左側のタブから、IAMユーザーを選択し、使用しているIAMユーザーを選択します。

5.「セキュリティ認証情報」タブを開き、「AWS CodeCommit の SSH 公開キー」のセクションにある「SSH 公開キーのアップロード」を選択します。ここに先ほどコピーした公開鍵を貼り付けてアップロードします。
アップロードが成功すると「SSH キー ID」（APKAから始まる文字列）が発行されます。このIDをコピーしておきます。

6.接続設定ファイルを編集します。下記をターミナルに入力します。
nano ~/.ssh/config

7.ファイルの一番下に、以下を追記します。の部分は、先ほどコピーしたIDに置き換えます。

Host git-codecommit.*.amazonaws.com
  User 
  IdentityFile ~/.ssh/react-tutorial

追記できたら、Control + O → Enter → Control + Xの順で保存して閉じます。

8.ターミナルに下記を入力して接続をテストします。
ssh git-codecommit.ap-northeast-1.amazonaws.com

下記のようなメッセージが出れば成功です。
You have successfully authenticated over SSH. You can use Git to interact with AWS CodeCommit.

9.AWSマネジメントコンソールから、CodeCommitを開き、「リポジトリを作成」を選択します。
名前に「notesapp」を入力し、その他の項目は全て空白でOKです。「作成」を選択して作成します。

10.「URLのクローン」から「SSHのクローン」を選択します。
URLがコピーされるので、メモしておきます。

11.コードをリポジトリにプッシュします。ターミナルに下記を順番に入力します。
cd notesapp
git init
git add .
git commit -m "first commit"
git remote add origin 【先ほどメモしたURL】
git branch -M main 
git push -u origin main

このように表示されれば成功です。

それぞれのコマンドは、次のような処理をしています。
git init：このフォルダをGitで管理できるようにする（初期化）
git add .：フォルダ内のすべてのファイルをアップロード対象に登録する
git commit -m "first commit"：登録したファイルに記録（コミット）を作る
git remote add origin ...：アップロード先（CodeCommitのリポジトリ）を登録する
git branch -M main：ブランチ名をmainにする
git push -u origin main：実際にコードをCodeCommitにアップロードする

プッシュが完了したら、AWSコンソールのCodeCommitでnotesappリポジトリを開いてみましょう。リポジトリの中にファイルが表示されていることを確認できます。

以上でのこの手順は完了です。

3.Amplifyパッケージをインストールする

1.  新しいターミナルを開き、次のコマンドを実行します。
npm create amplify@latest -y

  1. 次のコマンドを実行して変更内容をGitHubにプッシュします。
    git add .
    git commit -m "installing amplify"
    git push origin main

  2. CodeCommit からnotesappを開き、amplifyファイルが作成されていることを確認します。
    以上でこの手順は完了です。

 

4.AWS Amplifyを使用してアプリをデプロイする

このステップでは、先ほど作成したCodeCommitリポジトリをAWS Amplifyに接続します。これにより、AWS上でアプリをビルド、デプロイ、ホストできるようになります。

  1. Amplifyアプリを作成する
    AWSマネジメントコンソールで検索し、AWS Amplifyを開きます。こちらからも開くことができます。

2.「アプリケーションをデプロイ」を選択して開き、CodeCommitを選択して「次へ」を選択します。

3.リポジトリ：notesapp 　ブランチ：main を設定します。
4.変更せず次へを押し続け、最後に「保存してデプロイ」を選択します。

5.デプロイが完了するまで待ちます。5分ほどかかる可能性があります。

6.デプロイが完了したら、「デプロイされたURLにアクセス」を選択し、このような画面が開かれることを確認します。はじめにターミナルに出てきたURLと同じものです。

デプロイに失敗した場合

まずはエラーログを確認します。デプロイ履歴から、失敗したデプロイを選択して左側のチェックをつけます。

上にスクロールし、ビルド時間の書いてあるタブを開くことでログを確認できます。

私の場合は、このようなエラー文でした。

npm error `npm ci` can only install packages when your package.
json and package-lock.json or npm-shrinkwrap.json are in sync.
Please update your lock file with npm install before continuing.
調べたところ、「package.jsonとpackage-lock.jsonの内容が一致していない」というエラーのようです。

解決方法：npm ciをnpm installに変更する

私が実際に解決した手順はこちらです。
1.左上の表記を確認し、mainデプロイの階層から、notesapp の階層へ戻ります。
2.左側のタブから、「ホスティング」＞「ビルドの設定」を開きます。
3.「amplify.yml」 の一部を、npm ciからnpm installに書き換えて保存します。
5.再度 mainデプロイの階層へ戻り、「このバージョンを再デプロイ」を選択して、もう一度ビルドを実行します。

うまくいきましたでしょうか。

5.コード変更を自動的にデプロイする

1.Finder で「notesapp」のファイルを探します。検索を使うと探しやすいです。「notesapp 」> 「src」と進み、「App.jsx」を右クリックしてVSコードで開きます。他のコードエディタでも問題ありません。

3.ステップ5：コード変更を自動的にデプロイするからコードをコピーして「App.jsx」の中に貼り付けます。

4.ターミナルで下記を実行し、変更内容をCodeCommitにプッシュします。
git add .
git commit -m 'changes for amplify'
git push origin main

5.AWS Amplifyに戻り、デプロイが始まっていることを確認します。
6.デプロイが完了したら、「デプロイされたURLにアクセス」を選択し、内容が変わっていることを確認します。

まとめ

お疲れ様でした！本日はGitHubと連携し、AWS Amplifyを使用することで、ReactアプリケーションをAWSクラウドにデプロイしました。AWS Amplifyを使用すると、アプリケーションをクラウドに継続的にデプロイし、グローバルに利用可能なCDNでホストできます。
読者の皆様も、ここまでうまく進めましたでしょうか。遭遇したエラーや対処法などありましたら、ぜひコメントで教えていただきたいです！

次回の更新は9/18(金)を予定しています。お楽しみに！