AWS Amplify で Docusaurus を動かしてみる

本当は AppRunner を使いたかったけれど、ソースが Github か コンテナ(ECR) だったので、諸事情により泣く泣く Amplify で検討する。

AWS Amplify

イメージとしては AppRunner 含め Netlify、Vercel みたいなことができるよというサービス。
個人利用であれば上記無料利用枠でホスティングサービスを利用したほうが良いだろう、AWS Amplify を使うメリットは AWS 内で使えるという点。

料金

料金表にある通り。
AWS Amplify 料金

ビルド・デプロイ処理時間単位の重量課金と、ホスティングルトレージ、ホスティングサービス、これはトラフィックに近いイメージかな?
上記にはビルド元の料金は含まれてないので CodeCommit を利用する場合はまた別途かかる。

また Amplify には下記のようにアプリケーション数やドメイン、ブランチ数、サイズ等の制限があるので確認しておく。
AWS Amplify - サービスクォータ

Docusaurus の準備

Docusaurus については本家を参照。
Docusaurus - Installation

とりあえずローカルにインストールし

> npx @docusaurus/init@latest init my-website classic

CodeCommit を用意してそこに配置する。

リポジトリの用意

CodeCommit 上にリポジトリを用意し

リポジトリに対して利用する IAM ユーザーに権限、認証情報を用意する。
Git 認証情報を使用した HTTPS ユーザーのセットアップ

インストールした素の Docusaurus をプッシュする。

Amplify のセットアップ

Host your web app

先程作成した CodeCommit リポジトリを選択。
検証なのでブランチは master そのまま、開発環境と分けて利用していきたい場合はブランチ戦略に合わせて指定する。


ビルド設定の構成

ビルド設定。デフォルトで JS 用のビルド定義が選定されているので、Docusaurus に合わせて commandsbaseDirectory を変更する。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: build/
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

その他オプションとして指定のビルド用 Docker を指定したり、環境変数を指定できる。
この辺は Codeシリーズ でおなじみだね。

デプロイ

設定内容を確認して問題なければごーごー!

完了すると下記のような画面になり、右下の amplify.app URL からサイトの表示を確認できる。
画面だけみてると Netlify 等々と大きく違いはなく、似たいような体験でアプリをデプロイできると思う。


Amplify 自体はバックエンドに S3 の Web ホスティング、CloudFront を利用してるとのことだが、各サービスページにアクセスしてもそれっぽいのが見つからなかったので、ユーザー側でカスタマイズや設定の変更等操作はできなさそうだ。

Admin UI

Amplify はここまでの機能でも

  • カスタムドメイン設定
  • ビルド設定
  • メール設定
  • Webhook
  • リダイレクト設定
  • カスタムヘッダ
  • アクセスコントロール(ベーシック認証)

と十分機能があるが、Admin UI を利用することでさらに、アプリに対する細かい権限設定や機能追加等ができるようになる。
AWS Amplify Admin UI: アプリケーションのバックエンド開発を支援し、クラウドの経験を必要としない管理ツール

追加料金はかからない・・・のかな?記載がないのでわからない。でもバックエンドで実は○○使ってるのでそちら料金はかかりますとかありそう。
Admin UI を利用すると、追加で欲しい機能を簡単なコードでAWSサービスと連携して追加できる。という感じらしい。

ただちょっと環境依存度が上がってしまうので、どうしても、という場合に使う感じかな?
Amplify 便利だけど当然小回り利かそうとすると当然手間がかかるので、要検討かな。

Share Comments
comments powered by Disqus