自習伝説(オレでんせつ)・特攻(ぶっこみ)のAmplify+Next.js13

:::note warn
兎に角、Amplifyを試したい方へ！
:::

# "待(ま)"ってたぜェ!!この"瞬間(とき)"をよぉ

社内でSandBoxアカウントを頂いたので、前々から試したかったNext.jsによる Amplify ホスティングをやってみたいと思います。

# !? (Next.jsアプリの用意)
まずローカルにNext.jsのアプリケーションを作成します。
適当なフォルダへ移動し、下記のコマンドを実行します。

```bash
yarn create next-app
```

上記コマンドを実行すると、対話式に質問が
```bash
$ yarn create next-app
yarn create v1.22.19
warning package.json: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-next-app@13.4.10" with binaries:
      - create-next-app
✔ What is your project named? … amplify-test-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
Creating a new Next.js app in /Users/●●/development/my/amplify-test-app.

Using yarn.
＜＜省略＞＞
✨  Done in 21.27s.
Initialized a git repository.

Success! Created amplify-test-app at /Users/●●/development/my/amplify-test-app

✨  Done in 6620.18s.
```

兎に角、速攻でAmplifyを試したい私は、対話の問いについて下記のように回答しました。

| 質問 | 回答 | 補足 |
| --- | --- | --- |
| project named?                      | amplify-test-app | この名前のフォルダが作成される |
| use TypeScript?                     | Yes | Amplify試すだけとはいえ、習慣として有効に。 |
| use ESLint?                         | Yes | Amplify試すだけとはいえ、習慣として有効に。 | 
| use Tailwind CSS?                   | No  | |
| use `src/` directory?               | Yes | ソースファイルはまとまっていた方がきれい。 |
| use App Router?                     | Yes | |
| customize the default import alias? | No  | |

### !?? (ローカルにて確認)

```bash
cd amplify-test-app
yarn dev
```

シェルは下記のような表示となり、実行中になります。
止める場合は、Ctrl + c キー同時押しです。
```bash
$ yarn dev
yarn run v1.22.19
warning ../../../package.json: No license field
$ next dev
- ready started server on 0.0.0.0:3000, url: http://localhost:3000
warning ../../../package.json: No license field
- event compiled client and server successfully in 175 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 200 ms (20 modules)
- wait compiling /page (client and server)...
- event compiled client and server successfully in 2.1s (486 modules)
- wait compiling /favicon.ico/route (client and server)...
- event compiled client and server successfully in 413 ms (523 modules)
```

上記には `http://localhost:3000` というURLが表示されているので、ブラウザからアクセスすると、かっこいい初期画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42530/6b859022-98e0-3ad7-7837-1260fbe88f92.png)

# !!? (GitHubリポジトリ作成)

GitHubブランチと連携してデプロイができるので、試してみます。
他愛ない内容ですが、今回はプライベートリポジトリとします。

### !!??(ローカルのプロジェクトフォルダをGitリポジトリとして作成)
すみません、私は SourceTreeを使っており、特別なにか設定しているわけではないので、スクリーンショットを取ってません。
上記のNext.js 作成コマンドを実行すれば.gitignoreは自動生成されるので、普段使用しているPhpStorm用のフォルダ（.idea）を無視リストへ追加しただけです。

# !!!? (いよいよAmplifyを触る)
AWSコンソールから`AWS Amplify`へアクセスします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42530/69102bec-3140-0ba5-9c6b-eec8e85461bb.png)

### !!!?? （ウェブアプリケーションをホスト）
「新しいアプリケーション」ボタンから「ウェブアプリケーションをホスト」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42530/02b4f988-b663-b26f-3b46-21cca96a8b2f.png)

ここで、ソース・ファイルをどこから持ってくるか設定します。先述どおりGitHubからにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42530/0c4c3de0-435c-183c-4e96-cf8a7ab003f7.png)

そうすると、GitHubへの権限付与操作の画面が表示されますので、`Authorize AWS Amplify`ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42530/9c39b2d6-5c1b-50f7-9f0d-71128fa36ac9.png)

`GitHub の認証が成功しました。`と表示されたので、リポジトリを選択しようとしても、リストに含まれてませんでした。
そこで、`GitHub のアクセス許可を表示`ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42530/a9bb5c9d-3ad6-5bfc-96bb-0701d450a1e6.png)

下記のような画面が表示されています。
今回デプロイしたいリポジトリは私個人のプライベートリポジトリなので、リストにある自分の名前をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42530/885d7ec1-d6bb-45fe-0282-1b3243d30089.png)


続いて、どのリポジトリを使用するか選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42530/e16c626b-2bf2-5aa8-1185-ec4874970837.png)

Amplifyコンソールに戻り、プルダウンには先程設定したリポジトリが表示されるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42530/37693880-7188-5199-945b-667c00870df1.png)

ビルドの設定を行います。
IAMロールの作成または既存のロールを選択します。今回は既に作成されていたものを選択しております。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42530/c41ada7b-e0ce-1609-e527-8e892f1fb6b9.png)

確認画面となります。
「フレームワーク」が自動的に`Next.js - SSR` と認識されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42530/c4320607-ceea-5828-2da4-745cd5a3ad28.png)

「保存してデプロイ」ボタンを押すと画面が変わり、しばらく待つとプロビジョン→構築を経てデプロイされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42530/1fb7a188-89e4-bad8-e5e1-cef842c06580.png)

### !!!??? (デプロイ結果)

AmplifyコンソールにあったURLをクリックすると、ローカルで表示できていた初期画面がAmplifyにて表示できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42530/4e0ef99f-a3d2-b3e6-6618-01256b97b96c.png)

# 今後の課題

今回はNext.jsアプリをAmplifyでホスティングしてみましたが、本来やりたかったAmpify CLIから実行してみたり、SSRではなくSPAでの挙動を確認していきたいと思っております。