AWS Amplifyコンソールユーザーガイド

AWS Amplify: コンソールユーザーガイドCopyright © 2020 Amazon Web Services, Inc. and/or its affiliates. All rights reserved.

AWS Amplify コンソールユーザーガイド

Amazon's trademarks and trade dress may not be used in connection with any product or service that is not Amazon's,in any manner that is likely to cause confusion among customers, or in any manner that disparages or discreditsAmazon. All other trademarks not owned by Amazon are the property of their respective owners, who may or may notbe affiliated with, connected to, or sponsored by Amazon.

AWS Amplify コンソールユーザーガイド

Table of ContentsAWS Amplify コンソールとは? ............................................................................................................. 1

最新のウェブアプリケーションとは? ............................................................................................. 1Amplify コンソール機能 ............................................................................................................... 1次のステップ ............................................................................................................................. 2

開始方法 ............................................................................................................................................ 3ステップ 1: リポジトリの接続 ...................................................................................................... 3ステップ 2: フロントエンドのビルド設定を確認する ........................................................................ 4ステップ 3: バックエンドのビルド設定を確認する ........................................................................... 5ステップ 4: 環境変数を追加する (オプション) ................................................................................. 6ステップ 5: 保存してデプロイする ................................................................................................ 6次のステップ ............................................................................................................................. 7

カスタムドメインのセットアップ .......................................................................................................... 8Amazon Route 53 で管理されているカスタムドメインを追加する ...................................................... 8サードパーティーの DNS プロバイダーによって管理されているカスタムドメインの追加 ...................... 9サブドメインを追加する ............................................................................................................ 11トラブルシューティングガイド ................................................................................................... 12

技術用語 .......................................................................................................................... 13CNAME が解決されたことを確認する方法 ............................................................................ 14サードパーティーでホストされているドメインが [Pending Verification] 状態のままになっている .. 15AWS Route53 でホストされているドメインが [Pending Verification] 状態のままになっている ...... 15CNAMEAlreadyExistsException エラー ................................................................................. 16

サードパーティーのカスタムドメインに接続する ................................................................................... 17GoDaddy ドメインに接続する .................................................................................................... 17Google ドメインに接続する ....................................................................................................... 20

ビルド設定の構成 .............................................................................................................................. 21YML 仕様の構文 ....................................................................................................................... 21ブランチ固有のビルド設定 ......................................................................................................... 22サブフォルダに移動する ............................................................................................................ 22フロントエンドでバックエンドをデプロイする .............................................................................. 23出力フォルダの設定 .................................................................................................................. 23ビルドの一部としてパッケージをインストールする ........................................................................ 23プライベート npm レジストリを使用する ..................................................................................... 24OS パッケージのインストール .................................................................................................... 24ビルドごとのキーと値のストレージ ............................................................................................. 24自動ビルドを無効にする ............................................................................................................ 24

フルスタックのサーバーレスウェブアプリケーションのデプロイ ............................................................. 25機能ブランチのデプロイ .................................................................................................................... 28

Amplify CLI バックエンド環境を使用したチームワークフロー .......................................................... 28機能ブランチのワークフロー .............................................................................................. 13GitFlow ワークフロー ........................................................................................................ 32開発者ごとのサンドボックス .............................................................................................. 32

パターンベースのブランチ機能ブランチのデプロイ ........................................................................ 34手動デプロイ .................................................................................................................................... 37

ドラッグアンドドロップ ............................................................................................................ 37Amazon S3 または任意の URL ................................................................................................... 37

ワンクリックのデプロイボタン ........................................................................................................... 39リポジトリまたはブログに [Deploy to Amplify Console] ボタンを追加します。 ................................... 39

リダイレクトを使用する .................................................................................................................... 40リダイレクトの種類 .................................................................................................................. 40リダイレクトのパーツ ............................................................................................................... 41リダイレクトの順序 .................................................................................................................. 41シンプルなリダイレクトと書き換え ............................................................................................. 42単一ページのウェブアプリケーション (SPA) のリダイレクト .......................................................... 43リバースプロキシの書き換え ...................................................................................................... 43

iii

AWS Amplify コンソールユーザーガイド

末尾のスラッシュとクリーン URL ............................................................................................... 43プレースホルダー ...................................................................................................................... 44クエリ文字列とパスパラメータ ................................................................................................... 44リージョンベースのリダイレクト ................................................................................................ 45

アクセスの制限 ................................................................................................................................. 46Environment Variables ....................................................................................................................... 47

環境変数の設定 ......................................................................................................................... 47環境変数にアクセスする ............................................................................................................ 48Amplify コンソールの環境変数 .................................................................................................... 48

カスタムヘッダー .............................................................................................................................. 50例: セキュリティヘッダー .......................................................................................................... 50

着信ウェブフック .............................................................................................................................. 52カスタムビルド ................................................................................................................................. 54

カスタムビルドイメージ ............................................................................................................ 54カスタムビルドイメージの設定 ........................................................................................... 54カスタムビルドイメージの要件 ........................................................................................... 55

ライブパッケージのアップデート: ............................................................................................... 55ライブアップデートの設定 ................................................................................................. 55

CloudFormation のサポート ................................................................................................................ 57サービスロールを作成する ................................................................................................................. 58

ステップ 1: IAM コンソールにログインする .................................................................................. 58ステップ 2: Amplify ロールを作成する ......................................................................................... 58ステップ 3: Amplify コンソールに戻る ......................................................................................... 58

アプリケーションのパフォーマンスの管理 ............................................................................................ 60

iv

AWS Amplify コンソールユーザーガイド最新のウェブアプリケーションとは?

AWS Amplify コンソールとは?AWS Amplify コンソールは、最新のウェブアプリケーションで使用される継続的配信およびホスティングサービスです。AWS Amplify コンソールは、アプリケーションのフロントエンドとバックエンドのデプロイを簡素化します。コードリポジトリに接続すると、コードがコミットされるたびにフロントエンドとバックエンドが単一のワークフローにデプロイされます。これにより、アプリケーションのフロントエンドとバックエンドの間の矛盾は解消され、デプロイが正常に完了した場合にのみ、ウェブアプリケーションが更新されます。AWS Amplify コンソールでは、モバイルウェブアプリケーションを簡単に構築、デプロイ、およびホストすることができるため、フィードバックをすばやく繰り返し、新しい機能を迅速にユーザーに提供することができます。

最新のウェブアプリケーションとは?最新のウェブアプリケーションは、すべてのアプリケーションコンポーネントを静的ファイルにパッケージ化する単一ページのウェブアプリケーションとして構築されます。従来のクライアントサーバー型のウェブアーキテクチャには、エクスペリエンスが低下する原因がありました。ボタンをクリックしたり検索したりするたびに、サーバーのラウンドトリップや、アプリケーション全体の再レンダリングが必要でした。最新のウェブアプリは、アプリのフロントエンド (つまりユーザーインターフェイス) を、あらかじめ構築された HTML/JavaScript ファイルとしてブラウザに効率的に提供することで、ページをリロードすることなくバックエンド機能を呼び出すことができる、ネイティブアプリのようなユーザーエクスペリエンスを提供します。

最近のウェブアプリケーション機能は、ブラウザで実行されているデータベース、認証サービス、フロントエンドコードや、クラウドで実行されているバックエンドビジネスロジック、AWS Lambda 関数など、複数の場所に分散されていることが少なくありません。そのため、開発者がフロントエンドとバックエンド間でデプロイメントを慎重に調整して、部分的または失敗したデプロイメントを回避する必要があり、アプリケーションのデプロイは複雑で時間がかかります。AWS Amplify コンソールは、単一ワークフローのフロントエンドとバックエンドのデプロイを簡素化します。

AWS Amplify コンソールは、一般的なシングルページアプリケーション (SPA) フレームワーク(React、Angular、Vue.js、Ionic、Ember) と、Gatsby、Eleventy、Hugo、VuePress、Jekyll などの静的サイトジェネレーターをサポートしています。

Amplify コンソール機能Amplify コンソールでは、次のことを実行できます。

• リポジトリ (GitHub、BitBucket、GitLab、および AWS CodeCommit) を接続すると、Amplify コンソールによって、フロントエンドビルド設定と、Amplify CLI でプロビジョンされたバックエンド機能が自動的に検出されます。

• 新しいブランチを接続して、フロントエンドとバックエンドの本番稼働環境とステージング環境を管理します。

• アトミックデプロイにより、ウェブアプリはすべてのデプロイが完了したときに更新されるようになり、メンテナンスウィンドウが必要なくなります。これにより、ファイルが正しくアップロードされないというシナリオが解消されます。

