1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-09-05

巷で有名なAmplify

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

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

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

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

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

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

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

実行環境

パッケージ バージョン
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で以下をコピペしてください。ポリシー名は何でも良いです。

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

Amplifyへデプロイ

Amplify CLIのインストール

npm install -g @aws-amplify/cli

Amplifyの設定

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

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

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

これで設定は完了です!

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

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

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

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

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

Thank you for reading

参考記事

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

https://zenn.dev/nus3/articles/89168a3485a544c792d5
https://dev.classmethod.jp/articles/amplify-next-js-isr/

1
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?