AWS Amplify Reactアプリをデプロイするチュートリアルをやってみた

初めに

最近 React を学習しています。React アプリをどのように Amplify でデプロイするのか知りたかったので、以下のチュートリアルをやってみました。

ローカルで作成した React アプリを GitHub にプッシュする

ローカルでReact アプリを作成します。

PS C:\tutorial> npx create-react-app amplifyapp
PS C:\tutorial> cd amplifyapp

GitHub に リポジトリを作成し、プッシュします。ssh 接続がうまくいかなかったので https にしました。

PS C:\tutorial\amplifyapp> git init
PS C:\tutorial\amplifyapp> git remote add origin https://github.com/username/amplifyapp.git
PS C:\tutorial\amplifyapp> git add .
PS C:\tutorial\amplifyapp> git commit -m "initial commit"
PS C:\tutorial\amplifyapp> git push origin master

リポジトリにプッシュされたファイル・ディレクトリは以下のようになっています。

Amplify でアプリケーションをデプロイする

「Host your web app」の「Get started」をクリックします。

GitHub を選択します。

作成したリポジトリを選択します。

そのまま「次へ」をクリックします。

「保存してデプロイ」をクリックします。

「検証」まで完了したら、URLをクリックしアプリケーションを確認します。

関連づけているブランチに変更をプッシュすると自動でビルド・デプロイされます。

チュートリアルでハマったところ

GitHub にプッシュするところでハマりました。

GitHub の操作が不慣れですが、以下のコマンドはリモートリポジトリをローカルで操作するためのコマンドのようです。

PS C:\tutorial\amplifyapp> git remote add origin [e-mail]:username/amplifyapp.git
PS C:\tutorial\amplifyapp> git push -u origin main

これは ssh 接続するのですが、以下のようなエラーが表示されました。

[e-mail]: Permission denied (publickey).

.ssh/config に以下を追加し、リモートリポジトリにも公開鍵を設定したのですがうまくいきませんでした。

Host github github.com
    HostName github.com
    IdentityFile C:/Users/username/.ssh/path/to/id_rsa
    User git

なお、ローカルにリポジトリが既に登録されている状態で https に切り替えようとすると以下のようなエラーが出ます。

PS C:\tutorial\amplifyapp> git remote add origin https://github.com/username/amplifyapp.git
fatal: remote origin already exists.

この場合、以下のように参照しているリモートリポジトリを削除します。最初リモートリポジトリが削除されてしまうのでは、と思いましたがしっかり公式ドキュメントに記載がありました。

メモ: git remote rm はリモートリポジトリをサーバから削除するわけではありません。 リモートとその参照をローカルリポジトリから削除するだけです。

PS C:\tutorial\amplifyapp> git remote rm origin
PS C:\tutorial\amplifyapp> git remote add origin https://github.com/username/amplifyapp.git

参考記事