📚
AWS Amplifyコンソールで NuxtJSをSSGで公開する
概要
Firabase hostingを使っていたのですが、AWSのAmplify コンソールでもできるとのことなので早速試しました。
手軽さだとFirebase hosting。
しかし、AWS Amplify コンソールはci/cdと検証環境(今回はstaging環境と称します)がよい。
ci/cdはGitHubと連動できます。GitHubにpushすると連動してテストやdeployが走る仕組みが最初から用意されています。今回の事例だと static site generateされてdist配下が公開されます。
複数ブランチにも対応しています。本番とは別にstaging環境がある場合は、staging専用のブランチをよういして、pushすれば同様にdeployがはしります。
あと、重宝するのはベーシック認証、ブランチ毎にベーシック認証がかけれます。これfirebase hostingだと一工夫必要なやつなのでとても助かります。
NuxtのSSGのdeployを事例にして下記の手順で図で示します。
- GitHubのNuxtのSSGのリポジトリを公開する
- CloudFront配信してもらう
- Staging環境とパスワードを設定
価格比較
両者ほぼ同じです。
ただし、ここにはのせていませんがGoogle Firebaseは無料枠があるので、色々試すには無料内で収まるAdbantageがあります。
項目 | Google Firebase Hosting (従量制 Blaze プランの値を参照しました。) | AWS Amplify Console |
---|---|---|
ストレージ | $0.026/GB | 1 GB あたり 0.023USD/月 |
Data transfer | $0.15/GB | 1 GB あたり0.15USD |
ビルド & デプロイ | - | 0.01USD/ビルド分 |
- 参考
- AWS Amplify Price https://aws.amazon.com/jp/amplify/pricing/
- Google Firebase https://firebase.google.com/pricing?hl=ja
ドキュメント
AWSの公式はこちらです。
手順
GitHubのNuxtのSSGのリポジトリをdeployする
mainのブランチをdeployします。
- Amplifyをはじめる
https://ap-northeast-1.console.aws.amazon.com/amplify
- Deliverを選ぶ
- GitHubを選ぶ
- Nuxtのレポジトリと本番のブランチを選択する。(staging用は後で選択します)
- build commandsを編集
version: 1
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn run generate
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*
-
保存してdeploy
-
数分待つ
-
下記の画面担ったらdeploy完了です。左下のURLにアクセスするとNuxtのdefaultの画面がでれば成功です。
CloudFront配信してもらう
- Custom headersにアクセス
- Edit
- s-maxageを設定する。(例は24時間)
customHeaders:
- pattern: '**/*'
headers:
- key: 'Cache-Control'
value: 'public, max-age=0, s-maxage=86400'
- CloudFrontからアクセスされていることを確認。NRTとなっているので東京のサーバーから配信されていることがわかります。
Staging環境とパスワードを設定
stagingのようのブランチをdeployします。また、検証環境なのでベーシック認証もかけます。
- ブランチに接続
- ブランチを選択する(今回はstaging)
- 保存してdeploy
- アクセスコントロールを押す
- アクセスの管理
- パスワード(ベーシック認証です)をかけたいブランチのdeployに制限をかける
- 確認(staging環境のdeployにアクセスし、上記のユーザー名とパスワードを入力する)
Discussion