Next.jsでSSGしたサイトをAmplifyでホスティングする

概要

Amplifyってフレームワークとかもあるんですが、ホスティングサービスとしてのみ使うこともできます。
今回はNext.jsでSSGしたサイトをAmplifyでお手軽にホスティングする方法の紹介。

比較対象

比較対象としては、NetlifyとかVercelと同じ感じのサービスです。
基本的にリポジトリを連携しておけば、pushごとに自動でデプロイしてくれます。
もちろん、HTTPS + 独自ドメインも（Route53も使って）ぽちぽちするだけで完了します。

差分で言うと、

• NetlifyやVercel
  • 無料枠がある。
  • 一人で作ってサクッと公開するサイトとかであれば完全無料で完結することも。
• Vercel
  • 無料枠でも、Fair Use Policy - Vercel Documentationの範疇であればデータトランスファーが無制限。
• Amplify
  • 無料枠がない（初期の1年の無料枠はあるけど）、おなじみの従量課金。
  • 課金はデプロイ時間とデータトランスファーに対して。
    • AWS Amplify の料金 - アマゾン ウェブ サービス
  • 開発するだけならほとんど無料に近い金額（数十円とか）
  • 他と違ってチームメンバーに制限が無かったり、Basic認証無料でかけられたりする。

手順

基本的なデプロイは

1. GitHubなどリポジトリホスティングサービスとの連携
2. ビルド設定の登録

だけ。

これは本当に数分で終わります。

1. リポジトリ連携

1. Amplify開き、右上の「アプリを作成」押す。
2. From your existing code の中から自分の選ぶ。
3. OAuth認証する。
4. デプロイしたいリポジトリ選ぶ。
5. ブランチ選ぶ。とりあえずmasterで良い。

2. ビルド設定

ビルド設定というのは、コードがpushされたときに自動で走るビルドコマンドの指定です。
ありがたいことにNextを見つけるとNext用のymlをデフォルトで用意してくれるのですが、next exportの場合はちょっと修正が必要です。

amplify.yml

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci --production=false
    build:
      commands:
        - npm run export
  artifacts:
    baseDirectory: out
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*

• npm ci --production=false
  • 基本的にビルドに必要なものは devDpendenciesに入れてると思うんですが、デフォルトでビルド環境のNODE_ENVがproductionなので、--production=falseで必ず入るようにしてます。
  • ビルド時の環境変数が設定できるので、NODE_ENV=developmentも設定できますが、コード内でNODE_ENVで出しわけとかしてる場合はdevelopmentしか使えなくなって不便なので、ここは何が来てもビルドが通るように。
• npm run export
  • ここは各自いい感じに。
• out
  • これも各自の環境に合わせて。

ちなみに、これWebコンソール上で設定できますが、リポジトリルートに amplify.ymlが置いてある場合はそっちが優先で読まれます。
Git管理したいですよね。

ちなみに、Webコンソール上のamplify.ymlにコメント（言語かかわらず）を書くとWebコンソールそのもののjsがエラーで止まって閲覧/操作できなくなるので気をつけてくださいw
近いうち直るかなー

完了

あとは「保存してデプロイ」押せば完了です。
これ以降、接続してあるブランチにはpushするたびに自動でデプロイが走ります。

ブランチの追加

最初にmasterを選択しましたが、別のブランチもデプロイしたい場合は、いつでも追加できます。
アプリのトップページで「ブランチの接続」を押してブランチを選ぶだけです。

「1ブランチ = 1デプロイ」なので、一つのブランチから複数のデプロイを作ることは出来ません。

ブランチの接続解除

「アプリの設定 > 全般」の一番下にブランチというゾーンがあるので、そこで消したいブランチを選択して「アクション > ブランチの接続解除」を押すだけ。
masterも解除できる。

解除するとデプロイが消えます。

ロールバック

ブランチの詳細ページに飛んで、「このバージョンを再デプロイ」ボタンを押せば、いつでも好きなバージョンに戻すことができます。

HTTPS + 独自ドメイン

独自ドメインを当てると、自動でHTTPSで繋がる用意をしてくれます。楽〜
「アプリの設定 > ドメイン管理」の右上の「カスタムドメインの追加」を押すと、Route53で管理しているドメインが出てくるので、選んで保存するだけ。
自動で証明書の設定などが進み、しばらくすると開通してます。楽〜

環境変数

任意の環境変数を、ブランチごとに設定できます。
「アプリの設定 > 環境変数」から。

BASIC認証

無料でかけられるし、コードの修正も不要。
「アプリの設定 > アクセスコントロール」から。

おしまい

これだけ！
数年前Netlifyを最初に使った時はお手軽さに感動しましたね。
それと同じ感じでホスティング出来るAmplifyでした。