はじめに

本書を手にとっていただきありがとうございます。Amplify Consoleを利用してWebサイト・Webアプリケーションのホスティングを検討している方や、既に活用されている方に対して、Amplify Consoleを現場で運用して得られた知見を共有したいと考えて本書を執筆しました。


Amplify Consoleを使えば、フロントエンド開発のベストプラクティスを手軽に導入できます。Amplify Consoleの登場以前は、AWSであればS3、CloudFront、CodeBuildなどを組み合わせたCI/CDパイプラインを自前で構築する必要がありました。Amplify Consoleの登場によって、それらの構築は不要になりました。それだけでなく、Pull Requestの作成に応じたWeb Previewやコミットごとのキャッシュの自動的な即時無効化などの機能も提供されています。


しかし、Amplify Consoleは登場してから日の浅いサービスでもあります。便利な一方で、通知やビルドの設定で悩まされることは誰もが通る道です。また、Amplifyファミリー、特にAmplify CLIと混同することで、検索がしづらくなっている面も否めません。そうした状況で、本書が少しでもAmplify Consoleを実践するための助けになれば幸いです。


筆者は2019年に業務でAmplify Consoleを導入して以来、半年のうちに3つ以上のAWSアカウントで合計20以上のWebアプリケーションをセットアップしてきました。少人数のチームで多くのアプリケーションを管理するために、Amplify Consoleの機能の活用、CloudFormationおよびAWS CDKを使った一括管理、様々なトラブルシューティングを行ってきました。


本書では、そうした経験から得られたAmplify Consoleを扱う上での知見を共有します。これからAmplify Consoleに触る方も、既にAmplify Consoleを導入されている方も、Amplify Consoleを実践する上で何らかの発見があれば幸いです。

本書で扱うこと

  • Amplify Consoleの基本的な機能
  • Amplify Consoleを実践するための知見
  • Amplify Consoleに関するトラブルシューティング

本書で扱わないこと

  • Amplify Consoleのチュートリアル
  • Amplify Framework(Amplify CLIなど)を利用した開発

本書の構成

基本的な機能を紹介する前半と、実践した上での知見をご紹介する後半に分かれています。

前半の第1章では静的WebホスティングとAmplify Consoleについて、第2章ではAmplify Consoleの基本的な機能についてご紹介します。後半の第3章ではAmplify ConsoleとCloudFormation・AWS CDKについて、第4章では実践する上でのテクニックをご紹介します。また、第5章では筆者が対応したトラブルシューティングを簡単にご紹介します。

意見と質問

本書はAWSドキュメントやサポートに確認した内容をもとに執筆していますが、誤りや不正確な表現に気づかれることもあるかと思います。また、本書で紹介するやり方よりもよいやり方をご存知の方もいるかもしれません。そうした点については、今後の版で随時更新させていただきたいのでお知らせいただけると幸いです。ご意見だけでなく質問も大歓迎です。連絡先を以下に記します。

免責

本書は情報の提供のみを目的としています。
本書の内容を実行・適用・運用したことで何が起きようとも、それは実行・適用・運用した人自身の責任 であり、著者や関係者はいかなる責任も負いません。

商標

本書に登場するシステム名や製品名は、関係各社の商標または登録商標です。
また本書では、™、®、© などのマークは省略しています。

目次

はじめに

本書で扱うこと
本書で扱わないこと
本書の構成
意見と質問
免責
商標

第1章 入門Amplify Console

1.1 Amplify Console
  • 静的 Web ホスティングサービス
  • Amplify Console
  • Amplify Console 以外の静的 Web ホスティングサービス
1.2 Amplify ファミリーと Amplify Console
【コラム】静的ウェブホスティングという分類について

第2章 Amplify Consoleの機能

2.1 インテグレーション
  • Incoming Webhook のユースケース
  • Pull Request の Web Preview について
2.2 ビルド
  • ビルドの通知の悩み
