Next.js、Amplifyで開発環境構築する話

#目次
[1.はじめに](#1-はじめに)
[2.今回やること](#2-今回やること)
[3.ご紹介](#3-ご紹介)
[4.前提条件](#4-前提条件)
[5.AWSの設定](#5-AWSの設定)
[6.Next.jsプロジェクトの作成、Amplifyの組み込み](#6-Next.jsプロジェクトの作成、Amplifyの組み込み)
[7.ソースコードの管理](#7-ソースコードの管理)
[8.ソースのホスティング](#8-ソースのホスティング)
[9.おわりに](#9-おわりに)

#1. はじめに
業務で__*Next.js*__、__*Amplify*__を扱うことになりました。
そのとき構築したことの手順をつらつらと書き綴っていきます。

本記事ではWindows10で構築しています。
#2. 今回やること
__*Next.js*__で新規プロジェクトの雛形を作成。
__*Amplify*__でWebサイトのデプロイ、ホスティング。

とりあえず開発環境を整えるというイメージで進めていきます。

#3. ご紹介
今回登場する主役2名の簡単な紹介をします。

__*Next.js*くん__
Reactをベースとしたフレームワーク。
SSR（サーバーサイドレンダリング）やファイルシステムベースのルーティングができる。
SSRを行う事によって、初期表示の読み込み速度を大幅に改善してくれる。

__*Amplify*さん__
AWSで提供されているサービス。
諸々のバックエンド構築をしてくれる。
フロントエンドとバックエンドの接続を容易にする。
静的ページのデプロイ、ホスティングを一瞬で実現できる。

#4. 前提条件
以下環境が整っていることを前提に進めていきます。

<a href="https://nodejs.org/ja/">__*nodejs*__</a>がインストールされている。
<a href="https://git-scm.com/"> __*git* 1.7.9以上__ </a>がインストールされている。
<a href="https://www.python.org/"> __*python*__</a>がインストールされている。
<a href="https://portal.aws.amazon.com/billing/signup#/start">__AWSアカウント__</a>を所持している。<a href="https://azure.microsoft.com/ja-jp/products/visual-studio-code/">
__Visual Studio Code__</a>がインストールされている。(他のエディタでも大丈夫です)


#5. AWSの設定
###AWSCLI用のユーザーを作成
AWSの下記ページにてユーザーを作成します。
<a href="https://console.aws.amazon.com/iam/home?#/users$new?step=details">ユーザー追加ページ</a>

__①ユーザー名の設定__
任意のユーザー名を設定
AWSCLI用のユーザーなので__AwsCliUser__とします。

__②アクセスの種類の選択__
AWSCLIでアクセスするので、プログラムによるアクセスは必須です。

__③次のステップを押下__
![awscliユーザー作成①.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1315897/7643e79c-05ff-9bc1-b9bd-f2b940be175a.png)

__④アクセス許可の設定__
既存のポリシーを直接アタッチを選択

__⑤アタッチするポリシーを選択__
AdministratorAccessを選択(AWSCLIを操作するために管理者権限が必要なため)

__⑥次のステップを押下__

![awscliユーザー作成②.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1315897/5ef415c7-152a-d1a4-7e2f-397926103d55.png)

__⑦次のステップを押下__
![awscliユーザー作成③.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1315897/749f0da0-f66e-5d78-8923-d576e5cd6493.png)

__⑧ユーザーの作成を押下__
![awscliユーザー作成④.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1315897/bba39945-2250-be86-0e77-9af54e326072.png)


__⑨アクセスキーIDを確認＆メモ__
__⑩シークレットアクセスキーを確認＆メモ__
![awscliユーザー作成⑤.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1315897/9390daa6-7cc5-076f-0323-0e861c7d547a.png)


:::note warn
シークレットアクセスキーは他人にみせちゃダメなやつです。
そしてシークレットアクセスキーは必ずここでメモしてください。
後から確認できないです。
:::

AWSCLI用ユーザーの作成完了です。


###Amplify用のユーザーを作成
先程と同様にユーザーの追加を行います。
ほとんど同じ操作なので、画像は省略します。

__①ユーザー名の設定__
任意のユーザー名を設定
Amplify用のユーザーなので__AmplifyUser__とします。

__②アクセスの種類の選択__
プログラムによるアクセスにチェック

__③次のステップを押下__

__④アクセス許可の設定__
既存のポリシーを直接アタッチを選択

__⑤アタッチするポリシーを選択__
<a href="https://qiita.com/mobilebiz/items/00b56c5df36cfa304f78">先人様</a>がいらっしゃったので、こちらを参考にポリシーを選択しました。

下記のポリシーを選択

* AdministratorAccess-Amplify
* IAMFullAccess
* AmazonS3FullAccess

更に追加でAmplifyの全権限を持ったインラインポリシーを設定しますがそちらは後述します。

__⑥次のステップを押下__

__⑦次のステップを押下__

__⑧ユーザーの作成を押下__

__⑨アクセスキーIDを確認＆メモ__
__⑩シークレットアクセスキーを確認＆メモ__

Amplify用ユーザーの作成完了です。

###インラインポリシーの作成と適用
先程少し話が出てきましたが、Amplifyの全権限を持ったインラインポリシーを作成しAmplifyUserに付与します。

AWSの下記ページにてポリシーを作成します。
<a href="https://console.aws.amazon.com/iam/home#/policies$new?step=edit">ポリシー作成ページ</a>

__①サービスの選択__
Amplifyを選択します。

__②許可するアクションの選択__
すべてのAmplifyアクションを選択します。

__③リソースの指定__
すべてのリソースを選択します。

__④次のステップを押下__

![ポリシー作成1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1315897/14bf5c12-b8d7-7639-15f6-10b5756547cf.png)

__⑤次のステップを押下__
タグの追加は不要です。

__⑥名前の指定__
今回はAmplifyFullAccessとする。

__⑦ポリシーの作成を押下__
![ポリシー作成2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1315897/fbbf9510-88cf-8d17-7d5e-4505c5ea95f7.png)

__⑧作成したポリシーを適用__
<a href="https://console.aws.amazon.com/iam/home#/users">ユーザー一覧</a>からAmplifyUserを選択します。
__アクセス権限の追加__から先ほど作成したAmplifyFullAccessを直接アタッチします。

最終的に下記のようになればOKです。
![ポリシー作成3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1315897/25e2c6e6-f12a-9134-e5b2-555feeb225cb.png)

###AWS CLIのインストール、ユーザーの紐付け
<a href="https://awscli.amazonaws.com/AWSCLIV2.msi">AWS CLIのインストーラをダウンロード</a>
<a href="https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-cliv2.html">くわしい手順はこちら</a>

ダウンロード後、AWS CLI をインストールします。
その後コマンドプロンプトを開いて下記コマンドを実行します。


```
aws --version
```
次のような感じでバージョンが確認できればOKです。

```
aws-cli/2.1.38 Python/3.8.8 Windows/10 exe/AMD64 prompt/off
```

次にAWS CLIとAwsCliUserを紐付けます。

__①下記コマンドを実行__

```
aws configure --profile aws-cli   
```

__②（AwsCliUserの）アクセスキーを入力__

```
AWS Access Key ID [None]:
```

__③（AwsCliUserの）シークレットアクセスキーを入力__


```
AWS Secret Access Key [None]:
```

__④ ap-northeast-1 と入力__

```
Default region name [None]:
```

__⑤ json と入力__

```
Default output format [None]:
```

__⑥下記コマンドを実行__

```
aws ec2 describe-instances --profile aws-cli
```

プロフィール情報が表示されれば完了です。
※-- More  --　と出力されている状態は ctrl+c で処理中断できます。

###Amplify CLIのインストール、ユーザーの紐付け

下記コマンドを実行し、 Amplify CLIをインストールします。

```
npm install -g @aws-amplify/cli
```

次のコマンドでバージョンが確認できればOKです

```
amplify --version
```

次にAmplify CLIとAmplifyUserを紐付けます。

__①下記コマンドを実行__

```
amplify configure
```

__②ブラウザが開いてAWSの画面へ遷移するので、コマンドプロンプトに戻る。__

__③Press Enter to continue　と表示されているので Enterを押下__

__④ap-northeast-1 を選択__
※ユーザー作成済みなのでホントは何でも良い

__⑤任意のユーザー名を入力（今回はAmplifyとしました。）__
※ユーザー作成済みなのでホントは何でも良い

__⑥IAMユーザーの作成画面が表示されますが、すでにユーザーは作成しているのでそのまま閉じてコマンドプロンプトに戻る。__

__⑦Press Enter to continue　と表示されているので Enterを押下__

__⑧（AmplifyUserの）アクセスキーIDを入力__

```
? accessKeyId:  ********************
```

__⑨（AmplifyUserの）シークレットアクセスキーを入力__

```
? secretAccessKey:  ********************
```

__⑩任意のプロファイル名を入力__
今回はAmplifyProfileとしました。

```
? Profile Name:  AmplifyProfile
```

下記メッセージが表示されたら完了です。

```
Successfully set up the new user.
```

AWSの設定が完了しました。
お疲れさまです！

#6. Next.jsプロジェクトの作成、Amplifyの組み込み

###プロジェクトの作成

__①コマンドプロンプトを開き、プロジェクトを格納したいフォルダの作成&遷移__

```
mkdir Workspace
cd Workspace
```

__②Nextjsプロジェクトの作成__


```
npx create-next-app
```

__③プロジェクト名を聞かれるので任意の名前を入力__
今回は __nextjsapp__ としました

```
? What is your project named? » nextjsapp
```

__④Visual Studio Codeでプロジェクトフォルダ(nextjs_app)を開く__
今後はVisual Studio Code内のターミナルでコマンドを実行していきます。
![VisualStudioCode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1315897/0deb20d9-d1f9-06a6-1b24-a1f57cf065f8.png)

###Amplifyの組み込み

__①下記コマンドを実行__

```
amplify init
```

__②プロジェクト名を入力__

```
Enter a name for the project (nextjsapp)
```

__③環境名を入力__

```
Enter a name for the environment (dev)
```

__④使用エディタを選択__

```
> Visual Studio Code
```

__⑤言語を選択__


```
> javascript
```

__⑥フレームワークを選択__

```
> react
```

__⑥ソースディレクトリを入力__

```
Source Directory Path:  (src)
```

__⑦ディストリビューションディレクトリを入力__

:::note warn
※outに書き換える（デフォルトだとbuild）
:::

```
Distribution Directory Path: out
```

__⑧ビルドコマンドを入力__

```
Build Command:  (npm.cmd run-script build) 
```

__⑨スタートコマンドを入力__

```
Start Command: (npm.cmd run-script start) 
```

__⑩AWSプロファイルを使用する__

```
> AWS profile
```

__⑪先ほど作成したプロファイルを選択__

```
> AmplifyProfile
```

以上でプロジェクトの作成、Amplifyの組み込みが完了しました。
お疲れ様です！

#7. ソースコードの管理

コードの管理は__CodeCommit__を利用します。
__CodeCommit__は簡単に言うとAWS上で使えるGitHubのようなものです。
役割としては同じものになります。

###リポジトリの作成とプッシュ

__①git-remote-codecommit (GRC)をインストール__
__CodeCommit__を扱うためのツールです。__*python*__がインストールされている必要があります。

```
pip install git-remote-codecommit
```



__②リポジトリを作成__

```
aws codecommit create-repository --repository-name nextjs_app
```

__③リポジトリの確認__
<a href="https://ap-northeast-1.console.aws.amazon.com/codesuite/codecommit/repositories?region=ap-northeast-1#">CodeCommit</a>でリポジトリが作成されていることを確認します。

__④リモートリポジトリ追加__

```
git remote add origin codecommit::ap-northeast-1://nextjs_app
```

__⑤プロジェクトのソースをプッシュ__

```
git push origin HEAD
```

__⑥（再）リポジトリの確認__
<a href="https://ap-northeast-1.console.aws.amazon.com/codesuite/codecommit/repositories?region=ap-northeast-1#">CodeCommit</a>でソースがアップされていることを確認します。


これでCodeCommit上でソースの管理ができるようになりました。
お疲れさまです。

#8. ソースのホスティング
Web上に今回作成したソースを公開します。

__①FrontEnd Frontend environments タブを選択__
__②AWS CodeCommit を選択__
__③Connect branch を押下__
![ホスティング①.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1315897/1280cdb7-aa5b-bb39-cfb6-99aa18c5e9aa.png)
__④リポジトリ:nextjs_appを選択__
__⑤ブランチ:mainを選択__
__⑥次へを押下__
![ホスティング②.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1315897/8309bccd-b08f-5e9e-873f-93c8e403c0c2.png)

__⑦Create New Role を押下__
![ホスティング③.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1315897/953e69ca-4e1b-86ad-f7c1-c6e92524dcb7.png)


新しいタブが開きロール作成画面が表示されます。（次へ の押下だけなので画像省略）
__⑧次のステップ: アクセス権限　を押下__
__⑨次のステップ: タグ　を押下__
__⑩次のステップ: 確認　を押下__
__⑪ロールを作成　を押下__


ロール作成後、元のページに戻って操作をします。
__⑫devを選択__
__⑬Refresh existing roles を押下__
__⑭amplifyconsole-backend-role を選択__
__⑮チェックを入れる__
__⑯次へ を押下__
![ホスティング④.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1315897/594815d9-a0dd-92a1-a758-ea1c4f99ff99.png)

__⑰保存してデプロイを押下__
![ホスティング⑤.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1315897/cda48793-bec5-43b4-ab80-292d2aa4f140.png)

__デプロイには少し時間がかかるので少々お待ち下さい__

__⑱サイトの確認__
Next.jsのプロジェクトページが表示されれば、ホスティング完了です。
![ホスティング⑥.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1315897/acdd2f01-2151-09ed-2d83-7eb0582bb811.png)
![ホスティング⑦.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1315897/58502092-b5f6-c70c-e1cc-beb08580a99b.png)


以上で全行程完了です。本当にお疲れさまでした！
あとはNextjsを思う存分楽しみましょう。

#9. おわりに
NextjsもAmplifyもコマンドを打つだけで簡単に環境を構築できるのでとても便利だなと思いました。
技術の進歩は目覚ましいです！

拙い記事でしたがここまで閲覧いただきありがとうございます。
今後も新しい技術に触れることがあればまた筆を取ると思いますのでよろしくおねがいします。

以上、したらば！