【サクッと公開】GithubとAWS Amplifyを連携してNext.jsを公開する

巷で有名なAmplify

皆さん一度は聞いたことのあるAWSのサービスではないでしょうか？

今回の記事はタイトルにも書いてあるとおり、Next.jsで作成したプロジェクトをAmplifyを使って公開する記事となります。

なので、Amplifyのメリットやデメリットについて話すのではなく、あくまで公開する記事となりますのでご了承下さい。

Amplifyでフロントエンドの環境構築を行うに当たり、パッケージの管理はyarnで行います。

また、公開するNextプロジェクトをSSG、SSRどちらで公開するかを予め決めておいてください。

SSG、SSRについての詳しい説明は、こちらの記事に書いてあります。

https://zenn.dev/rinda_1994/articles/e6d8e3150b312d#ssg

それでは早速説明していきます！

# 実行環境

|パッケージ|バージョン|
|---|---|
|Node|16.13.1|
|Yarn|1.22.11|
|next|12.1.5|
|amplify-cli|8.0.2|

# IAMユーザー・ロールの作成

ルートユーザーで行う場合、この章は飛ばしてください。

## IAMユーザー権限

まずは以下の表を下に、IAMユーザーに権限を持追加してください。

ポリシー名|
---
IAMFullAccess|
AmazonS3FullAccess|
AmazonAPIGatewayInvokeFullAccess|
AmazonDynamoDBFullAccess(DynamoDBを使う場合)|
AdministratorAccess-Amplify|
AWSCloudFormationFullAccess|

もしかしたら、いらないポリシーがあるかもしれないので、その場合はコメントにてご報告下さると幸いです。

## ロール権限

また、任意の名前で以下の権限を持ったロールを作成して下さい。

ポリシー名|
---
AmazonS3FullAccess|
CloudFrontFullAccess|
AdministratorAccess-Amplify|
AWSLambda_FullAccess|

また、インラインポリシーのJSONで以下をコピペしてください。ポリシー名は何でも良いです。

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "iam:Get*",
                "iam:List*",
                "iam:PassRole"
            ],
            "Resource": "*"
        }
    ]
}
```

# Amplifyへデプロイ

## Amplify CLIのインストール

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

## Amplifyの設定

```terminal
amplify init

Initializing new Amplify CLI version...
Done initializing new version.
Scanning for plugins...
Plugin scan successful
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project: {プロジェクト名(何でも良いです)}
? Enter a name for the environment: test
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using: react
? Source Directory Path: src
? Distribution Directory Path:
-> SSRの場合： .next
-> SSGの場合： out
? Build Command: yarn build
? Start Command: yarn start
Using default provider awscloudformation
? Do you want to use an AWS profile? (ご自身の環境に合わせて下さい)
```

これで、Amplifyの環境は整いました！

あとはホスティングの設定を行っていきましょう！！

## Amplify Hosting

```terminal
amplify add hosting

Select the plugin module to execute (Use arrow keys)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment) を選ぶ
? Choose a type Continuous deployment
❯ Continuous deployment (Git-based deployments) を選ぶ
```

するとAWS Amplifyのコンソール画面が開きます。

## Git連携

以下の表を下にGitの設定を行ってください。

設定項目|値
---|---
Host a web app| Github
リポジトリ・ブランチ|任意のリポジトリとブランチを選択

## ビルド設定

### アプリ名・環境設定

次にビルドの設定を行っていきます。

ここが**最重要ポイント**なので、お間違いのないよう設定を行って下さい！！！！

``AppName``は任意の名前を、``enviroment``は何でも良いので適当に``dev``を選んでください。

余談ですが、Amplifyは環境（ブランチ）毎に環境構築を行えるのが特徴です。この``enviroemnt``でこのブランチは開発環境・テスト環境・本番環境の判断を行えるということです。

この辺の話は別の記事で書くので今しばらくお待ち下さい。

次にロールを選ぶのですが、**最初に作成したロールを必ず選択してください**。

``Create a new role``で新しいロールを作成しないようにお願いします。

### ビルドの設定（最重要）

ビルドの設定でファイルを以下のように変更してください。

```amplify.yml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - 'yarn install --frozen-lockfile' /** ここを変える */
    build:
      commands:
        - yarn build /** ここを変える */
  artifacts:
    baseDirectory: .next or out /** ここを変える */
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

```

``baseDirectory``はSSRの場合は``.next``、SSGの場合は``out``にしてください。

### AdvancedSettings（最重要）

最後に``Advanced settings``の設定を行っていきます。

ここの設定を間違えるとビルドが行えないので、まだ気を抜かないでください！

``Live package updates``にて``Add package version overide``をクリックし,``Next.js 
 version``を選択。

Versionは``latest``を入力。

また、任意のYarnバージョンも指定してください。

## リダイレクト設定

Amplifyコンソール画面のメニューから「書き換えて、リダイレクト」から「編集」をクリックし以下のリダイレクトルールを適用。

- 送信元アドレス：``</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>``
- ターゲットアドレス：``/index.html``
- 入力：``200``

詳しくはこちらを御覧ください。

https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa

これで設定は完了です！

Githubと連携を行うことで、Gitにpushそれた場合Amplifyで自動でビルドを行ってくれるので、Vercelと同じような環境を作ることが出来ました！

先程も申し上げたのですが、Amplifyはブランチ毎に環境構築を行えるのでめちゃめちゃ便利です！！

これからはAmplifyを使っていこうかなと思います。

みなさんも良きAmplifyライフを！

以上、「【サクッと公開】GithubとAWS Amplifyを連携してNext.jsを公開する」でした！

Thank you for reading

# 参考記事

以下、参考にさせて頂いた記事となります。

・[https://zenn.dev/nus3/articles/89168a3485a544c792d5](https://zenn.dev/nus3/articles/89168a3485a544c792d5)
・[https://dev.classmethod.jp/articles/amplify-next-js-isr/](https://dev.classmethod.jp/articles/amplify-next-js-isr/)