巷で有名な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
で新しいロールを作成しないようにお願いします。
ビルドの設定(最重要)
ビルドの設定でファイルを以下のように変更してください。
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/