2.3 ホスティング
2.4 Amplify Console vs CloudFront+S3 の機能比較

第3章 Amplify Consoleを支援するツール

3.1 AWS CLI
3.2 Amplify CLI
3.3 CloudFormation & AWS CDK
3.4 Terraform

第 4 章 実践 Amplify Console

4.1 ビルド設定のカスタマイズ
  • マネジメントコンソール以外から独自の Docker イメージを使用する
  • サービスロールの変更
  • メール以外の通知
4.2 アイデア集
  • メンテナンス画面の表示
  • ビルド中にスイッチロール
4.3 プライベートなGitSubmodule

第5章 トラブルシューティング

5.1 アプリケーションのセットアップに関するトラブル
  • カスタムドメインのセットアップ時、CNAME が既に存在するエラー
  • GitHubリポジトリにWebhookのゴミが残ってしまう
  • GitHubリポジトリのWebhookを誤って削除してしまった
5.2 ビルドに関するトラブル
  • GitHubでWebPreviewのステータスが更新されない場合
  • GitHubでWebPreviewが実行されない場合
  • GitHub で Pull Request の Target Branch 変更後、Web Preview が有効にならな い場合
  • マネジメントコンソールにビルドのステータスが表示されない

付録 A 巨人の肩の上に乗る

あとがき

謝辞
著者紹介

奥付

1
入門Amplify Console

Amplify Consoleは、AWSの静的Webホスティングサービスです。NetlifyやVercel、Firebase Hostingらと同様に、GitHubなどと連携したCI/CDパイプライン・ホスティング・CDNを備えています。それらのサービスとの対比に加え、AWSのサービスの中でどう位置づけられるかも合わせて見ていきましょう。

1.1Amplify Console

静的Webホスティングサービス

本書における静的Webホスティングサービスとは、Gitリポジトリと連携したCI/CDパイプラインを備え、SPAや静的サイトをデプロイできるサービスをいいます。

代表的な静的WebホスティングサービスであるNetlifyは、2015年4月に、MakerLoop, Inc.(現: Netlify, Inc.)からリリースされました。*1

Netlifyは日本では2016年頃から徐々に利用されているようです。例えば、Netlifyに関する一番古いQiitaの記事は2016年8月18日に投稿されています。*2当時はAmplify Consoleがなかったので、AWSでCloudFront+S3を運用している方がNetlifyのシンプルさに惹かれるということもあったようです。*3*4

Amplify Console

Amplify Consoleは、2018年11月にAWSからリリースされた静的Webホスティングサービスです。*62019年4月に東京リージョンでも使えるようになりました。

CloudFrontとS3とCodeBuildの設定を自動化したサービスと言えるかもしれません。ただし、CloudFrontのディストリビューションやS3のバケットはAWSが管理するAWSアカウント内に作成されるので、私達が気にする必要はありません。

ここはjustInCaseで許可取ってから載せる実際にAmplify Console で構築したサービスをWappalyzer*5で検索すると、CloudFrontとS3で構築されています。

Amplify Console以外の静的Webホスティングサービス

2020年9月現在、大手クラウドベンダーのサービスを含めた複数の静的Webホスティングサービスがあります。

  • AWS Amplify Console
  • Firebase Hosting
  • Azure Static Web Apps
  • Netlify
  • Vercel*7

[*2] 高機能ホスティングサービスNetlifyについて調べて使ってみた(https://qiita.com/TakahiRoyte/items/b7c4d1581df1a17a93fb)(戻る

[*3] HTTPSの静的コンテンツをホストするならs3よりNetlifyが俺の求めていたものだった(https://qiita.com/shogomuranushi/items/6ab5bc29923b3f82c9ed)(戻る

[*4] ちなみにNetlifyのインフラはAWSです。(戻る

[*5] Webサイトの技術スタックを解析するアプリケーション(https://www.wappalyzer.com/)(戻る

試し読みはここまでです。
この続きは、製品版でお楽しみください。