手順1
① VSCodeで新しいウィンドウを開く
② 新しいターミナルからターミナルを立ち上げ、 以下のコマンドを打ち込む。これによってreactアプリが作成されます
npx create-next-app amplifyapp
cd amplifyapp
npm run dev
③ AWSのアカウントを作成し、ルートユーザーとしてログインしておく
④ VSCodeの「フォルダを開く」からamplifyappフォルダを選択し、そこでもターミナルを開く
⑤ 確認のため、新しく開いたVSCodeのウィンドウでもターミナルに npm start と打ち込み、ブラウザが自動で立ち上がるか確認する。立ち上がればアプリ作成ができています。以下のようになるはずです
⑥ AWSマネジメントコンソールを開き、検索欄にaws-amplifyと打ち込む。選択肢からaws-amplifyを選択し、開く。右にある「新しいアプリケーション」の「アプリケーションをホスト」を選択する。そしてgithubを選択し、「続行」ボタンを押せば「認証に成功しました。」と出てきます。（このタブは以降使用するので閉じないでください）
⑦ githubを開き、以下の写真のように新しいレポジトリを作成する。
⑧以下の写真の「…or create a new repository on the command line」の部分をコピーし、ターミナルに貼り付け、実行する。
⑨aws-amplifyコンソールに戻り一度リロードをして、「最近更新されたリポジトリ」で作成したレポジトリを選択し、ブランチを main にして「次へ」ボタンを押す。その後のビルドの設定と確認は何も変更せずに「保存してデプロイ」ボタンを押す。
⑩プロビジョン、構築、デプロイという３つの段階がありますが、デプロイまで進んだ状態でそれらの表示の左隣にあるリンクを押すと以下のような画面が出てきます。これが表示されればデプロイは完了です。
最後にコードの変更を自動的にデプロイできるようにします。どこかファイルの適当なところを変更した上でターミナルで以下のコードを打ち込むことで自動デプロイができるようになります。
git add .
git commit -m “auto-deploy”
git push origin main
amplifyコンソールを開き、デプロイまで進んでいることを確認し、以下のようにauto-deployと表示されていれば完了です。
