Amazon Web Services ブログ

Amplify コンソール – フルスタックのサーバーレスウェブアプリのためのホスティング

AWS Amplify コンソールはフルスタックウェブアプリケーションのホスティングサービスで、使用したいソースコードリポジトリからの継続的なデプロイメントが可能です。Amplify コンソールは、2018 年 11 月に AWS re:Invent で発表されました。それ以来、チームはお客様のフィードバックに耳を傾け、迅速にイテレーションを行って 新しい機能をいくつかリリースしました。以下はそれらの簡単な要約です。

キャッシュの即時無効化
Amplify コンソールでは、コンテンツ配信ネットワーク、つまり CDN を介して、サーバーレスバックエンドを使用する単一ページのウェブアプリ、または静的サイトをホストすることができます。CDN は、世界中のエッジロケーションでファイルをキャッシュする分散されたサーバーのネットワークで、ウェブファイルアセットの低レイテンシー分散を可能にします。

これまで、CDN でコンテンツを更新するには、キャッシュを手動で無効化し、変更がグローバルに伝播されるまで 15～20 分待つ必要がありました。頻繁な更新を行うために、開発者はアセットヘッダーに短い TTL (time-to-live) を設定する (これによって更新は速くなりますが、パフォーマンスには悪影響が生じます) などの次善策を講じていましたが、今では、より迅速なデプロイメントとより高速なパフォーマンスの間で妥協する必要はありません。Amplify コンソールは、リポジトリに対するコミットコードごとに変更を構築して CDN にデプロイし、これらはブラウザで即時に表示できます。

「Deploy To Amplify Console」ボタン

Deploy To Amplify Console

GitHub でプロジェクトソースコードをパブリッシュするときは、Readme ドキュメントに「Deploy To Amplify Console」ボタンを提供することによって、他の開発者がアプリケーションを簡単に構築してデプロイできるようにすることが可能です。ボタンをクリックすると Amplify コンソールが開き、コードをデプロイするための 3 つのステップのプロセスを提案します。

このプロセスをこれらのプロジェクト例でテストして、こちらのドキュメントも参照してください。独自のコードリポジトリへのボタンの追加は簡単で、この行を Readme ドキュメントに追加するだけです (GitHub URL の username と repository の名前を置き換えるようにしてください)。

[![amplifybutton](https://oneclick.amplifyapp.com/button.svg)](https://console.thinkwithwp.com/amplify/home#/deploy?repo=https://github.com/username/repository)

手動でのデプロイメント
開発者が一人しかいないシンプルなウェブサイトを含めて、すべてをバージョンコントロールすることは良いアイデアだと思いますが、デプロイメントのソースとしてソースコードリポジトリを使用したくないという場合に備えて、Amplify コンソールでは zip ファイル、ラップトップ上のローカルフォルダ、Amazon S3 バケット、または Dropbox の共有リポジトリなどの HTTPS URL をデプロイすることが可能です。

新しい Amplify コンソールプロジェクトを作成する場合は、[Deploy without Git Provider] オプションを選択します。
次に、ソースファイル (お使いのラップトップ、Amazon S3、または HTTPS URI) を選択します。

AWS CloudFormation 統合
開発者はオートメーションが大好きです。コードまたはインフラストラクチャのデプロイメントも同じで、インフラストラクチャデプロイメントが自動化されており、反復可能であることを確実にしなければなりません。AWS CloudFormation では、YAML または JSON 記述に基づいて、クラウドでのインフラストラクチャの作成を自動化することができます。Amplify コンソールは、AWS CloudFormation に 3 つの新しいリソースタイプを追加しました。

  • AWS::Amplify::App
  • AWS::Amplify::Branch
  • AWS::Amplify::Domain

これらはそれぞれ、新しい Amplify コンソールアプリの作成、Git ブランチの定義、および使用する DNS ドメイン名の定義を可能にします。

AWS CloudFormation は、ソースコードリポジトリに接続して、それに webhook を追加します。これが行われるようにするには、Github の個人アクセストークンを含める必要があります。これに関する詳細は、このブログ記事で説明されています。認証情報 (または OAuth トークン) は Cloudformation テンプレートにハードコードしないようにしてください。その代わりにパラメータを使用します。

複数の Git ブランチのデプロイメント
AWS では、CI/CD ツールがチームのワークフローに適合するのであって、その逆であるべきではないと考えています。Amplify コンソールはブランチパターンデプロイメントをサポートしており、特定のパターンに一致するブランチを、追加設定なしで自動的にデプロイすることが可能です。パターンの一致は、正規表現に基づいています。

一般的に、新しい機能をテストしたい場合は Git に新しいブランチを作成します。Amplify コンソールと Amplify CLI はこれを検知し、サーバーレスアプリのために個別のバックエンドとホスティングインフラストラクチャをプロビジョニングします。

ブランチ検知を有効にするには、左側のメニューで General > Edit とクリックし、[Branch Autodetection] をオンにします。

カスタム HTTP ヘッダー
Amplify コンソールをカスタマイズして、カスタマイズされた HTTP レスポンスヘッダーを送信することができます。レスポンスヘッダーは、デバッグ、セキュリティ、または情報目的で使用できます。カスタムヘッダーを追加するには、App Settings > Build Settings と選択してから buildspec を編集します。たとえば、TLS トランスポートを実行して XSS 攻撃を防ぐには、以下のヘッダーを追加できます。

customHeaders:
        - pattern: '**/*'
          headers:
                - key: 'Strict-Transport-Security'
                        value: 'max-age=31536000; includeSubDomains'
                - key: 'X-Frame-Options'
                        value: 'X-Frame-Options: SAMEORIGIN'
                - key: 'X-XSS-Protection'
                        value: 'X-XSS-Protection: 1; mode=block'
                - key: 'X-Content-Type-Options'
                        value: 'X-Content-Type-Options: nosniff'
                - key: 'Content-Security-Policy'
                        value: "default-src 'self'"

こちらのドキュメントには、より詳しい情報が記載されています。

ビルドのためのカスタムコンテナ
最後に、AWS ではビルド環境にもいくつかの変更を行いました。Amplify コンソールはバックグラウンドで AWS CodeBuild を使用します。現在、デフォルトのビルドコンテナイメージは Amazon Linux 2 をベースとしており、Serverless Application Model (SAM) CLI が事前にインストールされています。何らかの理由でビルドに独自のコンテナを使用したいという場合は、そうするように Amplify コンソールを設定できます。App Settings > Build Settings と選択します。

次に、ビルドイメージの設定を編集します。

コンテナイメージにはいくつかの必須条件があります。コンテナイメージには cURL、git、および OpenSSH が必要で、NodeJS プロジェクトを構築している場合は node と npm が必要です。いつものように、詳細はこのドキュメントで説明されています。

これらの新しい機能はそれぞれ、お客様のフィードバックをきっかけとして構築されたものです。これからも、皆さんにとって何が大切かについてのご意見をお聞かせください。そして今年後半以降も、より多くの変更が行われることをご期待ください。

— seb