• カスタムドメインに接続します。Amazon Route 53 でドメインを管理している場合、Amplify コンソールは、自動的にルート (yourdomain.com)、www サブドメイン (www.yourdomain.com)、およびブランチ(https://dev.yourdomain.com) のサブドメインに接続されます。

• レイアウトの問題を特定するには、アプリのスクリーンショットをさまざまなモバイルデバイスにレンダリングします。

1

AWS Amplify コンソールユーザーガイド次のステップ

• SEO のランキングを維持するために書き換えとリダイレクトを設定します。• パブリックアクセス可能にせずに新しい機能を使用できるように、ウェブアプリをパスワードで保護し

ます。

次のステップAmplify コンソールの使用を開始 (p. 3)します。

2

AWS Amplify コンソールユーザーガイドステップ 1: リポジトリの接続

開始方法このチュートリアルでは、最新のウェブアプリケーションを継続的にビルド、デプロイ、およびホストする方法について説明します。最新のウェブアプリケーションには、シングルページアプリケーション (SPA) フレームワーク (例: React、Angular、Vue) や静的サイトジェネレーター (SSG) (例:Hugo、Jekyll、Gatsby) などがあります。

使用を開始するには、Amplify コンソールにログインし、[デプロイ] の [使用開始] を選択します。

ステップ 1: リポジトリの接続GitHub、Bitbucket、GitLab、または AWS CodeCommit リポジトリを接続します。Git リポジトリに接続せずにビルドアーティファクトを手動でアップロードすることもできます (「手動デプロイ (p. 37)」を参照)。Amplify コンソールを承認すると、Amplify はリポジトリプロバイダーからアクセストークンを取得しますが、そのトークンは AWS サーバーに保存されません。Amplify は、特定のリポジトリにのみインストールされているデプロイキーを使用してリポジトリにアクセスします。

リポジトリサービスプロバイダーに接続したら、リポジトリを選択後、対応するブランチを選択して、ビルドおよびデプロイを行います。

3

AWS Amplify コンソールユーザーガイドステップ 2: フロントエンドのビルド設定を確認する

ステップ 2: フロントエンドのビルド設定を確認する

選択されたブランチで、Amplify はリポジトリを検査して、実行される一連のビルドコマンドを自動的に検出します。

重要: ビルドコマンドとビルド出力ディレクトリ (つまり、artifacts > baseDirectory) が正確であることを確認してください。この情報を変更する必要がある場合は、[編集] を選択して YML エディタを開きます。ビルド設定を AWS のサーバーに保存するか、YML をダウンロードしてリポジトリのルートに追加することもできます (monorepos の場合は、YML をアプリのルートディレクトリに保存します)。

4

AWS Amplify コンソールユーザーガイドステップ 3: バックエンドのビルド設定を確認する

詳細については、「YML 構造 (p. 21)」を参照してください。

ステップ 3: バックエンドのビルド設定を確認するAmplify CLI v1.0 以降でプロビジョンされたリポジトリに接続した場合 (CLI バージョンを確認するにはAmplify -v を実行)、Amplify コンソールは、バックエンドリソース (Amplify CLI でプロビジョンされたリソース) をフロントエンドビルドの単一のワークフローでデプロイまたは自動的に更新します。既存のバックエンド環境を自分のブランチにポイントするか、まったく新しい環境を作成することができます。ステップバイステップのチュートリアルについては、「フロントエンドでバックエンドをデプロイする (p. 25)」を参照してください。

ビルド中に Amplify CLI を使用してバックエンド機能をデプロイするには、IAM サービスロールを作成または再利用します。IAM ロールは、アカウントのリソースを操作するアクセス許可を Amplify コンソールに付与する安全な方法です。

注意: IAM サービスロールが有効でない場合は、Amplify CLI を実行することはできません。

5

AWS Amplify コンソールユーザーガイドステップ 4: 環境変数を追加する (オプション)

ステップ 4: 環境変数を追加する (オプション)ほとんどのアプリでは、実行時に設定情報を取得する必要があります。この設定には、データベース接続の詳細、API キー、パラメータなどがあります。環境変数は、ビルド時にこれらの設定を公開する方法として使用できます。

ステップ 5: 保存してデプロイするすべての設定を見直し、すべて正しく設定されていることを確認してください。[保存してデプロイ] を選択して、ウェブアプリをグローバルなコンテンツ配信ネットワーク (CDN) にデプロイします。フロントエンドのビルドには通常 1〜2 分かかりますが、アプリのサイズによって異なります。

ビルドログ画面にアクセスするには、ブランチタイルの進行状況インジケーターを選択します。ビルドには、次のステージが含まれます。

1. プロビジョン - ビルド環境は、4 vCPU、7 GB のメモリを搭載したホスト上で Docker イメージを使用してセットアップされています。各ビルドでは、独自のホストインスタンスを取得し、すべてのリソースが安全に隔離されるようにします。Docker ファイルの内容は、デフォルトのイメージがユーザーの要件をサポートするように表示されます。

2. ビルド - ビルドフェーズは、セットアップ (リポジトリのクローンをコンテナに作成する)、バックエンドのデプロイ (Amplify CLI を実行してバックエンドリソースをデプロイする)、フロントエンドのビルド(フロントエンドのアーティファクトをビルドする) の 3 つのステージから構成されます。

3. デプロイ - ビルドが完了したら、アーティファクトはすべて、Amplify によって管理されているホスティング環境にデプロイされます。すべてのデプロイはアトミック - アトミックデプロイでは、すべてのデプロイが完了したときにのみウェブアプリケーションが更新されるようにすることで、メンテナンスウィンドウが不要になります。

4. 検証 - アプリが正しく動作することを検証するために、Amplify では、ヘッドレス Chrome を使用して、index.html のスクリーンショットを複数のデバイス解像度でレンダリングします。

6

AWS Amplify コンソールユーザーガイド次のステップ

次のステップ• カスタムドメインをアプリに追加する (p. 8)• 複数の環境を管理する (p. 28)

7

AWS Amplify コンソールユーザーガイドAmazon Route 53 で管理されているカスタムドメインを追加する

カスタムドメインのセットアップドメインレジストラ (例: Amazon Route 53、GoDaddy、Google Domains) から購入したカスタムドメインは、アプリに接続することができます。Amplify コンソールでウェブアプリをデプロイすると、次の場所にホストされます。

https://branch-name.d1m7bkiki6tdw1.amplifyapp.com

カスタムドメインを使用すると、アプリが次のような URL でホストされている旨がユーザーに表示されます。

https://www.awesomedomain.com

Amplify コンソールでは、すべてのトラフィックが HTTPS/2 を介して保護されるように、アプリに接続されたすべてのドメインに対して SSL 証明書が発行されます。Amazon Certificate Manager によって生成された SSL 証明書は 30 日間有効で、アプリが Amplify でホストされている限り自動的に更新されます。

トピック• Amazon Route 53 で管理されているカスタムドメインを追加する (p. 8)• サードパーティーの DNS プロバイダーによって管理されているカスタムドメインの追加 (p. 9)• サブドメインを追加する (p. 11)• トラブルシューティングガイド (p. 12)

Amazon Route 53 で管理されているカスタムドメインを追加する

アプリをデプロイしたら、Amazon Route 53 を使用して管理するカスタムドメインを追加することができます。

1. 左のナビゲーションペインから、[App Settings (アプリ設定)]、[Domain management (ドメイン管理)]、[Add domain (ドメインの追加)] の順に選択します。

2. [Enter your root domain (ルートドメインを入力)] に、ルートドメイン (https://awesomedomain.com)を入力します。入力を始めると、Amazon Route 53 で管理しているルートドメインがリスト (https://awesomedomain.com) に表示されます。使用するドメインを選択し、[ドメインの設定] を選択します。

8

AWS Amplify コンソールユーザーガイドサードパーティーの DNS プロバイダーによっ

て管理されているカスタムドメインの追加

3. デフォルトでは、Amplify コンソールは自動的に https://www.myroute53domain.com および https://myroute53domain.com の 2 つのエントリを www サブドメインからルートドメインに設定されたリダイレクトで追加します (これを変更するには、左側のメニューから [Rewrites and redirects] を選択します)。サブドメインのみを追加する場合は、デフォルト設定を変更できます。「サブドメインの接続 (p. 11)」を参照してください。ドメインを設定したら、[保存] を選択します。

注意: DNS が伝播して SSL 証明書が発行されるまでに最大 24 時間かかることがあります。ステータスメッセージの詳細については、「ドメインの関連付け」を参照してください。

サードパーティーの DNS プロバイダーによって管理されているカスタムドメインの追加

アプリをデプロイしたら、Amazon Route 53 を使用せずに、サードパーティーの DNS プロバイダーを使用して管理しているカスタムドメインを追加できます。

1. 左のナビゲーションペインから、[App Settings (アプリ設定)]、[Domain management (ドメイン管理)]、[Add domain (ドメインの追加)] の順に選択します。

2. [Enter your root domain (ルートドメインを入力)] に、ルートドメイン (https://awesomedomain.com) を入力し、[Configure domain (ドメインの設定)] を選択します。ドメインが登録されている場合は、緑色のアラートによって、ドメインの所有者でない場合を除き、続行される旨が通知されます。ドメインが使用できる場合は、Amazon Route 53 でドメインを購入します。

9

AWS Amplify コンソールユーザーガイドサードパーティーの DNS プロバイダーによっ

て管理されているカスタムドメインの追加

3. デフォルトでは、Amplify コンソールによって、www サブドメインからルートドメインへのリダイレクト設定で、https://www.awesomedomain.com と https://awesomedomain.com の 2 つのエントリが追加されます。サブドメインのみを追加する場合は、デフォルト設定を変更できます。「サブドメインの接続 (p. 11)」を参照してください。ドメインを設定したら、[保存] を選択します。

4. ドメインは外部で管理されているため、DNS プロバイダー (例: GoDaddy または Google ドメイン) を手動で設定する必要があります。アラートバナーで、[DNS レコードの表示] を選択します。

5. DNS プロバイダーの CNAME と ALIAS レコードを次のように更新します。GoDaddy や Google ドメインの場合は、「サードパーティーのカスタムドメインに接続する (p. 17)」のステップバイステップの手順を参照してください。a. ドメインの SSL 証明書を生成するには、Amplify コンソールで所有権を検証する必要があります。検

証サーバーを指すように CNAME を設定します。Amplify コンソールでドメインの所有権が検証されると、トラフィックはすべて、HTTPS/2 を使用して提供されます。

b. お客様のサブドメイン (https://*.awesomedomain.com) が amplifyapp ドメインを指すようにCNAME レコードを設定します。注意: 本稼働トラフィックがある場合は、ドメインのステータスがAVAILABLE になった後に CNAME レコードを更新することをお勧めします。

c. ルートドメイン (https://awesomedomain.com) がお客様の amplifyapp ドメインを指すようにANAME/ALIAS レコードを設定します。ANAME レコードでは、ドメインのルートをホスト名に指定することができます。ANAME/ALIAS サポートのない DNS プロバイダーでは、DNS を AmazonRoute 53 に移行することを強くお勧めします。<problematic>**</problematic>注: 本稼働トラフィックがある場合は、ドメインのステータスが AVAILABLE になってから、ANAMEレコードを更新することをお勧めします。

10

AWS Amplify コンソールユーザーガイドサブドメインを追加する

重要: サードパーティードメインのドメイン所有権と DNS の伝播の検証には最大 48 時間かかることがあります。ステータスメッセージの詳細については、「ドメインの関連付け」を参照してください。

サブドメインを追加するサブドメインは、ドメイン名の前に表示される URL の一部です (例: www.amazon.com またはaws.amazon.com)。

1. サブドメインのみを追加する: 本稼働ウェブサイトを既にお持ちの場合は、サブドメイン (https://alpha.mydomain.com など) にのみ接続することをお勧めします。そのためには、[Exclude root] を選択し、以下に示されているように、サブドメインを [alpha] に変更します。

2. マルチレベルサブドメインを追加する: マルチレベルサブドメインを追加することができます (例:https://beta.alpha.mydomain.com)。そのためには、ドメインの検索バーに「alpha.mydomain.com」と入力し、[Exclude root] を選択して、以下に示されているように、サブドメインを beta に変更します。

11

AWS Amplify コンソールユーザーガイドトラブルシューティングガイド

3. サブドメインの管理 ドメインを追加したら、さらにサブドメインを追加することができます。ドメイン管理画面から [サブドメインの管理] を選択し、サブドメインを編集します。

トラブルシューティングガイドこのガイドは、AWS Amplify コンソールでのカスタムドメインの設定に関する問題のトラブルシューティングに役立ちます。

トピック• 技術用語 (p. 13)• CNAME が解決されたことを確認する方法 (p. 14)• サードパーティーでホストされているドメインが [Pending Verification] 状態のままになってい

る (p. 15)• AWS Route53 でホストされているドメインが [Pending Verification] 状態のままになってい

る (p. 15)• CNAMEAlreadyExistsException エラー (p. 16)

12

AWS Amplify コンソールユーザーガイド技術用語

技術用語1. CNAME - CNAME (正規レコード名) は、一連のウェブページに対してドメインをマスクし、それら

が他の場所にあるかのように見せるための DNS レコードの一種です。CNAMES はサブドメインを完全修飾ドメイン名 (FQDN) にポイントします。たとえば、新しい CNAME レコードを作成して、サブドメイン www.myawesomesite.com を、アプリに割り当てられている FQDN ドメイン branch-name.d1m7bkiki6tdw1.amplifyapp.com にマッピングすることができます。

2. ANAME - ANAME レコードは CNAME レコードと似ていますが、ルートレベルにあります。ANAME はドメインのルートを FQDN にポイントします。その FQDN は実際には IP アドレスをポイントします。

3. ネームサーバー - ネームサーバーは、ドメイン名のさまざまなサービスの場所に関するクエリの処理に特化したインターネット上のサーバーです。AWS Route53 でドメインを設定している場合は、ドメインに割り当てられているネームサーバーのリストがあります。

AWS Amplify コンソールでのカスタムドメインのセットアップ

Amplify コンソールで新しいドメインを作成する場合、カスタムドメインを使用してお客様のアプリを表示する前に行う必要のある多くのステップがあります。

1. SSL 作成 - AWS Amplify コンソールは、安全なカスタムドメインをセットアップするための SSL 証明書を発行しています。

2. SSLの設定/確認 - SSL 証明書を発行する前に、Amplify コンソールで、お客様がドメインの所有者であることを確認する必要があります。Route53 によって管理されているドメインの場合は、DNS 検証レコードを自動的に更新します。Route53 の外部で管理されているドメインの場合は、表示されているDNS 検証レコードをドメインの DNS プロバイダーに手動で追加する必要があります。

3. ドメインのアクティブ化 - ドメインは正常に検証されました。Route53 の外部で管理されているドメインの場合は、コンソールに表示されている CNAME レコードをドメインの DNS プロバイダーに手動で追加する必要があります。

DNS 検証について

13

AWS Amplify コンソールユーザーガイドCNAME が解決されたことを確認する方法

DNS は Domain Name System の略で、一般に電話帳と呼ばれ、人間が読み取れる名前 (ドメイン) をコンピュータフレンドリーなアドレス (IP アドレス) に変換します。

ブラウザに「https://google.com」と入力すると、ウェブサイトをホストするサーバーの IP アドレスを見つけるために DNS プロバイダーで検索が行われます。

DNS プロバイダーには、ドメインとそれに対応する IP アドレスのレコードが含まれています。最も一般的に使用される DNS レコードを以下に示します。

1. レコード - ルートドメインまたはサブドメインを IP アドレスにポイントします。2. CNAME レコード - サブドメインを FQDN (完全修飾ドメイン名) にポイントします。3. NS レコード - ドメインの詳細を検索するサーバーをポイントします。

インターネット上には、DNS レコードを検証するために使用できる無料のサービスがいくつもあります。たとえば、whatsmydns.net があります。

Amplify コンソールでは、CNAME レコードを使用して、お客様がカスタムドメインを所有していることを確認します。ドメインを AWS Route53 でホストしている場合、検証はお客様に代わって行われます。ただし、ドメインをサードパーティーでホストしている場合は、手動で DNS 設定にアクセスして新しいCNAME レコードを追加する必要があります。

CNAME が解決されたことを確認する方法DNS を更新したら、dig のようなツールや、whatsmydns.net のような無料ウェブサービスを使用して、CNAME レコードが解決されていることを確認します。

検索をクリックすると、CNAME が正しく解決されたことが結果に表示されます。

14

AWS Amplify コンソールユーザーガイドサードパーティーでホストされているドメイン

が [Pending Verification] 状態のままになっている

他の DNSレコードも同様に確認できます。

サードパーティーでホストされているドメインが[Pending Verification] 状態のままになっているまず、CNAMEレコードが解決されているかどうかを確認します。手順については、前のステップを参照してください。CNAME レコードが解決されない場合は、CNAME エントリが DNS プロバイダに存在することを確認してください。

Note: If you added or updated your CNAME records a few hours after youcreated your app, this will most likely cause your app to get stuck inthe pending verification state. It is important that you update yourCNAME records as soon as you create your custom domain.

アプリが Amplify コンソールで作成されると、CNAME レコードが数分ごとにチェックされ、解決するかどうかを判別します。1 時間経っても解決しない場合は、数時間ごとにチェックが行われるため、ドメインを使用する準備ができるまでに時間がかかる可能性があります。

最後に、CNAME レコードが存在することを確認したら、DNS プロバイダーに問題がある可能性があります。DNS 検証 CNAME が解決しない理由を診断するために DNS プロバイダーに連絡するか、DNS をRoute53 に移行することができます。

AWS Route53 でホストされているドメインが[Pending Verification] 状態のままになっているドメインを AWS Route53 に移行した場合、ドメインのネームサーバーが、アプリの作成時に Amplify コンソールによって発行されたものとは異なる可能性があります。Route53 コンソール にログインし、左のナビゲーションから [Hosted Zones] を選択して、接続中のドメインを選択します。ネームサーバーの値を記録します。

15

AWS Amplify コンソールユーザーガイドCNAMEAlreadyExistsException エラー

次に、左のナビゲーションから [Registered domains] を選択します。登録済みドメイン画面のネームサーバーが、ホストゾーンからコピーしたネームサーバーと一致していることを確認します。

これでも問題が解決しない場合は、「aws-amplify-customer@amazon.com」までお問い合わせください。

CNAMEAlreadyExistsException エラーこれは、接続しようとしたホスト名のいずれか (サブドメイン、または apex ドメインなど) が別の AWSCloudFront ディストリビューションに既にデプロイされていることを意味します。問題を診断する方法を次に示します。

1. AWS CloudFront コンソールで、このドメインが他のディストリビューションにデプロイされているかどうかを確認します。一度に 1 つの CloudFront ディストリビューションにアタッチできる CNAME レコードは 1 つのみです。

2. このドメインは、所有する別の Amplify アプリに接続されていますか? 接続されている場合は、ホスト名のいずれかを再利用していないことを確認します。他のアプリで www.domain.com を使用している場合は、このアプリで www.domain.com を使用することはできません。それ以外のサブドメイン(blog.domain.com など) は使用できます。

3. このドメインを他のアプリに正常に接続してから最近 (過去 1 時間以内に) 削除した場合は、しばらくしてからもう一度お試しください。6 時間経ってもまだこの例外が発生する場合は、aws-amplify-customer@amazon.com までお問い合わせください。

16

AWS Amplify コンソールユーザーガイドGoDaddy ドメインに接続する

サードパーティーのカスタムドメインに接続するGoDaddy ドメインに接続する

1. 手順に従って、サードパーティープロバイダーの [ドメインを追加 (p. 8)] します。2. GoDaddy でアカウントにログインし、[DNS] を選択します。

3. お客様のサブドメインが Amplify ドメインを指すように CNAME レコードを追加し、 AmazonCertificate Manager の検証サーバーを指すようにもうひとつの CNAME を設定します。検証済みの 1 つの ACM でドメインの SSL 証明書を生成します。次に示すように、(例: **Host* 内) サブドメインのみを入力してください (yourdomainname.com とは入力しないでください)。

GoDaddy では、ANAME/ALIAS レコードはサポートされていません。ANAME/ALIAS サポートのないDNS プロバイダーでは、DNS を Amazon Route 53 に移行することを強くお勧めします。現在のプロバイ

17

AWS Amplify コンソールユーザーガイドGoDaddy ドメインに接続する

ダーのまま、ルートドメインを更新する場合は、[転送] を追加して、ドメイン転送を設定します。[転送先]に、以下に示す情報を入力します。

18

AWS Amplify コンソールユーザーガイドGoDaddy ドメインに接続する

19

AWS Amplify コンソールユーザーガイドGoogle ドメインに接続する

Google ドメインに接続する1. 手順に従って、サードパーティープロバイダーの [ドメインを追加 (p. 8)] します。2. https://domains.google でアカウントにログインし、[DNS] を選択します。

3. [カスタムリソースレコード] に、すべてのサブドメイン (https://*.awesomedomain.com) が amplifyappドメインを指す CNAME レコードと、Amazon Certificate Manager の検証サーバー指す別の CNAME レコードを入力します。検証済みの 1 つの ACM でドメインの SSL 証明書を生成します。

Google ドメイン では、ANAME/ALIAS レコードはサポートされていません。ANAME/ALIAS サポートのない DNS プロバイダーでは、DNS を Amazon Route 53 に移行することを強くお勧めします。現在のプロバイダーのまま、ルートドメインを更新する場合は、[Synthetic Record (合成レコード)] を追加して、[Subdomain Forward (サブドメイン転送)] を設定します。次に示すように、[サブドメイン] に @ 記号を入力し、[Forward path (転送パス)] を選択します。

20

AWS Amplify コンソールユーザーガイドYML 仕様の構文

ビルド設定の構成Amplify コンソールでは、リポジトリの package.json ファイルを検査することによって、フロントエンドのフレームワークと、関連するビルド設定が自動的に検出されます。次のオプションがあります。

• Amplify コンソールでビルド設定を保存する - Amplify コンソールを使用してビルド設定を自動検出および保存することで、Amplify コンソールからアクセスできるようになります。これらの設定は、リポジトリに YML ファイルがある場合を除き、すべてのブランチに適用されます。

• ビルド設定をリポジトリに保存する - amplify.yml ファイルをダウンロードして、リポジトリのルート(または monorepo のアプリフォルダのルート) に追加します。

これらの設定を Amplify コンソールで設定するには、[アプリ設定 > ビルド設定] を選択します。これらのビルド設定は、アプリケーション内のすべてのブランチに適用されます。ただし、リポジトリに YMLファイルが保存されているブランチは除きます。

YML 仕様の構文YML ビルド仕様には、Amplify コンソールでビルドの実行に使用される一連のビルドコマンドと関連設定が含まれます。YML の構成は次のとおりです。

version: 1.0env: variables: key: valuebackend: phases: preBuild: commands: - *enter command* build: commands: - *enter command* postBuild: commands: - *enter command*frontend: phases: preBuild: commands: - cd react-app - npm ci build: commands: - npm run build artifacts: files: - location - location discard-paths: yes baseDirectory: location cache: paths: - path

21

AWS Amplify コンソールユーザーガイドブランチ固有のビルド設定

- path customHeaders: - pattern: 'file-pattern' headers: - key: 'custom-header-name' value: 'custom-header-value' - key: 'custom-header-name' value: 'custom-header-value'

• version - Amplify コンソールの YML バージョン番号を表します。• env - 環境変数をこのセクションに追加します。また、環境変数はコンソールを使用して追加することも

できます。• backend - Amplify CLI コマンドを実行して、バックエンドのプロビジョン、Lambda 関数の更新、また

は継続的なデプロイの一環としての GraphQL スキーマの更新を行います。フロントエンドでバックエンドをデプロイ (p. 25)する方法について説明します。

• frontend - フロントエンドのビルドコマンドを実行します。• フロントエンドとバックエンドにはいずれも、ビルドの各シーケンス中に実行されるコマンドを表す 3

つのフェーズがあります。• preBuild - preBuild スクリプトは、実際のビルドの開始前、依存関係のインストール後に実行され

ます。• build - お客様のビルドコマンド。• postBuild - ビルド後のスクリプトはビルド完了後に実行されるため、必要なすべてのアーティ

ファクトを出力ディレクトリにコピーしました。• artifacts>base-directory - ビルドアーティファクトが存在するディレクトリ。• artifacts>files - デプロイするアーティファクトからファイルを指定します。**/* は、すべてのファイルを

含めることを意味します。• customHeaders - デプロイされたファイルに設定されたカスタムヘッダールール。「カスタムヘッ

ダー (p. 50)」を参照してください。

ブランチ固有のビルド設定bash シェルスクリプトを使用してブランチ固有のビルドを設定できます。たとえば、次のスクリプトは、ブランチ名が master の場合はシステム環境変数 $AWS_BRANCH を使用し、ブランチ名が dev の場合は別のコマンドセットを実行します。

frontend: phases: build: commands: - if [ "${AWS_BRANCH}" = "master" ]; then echo "master branch"; fi - if [ "${AWS_BRANCH}" = "dev" ]; then echo "dev branch"; fi

サブフォルダに移動するmonorepos の場合、ユーザーは、ビルドを実行するためのフォルダに cd を実行することを考える場合があります。cd コマンドを実行すると、cd コマンドがビルドのすべてのステージに適用されるため、各フェーズでコマンドを再度実行する必要はありません。

version: 1.0env:

22

AWS Amplify コンソールユーザーガイドフロントエンドでバックエンドをデプロイする

variables: key: valuefrontend: phases: preBuild: commands: - cd react-app - npm ci build: commands: - npm run build

フロントエンドでバックエンドをデプロイするamplifyPush はバックエンドのデプロイを支援するヘルパースクリプトです。以下のビルド設定によって、現在のブランチにデプロイする上で適切なバックエンド環境が自動的に判別されます。

version: 1.0env: variables: key: valuebackend: phases: build: commands: - amplifyPush --simple

出力フォルダの設定次のビルド設定は、出力ディレクトリをパブリックフォルダに設定します。

frontend: phases: commands: build: - yarn run build artifacts: baseDirectory: public

ビルドの一部としてパッケージをインストールするビルド中にパッケージをインストールするには、npm または yarn を使用できます。

frontend: phases: build: commands: - npm install -g pkg-foo - pkg-foo deploy - yarn run build artifacts: baseDirectory: public

23

AWS Amplify コンソールユーザーガイドプライベート npm レジストリを使用する

プライベート npm レジストリを使用するプライベートレジストリへのリファレンスは、ビルド設定で追加するか、環境変数として追加することができます。

build: phases: preBuild: commands: - npm config set <key> <value> - npm config set registry https://registry.npmjs.org - npm config set always-auth true - npm config set email hello@amplifyapp.com - yarn install

OS パッケージのインストールOS パッケージをインストールして、不足している依存関係を入手します。

build: phases: preBuild: commands: - yum install -y <package>

ビルドごとのキーと値のストレージenvCache はビルド時にキーと値のストレージを提供します。envCache に保存された値はビルド中にのみ変更でき、次回のビルドで再利用できます。envCache を使用することで、デプロイされた環境に情報を保存し、それを連続したビルドでビルドコンテナを利用できるようにします。envCache に保存されている値とは異なり、ビルド中に環境変数を変更しても、将来のビルドには反映されません。

使用例:

envCache --set <key> <value>envCache --get <key>

自動ビルドを無効にするコードのコミットごとに自動ビルドを無効にするように Amplify コンソールを設定できます。セットアップするには、[App settings] > [General] を選択し、接続されているすべてのブランチがあるセクションまでスクロールします。ブランチを選択し、[Action] > [Disable auto build] を選択します。さらにそのブランチにコミットしても、新しいビルドは作成されません。

24

AWS Amplify コンソールユーザーガイド

サーバーレスチュートリアル: フロントエンドでバックエンドをデプロイする

Amplify コンソールでは、開発者は、Amplify Framework でアプリケーションを構築して、コードをコミットするたびにバックエンドとフロントエンドに更新を継続的にデプロイできます。Amplify コンソールを使用すると、GraphQL/REST API、認証、分析、および Amplify CLI によって作成されたストレージを使用して、サーバーレスバックエンドをデプロイできます。注: この機能は Amplify CLI v1.0 以降でのみ使用できます。

このチュートリアルでは、React アプリを作成してデプロイします。ここでは、AWS Amplify を使用して、保護されたクライアントサイドルーティングだけでなく、ユーザーのサインアップ/サインインのための基本認証フローを実装します。

• 別のフロントエンドフレームワークまたは Amplify バックエンドカテゴリを使用している場合は、Amplify コンソールを使用してバックエンドとフロントエンドをデプロイするのと同じステップを適用できます。このプロジェクトの最終的なコードは、GitHub のサンプルとして入手できます。

• 既存の Amplify アプリをすでにお持ちの場合は、ステップ 6 に進みます。

1. Amplify CLI をインストールして新しい Amplify プロジェクトを初期化します。

npm install -g @aws-amplify/cli

2. プロジェクトの root で CLI を初期化して、環境に prodという名前を付けます。Amplify CLI を使用して、バックエンド機能をアプリに追加することができます。バックエンド機能には、認証、分析、API、ストレージといったクラウドカテゴリがすべて含まれます。

create-react-app myappcd myappamplify init Enter a name for the environment: prod

3. サインイン、サインアップ、多要素認証による認証をアプリに追加します。すべての項目でデフォルト値を使用し、更新されたプロジェクト設定を AWS にプッシュします。ユーザー認証を有効にするAmazon Cognito リソースがデプロイされます。

amplify add auth<accept defaults>...amplify push

4. ここで示されているように、フロントエンドコードを更新して、withAuthenticator HOC コンポーネントを App.js に追加します。アプリをローカルでテストして、サインイン画面が表示されていることを確認します。

npm start

25

AWS Amplify コンソールユーザーガイド

5. コードをコミットし、選択した Git プロバイダーにアップロードします (Amplify コンソールはGitHub、BitBucket、GitLab、および AWS CodeCommit をサポートしています)。

6. Amplify コンソールにログインし、[デプロイ] の [使用開始] を選択します。Git プロバイダー、リポジトリ、およびブランチを接続してから [Next] を選択します。

7. Amplify コンソールによって、リポジトリに Amplify バックエンドがあることが自動的に検出されます。ドロップダウンから、[prod] (CLI で先ほど作成した環境) を選択します。これにより、リポジトリの変更をコミットする度に、コンソールで、prodバックエンドが自動的に更新されます。

8. [Next (次へ)]、[Save and deploy (保存してデプロイ)] の順に選択します。アプリをビルドするにはまず、バックエンドとそれに続くフロントエンドをデプロイします。実行中のビルドを表示するにはブランチ名をクリックします。ビルドが成功したら、アプリにアクセスできるようになります。

26

AWS Amplify コンソールユーザーガイド

27

AWS Amplify コンソールユーザーガイドAmplify CLI バックエンド環境を使用したチームワークフロー

機能ブランチのデプロイとチームのワークフロー

Amplify コンソールは、機能ブランチと GitFlow ワークフローで動作するように設計されています。Amplify コンソールは、Git のブランチを活用して、開発者がリポジトリの新しいブランチに接続するたびに新しいデプロイを作成します。最初のブランチを接続したら、次のようにブランチを追加して新しい機能ブランチのデプロイを作成できます。

1. ブランチリストのページで、[Connect branch (ブランチの接続)] を選択します。2. リポジトリからブランチを選択します。3. アプリを保存してからデプロイします。

お客様のアプリには、https://master.appid.amplifyapp.com と https://dev.appid.amplifyapp.com で利用可能な 2 つのデプロイがあります。これはチーム間で異なる場合がありますが、通常は master ブランチはリリースコードを追跡します。また、本稼働ブランチでもあります。開発ブランチは、新機能をテストするための統合ブランチとして使用されます。このようにして、ベータテスターは master ブランチデプロイの本稼働エンドユーザーに影響を及ぼすことなく、開発ブランチデプロイの未リリース機能をテストできます。

トピック• Amplify CLI バックエンド環境を使用したチームワークフロー (p. 28)• パターンベースのブランチ機能ブランチのデプロイ (p. 34)

Amplify CLI バックエンド環境を使用したチームワークフロー

機能ブランチのデプロイはフロントエンドと [(オプション) バックエンド] (https://docs.aws.amazon.com/amplify/latest/userguide/deploy-backend.html) で構成されています。フロントエンドはグローバル CDN に構築およびデプロイされ、バックエンドは Amplify CLI によって AWS にデプロイされます。Amplify コンソールを使用して、機能ブランチのデプロイで GraphQL API や Lambda 関数などのバックエンドリソー

28

AWS Amplify コンソールユーザーガイド機能ブランチのワークフロー

スを継続的にデプロイすることができます。次のモデルを使用して、バックエンドとフロントエンドをAmplify コンソールでデプロイできます。

トピック• 機能ブランチのワークフロー (p. 13)• GitFlow ワークフロー (p. 32)• 開発者ごとのサンドボックス (p. 32)

機能ブランチのワークフロー• Amplify CLI で、prod、test、dev バックエンド環境を作成します。• prod および test を master および develop ブランチにマッピングします。• チームメイトは、dev バックエンド環境を使用して、機能ブランチを検証することができます。

1. Amplify CLI をインストールして新しい Amplify プロジェクトを初期化します。

npm install -g @aws-amplify/cli

2. プロジェクト用の prod バックエンド環境を初期化します。プロジェクトがない場合は、create-react-app や Gatsby などのブートストラップツールを使用してプロジェクトを作成します。

create-react-app next-unicorncd next-unicornamplify init ? Do you want to use an existing environment? (Y/n): n ? Enter a name for the environment: prod...amplify push

3. test 環境と dev バックエンド環境を追加します。

amplify env add ? Do you want to use an existing environment? (Y/n): n ? Enter a name for the environment: test

29

AWS Amplify コンソールユーザーガイド機能ブランチのワークフロー

...amplify push

amplify env add ? Do you want to use an existing environment? (Y/n): n ? Enter a name for the environment: dev...amplify push

4. 選択した Git リポジトリにコードをプッシュします (この例では、master にプッシュしたと仮定します)。

git commit -am 'Added dev, test, and prod environments'git push origin master

5. リポジトリ > ブランチ master の順に Amplify コンソールに接続します。6. Amplify コンソールは、Amplify CLI によって作成されたバックエンド環境を検出します。ドロップダウ

ンから prod を選択し、サービスロールを Amplify コンソールに付与します。[保存してデプロイ] を選択します。ビルドが完了したら、https://master.appid.amplifyapp.com で利用可能な master ブランチのデプロイを取得します。

7. Amplify コンソールで develop ブランチを接続します (この時点で develop ブランチと master ブランチは同じであることを前提としています)。テストバックエンド環境を選択します。

30

AWS Amplify コンソールユーザーガイド機能ブランチのワークフロー

8. Amplify コンソールが設定されました。機能ブランチで新機能を使用することができます。ローカルワークステーションの dev バックエンド環境を使用して、バックエンド機能を追加します。

git checkout -b newinternetamplify env checkout devamplify add api...amplify push

9. 機能を使用するための準備が整ったら、コードをコミットして、内部でレビューするためのプルリクエストを作成します。

git commit -am 'Decentralized internet v0.1'git push origin newinternet

10.変更内容をプレビューするには、コンソールに移動して機能ブランチを接続します。注: AWSCLI がシステムにインストールされている場合 (Amplify CLI ではない)、ターミナルから直接ブランチに接続できます。アプリ ID を検索するには、[App settings] > [General] > AppARN:arn:aws:amplify:<region>:<region>:apps/<appid> の順に進みます。

aws amplify create-branch --app-id <appid> --branch-name <branchname>aws amplify start-job --app-id <appid> --branch-name <branchname> --job-type RELEASE

11.https://newinternet.appid.amplifyapp.com から機能にアクセスして、チームメイトと共有できるようになります。問題なければ、PR を develop ブランチにマージします。

git checkout developgit merge newinternetgit push

12.これにより、https://dev.appid.amplifyapp.com のブランチデプロイで、Amplify コンソールのバックエンドとフロントエンドを更新するビルドが開始されます。新機能を確認できるように、このリンクを社内の関係者と共有することができます。

31

AWS Amplify コンソールユーザーガイドGitFlow ワークフロー

13.Git の Amplify コンソールから機能ブランチを削除し、クラウドからバックエンド環境を削除します(「amplify env checkout prod」および「amplify env add」を実行することで、いつでも新しい環境にスピンアップできます)。

git push origin --delete newinternetaws amplify delete-branch --app-id <appid> --branch-name <branchname>amplify env remove dev

GitFlow ワークフローGitFlow は2 つのブランチを使ってプロジェクトの履歴を記録します。master ブランチでは、リリースコードのみ追跡し、develop ブランチは、新機能の統合ブランチとして使用されます。GitFlow は、完了した作業から新しい開発を切り離すことによって、並列開発を簡素化します。新機能の開発 (機能や緊急ではないバグの修正など) は機能ブランチで行われます。開発者がコードのリリース準備が整ったことを確認すると、機能ブランチは統合開発ブランチにマージされます。master ブランチへの唯一のコミットはrelease ブランチと hotfix ブランチからのマージです (緊急のバグを修正するため)。

以下の図は GitFlow で推奨された設定を示します。上記の機能ブランチのワークフローのセクションで説明したプロセスと同じプロセスに従って行うことができます。

開発者ごとのサンドボックス• チーム内の各開発者は、自分のローカルコンピュータとは別に、サンドボックス環境をクラウド内に作

成すること。これにより、開発者は他のチームメンバーの変更を上書きすることなく互いに独立して作業することができます。

• Amplify コンソールの各ブランチには独自のバックエンドがあります。これにより、Amplify コンソールは、チームの開発者が自分のローカルコンピュータから本稼働環境に手動でバックエンドやフロントエンドをプッシュするのではなく、Git リポジトリを変更のデプロイ元となる唯一の真のソースとして使用します。

32

AWS Amplify コンソールユーザーガイド開発者ごとのサンドボックス

1. Amplify CLI をインストールして新しい Amplify プロジェクトを初期化します。

npm install -g @aws-amplify/cli

2. プロジェクト用の kita バックエンド環境を初期化します。プロジェクトがない場合は、create-react-app や Gatsby などのブートストラップツールを使用してプロジェクトを作成します。

cd next-unicornamplify init ? Do you want to use an existing environment? (Y/n): n ? Enter a name for the environment: kita...amplify push

1. 選択した Git リポジトリにコードをプッシュします (この例では、master にプッシュしたと仮定します)。

git commit -am 'Added kita sandbox'git push origin master

33

AWS Amplify コンソールユーザーガイドパターンベースのブランチ機能ブランチのデプロイ

2. リポジトリ > master の順に、Amplify コンソールに接続します。3. Amplify コンソールは、Amplify CLI によって作成されたバックエンド環境を検出します。ドロップダウ

ンから [Create new environment (新しい環境の作成)] を選択し、サービスロールを Amplify コンソールに付与します。[保存してデプロイ] を選択します。ビルドが完了したら、ブランチにリンクされている新しいバックエンド環境を持つ、https://master.appid.amplifyapp.com で利用可能な master ブランチのデプロイを取得します。

4. Amplify コンソールで develop ブランチを接続し (この時点で develop ブランチと master ブランチは同じであることを前提としています)、[新しい環境の作成] を選択します。ビルドが完了したら、ブランチにリンクされている新しいバックエンド環境を持つ、https://develop.appid.amplifyapp.com で利用可能な develop ブランチのデプロイを取得します。

パターンベースのブランチ機能ブランチのデプロイパターンベースのブランチデプロイでは、特定のパターンに一致するブランチを自動的に Amplify コンソールにデプロイできます。リリースに機能ブランチまたは GitFlow ワークフローを使用している製品チームは、「release**」のようなパターンを定義して、「release」で始まる Git ブランチを共有可能なURL に自動的にデプロイできるようになりました。このブログ記事では、さまざまなチームワークフローでこの機能を使用する方法について説明します。

1. [App settings] > [General] > [Edit] の順に選択します。2. ブランチの自動検出スイッチを有効にします。

34

AWS Amplify コンソールユーザーガイドパターンベースのブランチ機能ブランチのデプロイ

1. ブランチを自動的にデプロイするためのパターンを定義します。• '*' では、リポジトリにすべてのブランチがデプロイされます。• 'release*' は 'release という単語が含まれているすべてのブランチを自動的にデプロイします。• 'release*/

<problematic>**</problematic>「release /」パターンに一致するすべてのブランチをデプロイします。

• 複数のパターンをカンマで区切って指定します (例: 'release*', 'feature*')2. [Branch autodetection - access control] を [Enabled] に設定して、自動的に作成されるすべてのブランチ

に対して自動パスワード保護を設定します。3. Amplify バックエンドを使用して構築されたアプリケーションの場合は、新しい環境を作成するか、す

べてのブランチを既存のバックエンドにポイントするかを選択できます。

35

AWS Amplify コンソールユーザーガイドパターンベースのブランチ機能ブランチのデプロイ

36

AWS Amplify コンソールユーザーガイドドラッグアンドドロップ

手動デプロイ手動デプロイを使用すると、Git プロバイダーに接続せずにウェブアプリケーションを Amplify コンソールに公開できます。デスクトップからフォルダをドラッグアンドドロップするか、Amazon S3 バケットまたは外部 URL を参照するかを選択できます。

ドラッグアンドドロップデスクトップからフォルダをドラッグアンドドロップすると、数秒でサイトをホストできます。Amplify コンソールにログインし、Git プロバイダーなしのデプロイを選択します。アプリに名前を付け、環境に名前(例: 開発または本稼働) を付けます。デスクトップからファイルをドラッグアンドドロップしてウェブアプリケーションを公開します。

Amazon S3 または任意の URLAmazon S3 バケットにアップロードされたアセット、または他の場所に保存されているファイルへのパブリック URL を提供するアセットを参照します。

Amazon S3 の場合は、サイトをデプロイするためのバケットと zip ファイルを選択します。新しいアセットがアップロードされるたびにサイトが更新されるように、AWS Lambda トリガーを設定することもできます。このブログ記事では、Lambda トリガーを設定して、バケットの更新があったときに Amplify に自動的に変更をデプロイする方法を説明します。

37

AWS Amplify コンソールユーザーガイドAmazon S3 または任意の URL

38

AWS Amplify コンソールユーザーガイドリポジトリまたはブログに [Deploy to

Amplify Console] ボタンを追加します。

Amplify コンソールボタンにデプロイする

[Deploy to Amplify Console] ボタンを使用すると、GitHub プロジェクトをパブリックに共有するか、チーム内で共有することができます。このボタンは次のようになります。

リポジトリまたはブログに [Deploy to AmplifyConsole] ボタンを追加します。

このボタンを GitHub の README.md ファイル、ブログ記事、または HTML を表示するその他のマークアップページに追加します。このボタンには 2 つのコンポーネントがあります。

1. SVG イメージ: https://oneclick.amplifyapp.com/button.svg2. GitHub リポジトリへのリンクを含む Amplify コンソールの URL。リポジトリ URL (例: https://

github.com/username/repository) のみをコピーするか、特定のフォルダ (例: https://github.com/username/repository/tree/master/folder) へのディープリンクを指定します。Amplify コンソールはデフォルトのブランチをリポジトリにデプロイします。アプリが接続されたら、ブランチを追加接続することができます。

3. マークダウンファイルにボタンを追加します (例: GitHub README.md)。https://github.com/username/repository をご使用のリポジトリ名に置き換えます。

[](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/username/repository)

1. ボタンを任意の HTML ドキュメントに追加することもできます。

<a href="https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/username/repository"> <img src="https://oneclick.amplifyapp.com/button.svg" alt="Deploy to Amplify Console"></a>

39

AWS Amplify コンソールユーザーガイドリダイレクトの種類

リダイレクトを使用するリダイレクトを使用すると、ウェブサーバーで 1 つの URL から別の URL にナビゲーションを再ルートすることができます。リダイレクトは一般的に、URL の外観をカスタマイズする、リンクが壊れないようにする、アドレスを変更せずにアプリまたはサイトのホスティング場所を移動する、ウェブアプリで必要なフォームへの URL を変更するといった理由で使用されます。

リダイレクトの種類特定のシナリオをサポートするリダイレクトにはいくつかの種類があります。

恒久的なリダイレクト (301)

301 リダイレクトは、ウェブアドレスの送信先への恒久的な変更を目的としています。新しい送信先アドレスには、元のアドレスの検索エンジンのランキング履歴が適用されます。リダイレクトはクライアント側で行われるため、ブラウザのナビゲーションバーには、リダイレクト後の送信先アドレスが表示されます。301 リダイレクトを使用する一般的な理由を以下に示します。

• ページのアドレスが変更されたときにリンク切れを回避する。• ユーザーがアドレスに予測可能なタイプミスをしたときにリンクが壊れるのを防ぐ。

一時的なダイレクト (302)

302 リダイレクトは、ウェブアドレスの送信先への一時的な変更を目的としています。新しい送信先アドレスには、元のアドレスの検索エンジンのランキング履歴は適用されません。リダイレクトはクライアント側で行われるため、ブラウザのナビゲーションバーには、リダイレクト後の送信先アドレスが表示されます。302 リダイレクトを使用する一般的な理由を以下に示します。

• 元のアドレスの修正中に迂回先を提供する。• ユーザーインターフェイスの A/B 比較用のテストページを提供する。

書き換え (200)

200 リダイレクト (書き換え) は、まるで元のアドレスから配信されたかのように、送信アドレスからのコンテンツを表示することを目的としています。検索エンジンのランキング履歴は、引き続き元のアドレスに適用されます。リダイレクトはサーバー側で行われるため、ブラウザのナビゲーションバーには、リダイレクト後の元のアドレスが表示されます。200 リダイレクトを使用する一般的な理由を以下に示します。

• サイトのアドレスを変更せずに、サイト全体を新しいホスティング場所にリダイレクトする。• 単一ページのウェブアプリケーション (SPA) へのすべてのトラフィックを index.html ページにリダイレ

クトし、クライアント側のルーター機能で処理する。

Not Found (404)

404 リダイレクトは、リクエストが存在しないアドレスを指している場合に発生します。リクエストされたページではなく、404 の送信先ページが表示されます。404 リダイレクトが発生する一般的な理由を以下に示します。

40

AWS Amplify コンソールユーザーガイドリダイレクトのパーツ

• ユーザーが誤った URL を入力したときにリンク切れメッセージが表示されないようにする。• ウェブアプリケーションの存在しないページへのリクエストをクライアント側のルーター機能で処理す

る index.html ページに向けること。

リダイレクトのパーツリダイレクトは、次の内容で構成されます。

• 元のアドレス - ユーザーがリクエストしたアドレス。• 送信先アドレス - ユーザーに表示されるコンテンツを実際に提供するアドレス。• リダイレクトタイプ - タイプには、恒久的なリダイレクト (301)、一時的なリダイレクト (302)、書き換

え (200)、または not found (404) などがあります。• 2 文字の国コード (オプション) - アプリのユーザーエクスペリエンスをリージョン別に分割するために

含めることができる値

リダイレクトを作成および編集するには、左ナビゲーションペインの [Rewrites and redirects settings (書き換えとリダイレクトの設定)] を選択します。

リダイレクトを JSON エディタで一括編集するには、[Open text editor (テキストエディタを開く)] を選択します。

リダイレクトの順序リダイレクトはリストの上から順に実行されます。順序に、意図した効果があることを確認してください。たとえば、次のリダイレクト順序では、/docs/ の特定のパスに対するリクエストはすべて、/documents/ の同じパスにリダイレクトされます。ただし、/documents/different-filename.html にダイレクトされる /docs/specific-filename.html は除きます。

/docs/specific-filename.html /documents/diferent-filename.html 301/docs/<*> /documents/<*>

41

AWS Amplify コンソールユーザーガイドシンプルなリダイレクトと書き換え

次のリダイレクト順序では、specific-filename.html から different-filename.html へのリダイレクトは無視されます。

/docs/<*> /documents/<*>/docs/specific-filename.html /documents/diferent-filename.html 301

シンプルなリダイレクトと書き換えこのセクションでは、一般的なリダイレクトシナリオのサンプルコードを紹介します。

次のサンプルコードを使用して、特定のページを新しいアドレスに恒久的にリダイレクトすることができます。

元のアドレス 送信先アドレス リダイレクトの種類 国コード

/original.html /destination.html permanent redirect(301)

 

JSON: [{"source": "/original.html", "status": "301", "target": "/destination.html", "condition": null}]

次のサンプルコードを使用して、フォルダ内の任意のパスを別のフォルダ内の同じパスにリダイレクトできます。

元のアドレス 送信先アドレス リダイレクトの種類 国コード

docs/<*> /documents/<*> permanent redirect(301)

 

JSON [{"source": "/docs/<*>", "status": "301", "target": "/documents/<*>", "condition": null}]

次のサンプルコードを使用して、書き換えとしてすべてのトラフィックを index.html にリダイレクトすることができます。このシナリオでは、書き換えによって元のアドレスに到達したようにユーザーに表示されます。

元のアドレス 送信先アドレス リダイレクトの種類 国コード

<*> /index.html rewrite (200)  

JSON [{"source": "/<*>", "status": "200", "target": "/index.html", "condition": null}]

次のサンプルコードを使用して、書き換えによって、ユーザーに表示されるサブドメインを変更することができます。

元のアドレス 送信先アドレス リダイレクトの種類 国コード

https://mydomain.com

https://www.mydomain.com

rewrite (200)  

JSON [{"source": "https://mydomain.com", "status": "200", "target": "https://www.mydomain.com", "condition": null}]

42

AWS Amplify コンソールユーザーガイド単一ページのウェブアプリケー

ション (SPA) のリダイレクト

次のサンプルコードを使用して、見つからないフォルダのパスをカスタムの 404 ページにリダイレクトすることができます。

元のアドレス 送信先アドレス リダイレクトの種類 国コード

/<*> /404.html not found (404)  

JSON [{"source": "/<*>", "status": "404", "target": "/404.html", "condition": null}]

単一ページのウェブアプリケーション (SPA) のリダイレクト

SPA フレームワークは通常、HTML5 history.pushState() をサポートしており、サーバーリクエストをトリガーせずに、ブラウザの場所を変更できます。この方法は、ユーザーがルート (または /index.html) から作業を開始する問題ありませんが、他のページに直接ナビゲートする場合は失敗します。次の例では、正規表現を使用して、正規表現で指定されている特定のファイル拡張子を除き、すべてのファイルに対して、書き換え (200) を index.html に設定します。

元のアドレス 送信先アドレス リダイレクトの種類 国コード

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

/index.html 200  

JSON [{"source": "</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>", "status": "200", "target": "index.html", "condition": null}]

リバースプロキシの書き換え次の例では、ドメインが変更されていないように見えるように、別の場所からプロキシコンテンツへの書き換えを使用しています。

元のアドレス 送信先アドレス リダイレクトの種類 国コード

/images https://images.otherdomain.com

rewrite (200)  

JSON [{"source": "/images", "status": "200", "target": "https://images.otherdomain.com", "condition": null}]

末尾のスラッシュとクリーン URLabout.html ではなく、about のようなクリーン URL 構造を作成するには、Hugo などの静的サイトジェネレータで、index.html を含むページ (/about/index.html) のディレクトリを生成します。Amplify コンソールでは、必要に応じて末尾のスラッシュを追加することによって、クリーン URL を自動的に作成します。以下の表は、さまざまなシナリオをまとめたものです。

43

AWS Amplify コンソールユーザーガイドプレースホルダー

ブラウザでのユーザー入力 アドレスバーの URL 提供されたドキュメント

/about /about /about.html

/about (when about.htmlreturns 404)

/about/ /about/index.html

/about/ /about/ /about/index.html

プレースホルダー次のサンプルコードを使用して、フォルダ構造内のパスを別のフォルダ内の一致する構造にリダイレクトすることができます。

元のアドレス 送信先アドレス リダイレクトの種類 国コード

/docs/<year>/<month>/<date>/<itemid>

/documents/<year>/<month>/<date>/<itemid>

permanent redirect(301)

 

JSON [{"source": "/docs/<year>/<month>/<date>/<itemid>", "status": "301", "target": "/documents/<year>/<month>/<date>/<itemid>","condition": null}]

クエリ文字列とパスパラメータ次のサンプルコードを使用して、元のアドレスのクエリ文字列要素の値と一致する名前のパスをフォルダにリダイレクトできます。

元のアドレス 送信先アドレス リダイレクトの種類 国コード

/docs?id=<my-blog-id-value

/documents/<my-blog-post-id-value>

permanent redirect(301)

 

JSON [{"source": "/docs?id=<my-blog-id-value", "status": "301", "target": "/documents/<my-blog-post-id-value>", "condition": null}]

次のサンプルコードを使用して、特定レベルのフォルダ構造で見つからないパスをすべて、指定フォルダ内の index.html にリダイレクトすることができます。

元のアドレス 送信先アドレス リダイレクトの種類 国コード

/documents/<folder>/<child-folder>/<grand-child-folder>

/documents/index.html

404  

JSON [{"source": "/documents/<x>/<y>/<z>", "status": "404", "target": "/documents/index.html", "condition": null}]

44

AWS Amplify コンソールユーザーガイドリージョンベースのリダイレクト

リージョンベースのリダイレクト次のサンプルコードを使用して、リージョンに基づきリクエストをリダイレクトできます。

元のアドレス 送信先アドレス リダイレクトの種類 国コード

/documents /documents/us/ 302 <US>

JSON [{"source": "/documents", "status": "302", "target": "/documents/us/", "condition": "<US>"}]

45

AWS Amplify コンソールユーザーガイド

アクセスの制限リリースされていない機能を使用する パブリックにアクセスできないパスワード保護機能ブランチ。

1. [App settings (アプリケーション設定)]、[アクセスコントロール] の順に選択します。2. 接続されたブランチのリストで、右上隅の [アクセスの管理] を選択します。

3. 以下のいずれかを行います。• 接続されたすべてのブランチに適用するグローバルなパスワードを設定できます。たとえ

ば、master、dev、feature を接続している場合は、グローバルパスワードを使用して、すべてのブランチに同じユーザー名およびパスワードを設定することができます。

• パスワードはブランチレベルで設定できます。

46

AWS Amplify コンソールユーザーガイド環境変数の設定

Environment Variables環境変数は、ビルド時に利用可能なキーと値のペアです。これらの設定では、次のいずれも使用できます。

• データベース接続の詳細• サードパーティーの API キー• 別のカスタマイズパラメータ• シークレット

ベストプラクティスとして、環境変数を使用して、これらの設定を公開することができます。追加する環境変数はすべて、不正アクセスを防ぐために暗号化されているため、シークレット情報はこれらの環境変数を使用して保存できます。

環境変数の設定1. Amplify コンソールで、[アプリ設定]、[環境変数] の順に選択します。2. [キー] と [値] のフィールドに、アプリ環境変数をすべて入力します。デフォルトでは、環境変数

は、Amplify コンソールによってすべてのブランチに適用されるため、新しいブランチへの接続時に変数を再入力する必要はありません。

3. [Save] を選択します。

ブランチ専用に変数をカスタマイズする必要がある場合は、ブランチの上書きを追加できます。そのためには、[アクション]、[Add variable override (変数の上書きを追加する)] の順に選択します。これで、ブランチに固有の一連の環境変数ができました。

47

AWS Amplify コンソールユーザーガイド環境変数にアクセスする

環境変数にアクセスするビルド中に環境変数にアクセスするには、ビルドコマンドに環境変数が含まれるようにビルド設定を編集します。

1. Amplify コンソールで、[アプリ設定]、[ビルド設定]、[編集] の順に選択します。2. 環境変数をビルドコマンドに追加します。これで、次回のビルド時に自分の環境変数にアクセスできる

ようになります。

build: commands: - npm run build:$BUILD_ENV

Amplify コンソールの環境変数Amplify コンソール内では、デフォルトでアクセス可能な環境変数を使用することができます。

変数名。 説明 例

AWS_APP_ID 現在のビルドのアプリ ID abcd123

AWS_BRANCH 現在のビルドのブランチ名 master

AWS_BRANCH_ARN 現在のビルドのブランチ ARN arn:xxxxx/xxxx/xxxxx

AWS_CLONE_URL git リポジトリの内容を取得するために使用されるクローン URL

git@github.com:<user-name>/<repo-name>.git

AWS_COMMIT_ID 現在のビルドのコミット ID。再ビルドの「HEAD」

xxxxxxxxxxxxxxxxxx

AWS_JOB_ID 現在のビルドのジョブ ID。これには、「0」のパディングが含ま

0000000001

48

AWS Amplify コンソールユーザーガイドAmplify コンソールの環境変数

れるため、長さは常に同じになります。

49

AWS Amplify コンソールユーザーガイド例: セキュリティヘッダー

カスタムヘッダーカスタム HTTP ヘッダーを使用すると、HTTP レスポンスごとにヘッダーを指定することができます。レスポンスヘッダーは、デバッグ、セキュリティ、および情報提供に使用できます。アプリのカスタムヘッダールールを次のように定義します。

1. 左側のナビゲーションバーから、[App Settings] > [Build Settings] の順に選択し、[Edit] を選択してbuildspec を編集します。

2. YML ファイルのフロントエンドセクションで、次のように、アプリのカスタムヘッダーを追加します。

version: 0.1frontend: phases: build: post_build: artifacts: baseDirectory: customHeaders: - pattern: '*.json' headers: - key: 'custom-header-name-1' value: 'custom-header-value-1' - key: 'custom-header-name-2' value: 'custom-header-value-2' - pattern: '/path/*' headers: - key: 'custom-header-name-1' value: 'custom-header-value-2'

• パターン - パターンと一致するすべての URL ファイルパスに適用されるヘッダー。• ヘッダー - ファイルパターンと一致するヘッダーを定義します。キーは、カスタムヘッダーの名

前、値は、カスタムヘッダーの値を表します。• HTTP ヘッダーの詳細については、Mozilla の HTTP ヘッダーのリストに関するドキュメントを参照して

ください。

1. [Save] を選択します。カスタムヘッダー設定がアプリに適用されるようになりました。

例: セキュリティヘッダー次のセキュリティヘッダーは、HTTPS を適用し、XSS 攻撃を回避して、ブラウザをクリックジャックから守ります。これをアプリの buildspec に追加し、[Save] を選択してカスタムヘッダー設定を適用します。

customHeaders: - pattern: '**/*' headers: - key: 'Strict-Transport-Security' value: 'max-age=31536000; includeSubDomains' - key: 'X-Frame-Options' value: 'SAMEORIGIN' - key: 'X-XSS-Protection' value: '1; mode=block'

50

AWS Amplify コンソールユーザーガイド例: セキュリティヘッダー

- key: 'X-Content-Type-Options' value: 'nosniff' - key: 'Content-Security-Policy' value: 'default-src self'

51

AWS Amplify コンソールユーザーガイド

着信ウェブフックGit リポジトリにコードを入力せずにビルドをトリガーするように Amplify コンソールで着信ウェブフックを設定します。ウェブフックトリガーは、コンテンツの変更時にビルドをトリガーしたり、Zapier などのサービスを使用して日々ビルドをトリガーしたりするために、ヘッドレス CMS ツール (Contentful やGraphCMS など) とともに使用できます。

1. Amplify コンソールにログインしてアプリを選択します。2. [App Settings] > [Build Settings] の順に移動して [Incoming Webhook] コンテナまでスクロールします。

[Create webhook (ウェブフックの作成)] を選択します。

3. ウェブフックに名前を付けて、[保存] を選択します。

4. ウェブフックの URL をコピーするか、コマンドラインで curl コマンドを実行して新しいビルドをトリガーすることができます。

52

AWS Amplify コンソールユーザーガイド

53

AWS Amplify コンソールユーザーガイドカスタムビルドイメージ

カスタムビルドイメージとライブパッケージのアップデート

トピック• カスタムビルドイメージ (p. 54)• ライブパッケージのアップデート: (p. 55)

カスタムビルドイメージカスタムビルドイメージを使用して、カスタマイズされたビルド環境を作成することができます。デフォルトのコンテナを使用して、ビルド中に特定の依存関係をインストールするのに長い時間がかかる場合は、独自の Docker イメージを作成してビルド中に参照することができます。イメージは Docker Hub、またはパブリックの Amazon Elastic Container Registry でホストできます。ここでは、Docker pull コマンドと同じ形式を使用することを想定しています (例: node:latest)。パブリック ECR インスタンスの場合は、完全な URL を入力する必要があります (例: aws_account_id.dkr.ecr.us-west-2.amazonaws.com/amazonlinux:latest)。

カスタムビルドイメージの設定1. アプリの詳細ページから、[App Settings] > [Build Settings] を選択します。2. [ビルドイメージ設定] コンテナから、[編集] を選択します。

3. カスタムビルドイメージを指定し、[保存] を選択します。

54

AWS Amplify コンソールユーザーガイドカスタムビルドイメージの要件

カスタムビルドイメージの要件カスタムビルドイメージを Amplify コンソールのビルドイメージとして使用するには、イメージのいくつかの要件があります。

1. cURL: カスタムイメージを起動すると、ビルドランナーがコンテナにダウンロードされるため、cURLが必要です。この依存関係が欠落している場合は、build-runner で出力を生成できないため、ビルドは何も出力することなく即座に失敗します。

2. Git: Git リポジトリのクローンを作成するには、Git をイメージにインストールする必要があります。この依存関係が欠落している場合、「リポジトリのクローンを作成する」ステップは失敗します。

3. OpenSSH: リポジトリのクローンを安全に作成するには、OpenSSH を使用して、ビルド中に一時的にSSH キーを設定する必要があります。OpenSSH パッケージには、ビルドランナーでこれを行うのに必要なコマンドが揃っています。

4. (NPM ベースのビルド) Node.JS+NPM: ビルドランナーでは Node はインストールされませんが、イメージにインストールされている Node と NPM に依存します。これは、NPM パッケージまたはノード固有のコマンドを必要とするビルドにのみ必要です。

ライブパッケージのアップデート:ライブパッケージのアップデートを使用すると、デフォルトのビルドイメージで使用するパッケージのバージョンと依存関係を指定できます。デフォルトのビルドイメージには、いくつかのパッケージと依存関係がプリインストールされています (例: Hugo、Amplify CLI、Yarn)。ライブパッケージのアップデートでは、これらの依存関係のバージョンを上書きして特定のバージョンを指定するか、常に最新バージョンがインストールされていることを確認できます。ライブパッケージのアップデートが有効になっている場合は、ビルドが実行される前に、ビルドランナーは最初に指定された依存関係を更新 (またはダウングレード) します。これにより、依存関係の更新にかかる時間に比例してビルド時間が長くなりますが、同じバージョンの依存関係を使用してアプリをビルドできるというメリットがあります。

ライブアップデートの設定1. アプリの詳細ページから、[App Settings] > [Build Settings] を選択します。2. [ビルドイメージ設定] セクションから、[編集] を選択します。

55

AWS Amplify コンソールユーザーガイドライブアップデートの設定

3. [Add package version override] リストから、変更するパッケージを選択します。

4. この依存関係の特定のバージョンを入力するか、デフォルト (最新) のままにします。最新を使用すると、依存関係は利用可能なバージョンに常にアップグレードされます。[保存] を選択して、設定を適用します。

56

AWS Amplify コンソールユーザーガイド

AWS CloudFormation のサポート「Amplify コンソールの CloudFormation のドキュメント」にアクセスします。

AWS CloudFormation テンプレートを使用して Amplify コンソールリソースをプロビジョンすると、再現性および信頼性の高いウェブアプリをデプロイできるようになります。CloudFormation では、クラウド環境内のすべてのインフラストラクチャリソースを記述してプロビジョニングするための共通言語が提供されます。また複数の AWS アカウントやリージョンへの展開を簡素化 (数回クリックするのみ) できます。

57

AWS Amplify コンソールユーザーガイドステップ 1: IAM コンソールにログインする

アプリ接続時にサービスロールをAmplify コンソールに追加する

Amplify コンソールでは、フロントエンドでバックエンドリソースをデプロイするためのアクセス許可が必要です。このアクセス許可を付与するには、サービスロールを使用します。サービスロールは、お客様に代わって他のサービスを呼び出すときに Amplify コンソールが引き受ける IAM ロールです。このガイドでは、Amplify CLI リソースをデプロイするために必要なアカウントへのフルアクセスを持つ Amplify サービスロールを作成します。詳細はこちら。

ステップ 1: IAM コンソールにログインするIAM コンソールにログインし、左側のナビゲーションバーから [ロール] を選択して、[ロールの作成] を選択します。

ステップ 2: Amplify ロールを作成するロールの選択画面で Amplify を探して、[Amplify-Backend Deployment] ロールを選択します。すべての項目でデフォルト値を選択し、ロールの名前を選択します (例: AmplifyConsoleServiceRole-AmplifyRole)。

ステップ 3: Amplify コンソールに戻るAmplify コンソールのオンボーディング画面で、[更新] を選択し、先ほど作成したロールを選択します。AmplifyConsoleServiceRole-AmplifyRole のようになります。

58

AWS Amplify コンソールユーザーガイドステップ 3: Amplify コンソールに戻る

既存のアプリがすでにある場合は、[App settings > General] でサービスロール設定を探し、ボックスの右上隅から [編集] を選択します。ドロップダウンから先ほど作成したサービスロールを選択し、[保存] を選択します。

バックエンドリソースをデプロイするアクセス許可が Amplify コンソールに付与されました。

59

AWS Amplify コンソールユーザーガイド

インスタントキャッシュの無効化Amplify コンソールは、コードコミットごとに CDN のインスタントキャッシュの無効化をサポートします。これにより、コンテンツ配信ネットワーク (CDN) のキャッシングのパフォーマンスのメリットを犠牲にすることなく、単一ページまたは静的アプリに更新を即座にデプロイできます。

Amplify コンソールでキャッシュの無効化を処理する方法について説明します。

60