AWS Amplify Consoleを使ってみた

こんにちは、山下です。

新しいHP・ブログの技術スタックの記事でご紹介した通り、このHP・ブログはAWS Amplify Consoleでホスティングしています。

実際に利用して気がついた便利なところ・困ったところをご紹介します。

便利なところ

ビルド・デプロイ設定が簡単

前回の記事でも触れましたが、ビルド・デプロイ設定が非常に簡単です。 対象ブランチに設定ファイルをコミットするだけで完了です。

下記はNuxt.jsの yarn generate で出力した dist の資材をデプロイする設定です。

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn generate
  artifacts:
    baseDirectory: /dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

複数環境をデプロイできる

Amplify Consoleでは、Gitブランチと環境を紐付けることで、複数の環境を簡単に構築することができます。

弊社の場合は下記のブランチ構成になっており、開発環境で追加機能を動作確認した後、deployment/productionにマージすることで本番環境にデプロイされます。

• master: 開発環境
• deployment/production: 本番環境

例えばステージング環境を追加したくなった場合、deployment/staging ブランチを追加して紐付けすることで、簡単に新しい環境を追加できます。

PRベースで環境をデプロイできる

Amplify Consoleのプレビュー機能を利用すると、GitのPRベースで個別の環境を自動的に用意することができます。 レビュアーは別途ローカルでサーバーを立ち上げることなくスムーズにレビューすることができ、レビューが完了してPRがマージされると自動的に環境が削除されます。

Basic認証を設定できる

Amplify Consoleのアクセスコントロール機能を利用すると、「開発環境だけBasic認証を有効化する」ことが可能です。

ワンクリックでカスタムドメイン・SSL証明書を設定できる

同一アカウントのRoute53でドメインを管理している場合、ドメイン設定(CNAME)やSSL証明書発行等をGUI上で数クリックで設定できます。

環境変数を設定できる

GAのトラッキングIDを開発環境・本番環境でわけるのに利用しています。

困ったところ

実際に困ったところを書いていきます。末尾が (？) になっている部分は、本当は解決方法があるのかもしれません。 知っている方いらっしゃったら、教えていただけると助かります！

キャッシュバーストできない

OGP画像をUPする前に該当URLにアクセスして404がキャッシュされちゃったからなのか、開発環境では画像が表示され、本番環境で表示されないという現象が発生しました。 1日経っても改善せず、GUI上でもキャッシュバーストの項目がなかったため、画像URLを変更して対応しました。

リダイレクト設定の正規表現が上手く動作しない（？）

末尾が/でない場合、末尾に/をつけてリダイレクトする という要件を満たしたくて、 ^(?!.*/$)(.*)$ のような正規表現を書いてみたのですが、一般的に $1/ で表現されるようなマッチした文字列の再利用方法がわかりませんでした。

結局、アプリ側で必ず末尾に / を付与してリンクする対応を入れました。

WebPがホスティングできない（？）

<picture> タグによるWebP対応を追加したところ、ローカルでは上手くいくのですがAmplify Consoleのホスティングサーバー上では404になってしまいました。

IAMポリシーが設定できない（？）

通常、AWSの一部の機能の権限を制御したい場合はIAMポリシーが用意されているのですが、Amplify Consoleのポリシーが見つからなかったため、例えば特定のユーザーやグループを読み取り専用にしたいなどの実現方法がわかりませんでした。

おわりに

Amplify Consoleは非常に簡単に静的サイトが構築できるのでシンプルなサイトでの利用はとてもオススメできます。 反面、細かいリダイレクト・キャッシュ制御がしたい場合は、別の選択肢を考えてもいいかもしれません。

AWSは日々改善を続けているので、今後の改善も継続的に追っていきましょう！

‍