Zenn
📚

AWS Amplifyコンソールで NuxtJSをSSGで公開する

2021/09/21に公開
#
amplifyconsole
tech

概要

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の公式はこちらです。
https://docs.amplify.aws/guides/hosting/nuxt/q/platform/js/

手順

GitHubのNuxtのSSGのリポジトリをdeployする

mainのブランチをdeployします。
https://github.com/junara/nuxt-amplify/tree/main

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します。また、検証環境なのでベーシック認証もかけます。

https://github.com/junara/nuxt-amplify/tree/staging

  • ブランチに接続
  • ブランチを選択する（今回はstaging）
  • 保存してdeploy
  • アクセスコントロールを押す
  • アクセスの管理
  • パスワード（ベーシック認証です）をかけたいブランチのdeployに制限をかける
  • 確認（staging環境のdeployにアクセスし、上記のユーザー名とパスワードを入力する）


Discussion