Amazon Web Services ブログ

AWS Amplify CLI から AWS Amplify コンソールでアプリをホストする

AWS Amplify と AWS Amplify コンソール をお試しいただけましたか? 私は、アイデアからプロトタイプに至るまで AWS で新しいウェブアプリケーションを取得する、最も速い方法を 1 つ提供します。それで AWS Amplify と AWS Amplify コンソールとは何ですか? AWS Amplify は、最新のアプリケーションを構築するための定評あるフレームワークです。認証 (Amazon Cognito 経由) またはストレージ (Amazon Simple Storage Service (S3) 経由) または GraphQL API などのサービスをすべてコマンドラインインターフェイス経由で簡単に追加するためのツールチェーンを備えています。AWS Amplify コンソール は、簡単に最新のウェブアプリを継続的にデプロイしてホスティングします。React、Angular、Vue.js、Ionic、Ember など、シングルページアプリ (SPA) フレームワークのフロントエンドおよびバックエンドアセットのホストをサポートします。また、Gatsby、Eleventy、Hugo、VuePress、Jekyll などの静的サイトジェネレーターもサポートしています。

本日のリリースにより、AWS Amplify CLI から利用可能なホスティングオプションに、S3 と Amazon CloudFront に加えて Amplify コンソールが含まれるようになりました。Amplify コンソールを使用して、継続的なデプロイ、インスタントキャッシュの無効化、カスタムリダイレクト、カスタムドメインの簡単設定などの機能を利用できます。

Amplify アプリの初期化

簡単な例を見てみましょう。Amazon Transcribe の静的サイトのデモをデプロイしましょう。AWS コマンドラインインターフェイス (CLI) と AWS Amplify CLI が既にインストールされています。サンプルコードを分岐させ、ローカルマシンにクローンを作成しました。次の gif で、AWS Amplify アプリの初期化プロセスを確認できます。(私は gif に向けて少しスピードアップさせました。アプリの作成には数秒かかる場合があります。)

「Amplify の初期化」ワークフローを示すターミナルセッション

アプリを初期化したら、サービスを追加できます。AWS Amplify コンソール経由でホスティングを追加しましょう。ホスティング用に Amplify コンソールを選択した後、git ベースのワークフローを使用して手動デプロイまたは連続デプロイを選択できます。

継続的なデプロイ

まず、git リポジトリの変更がビルドとデプロイをトリガーするように、継続的なデプロイを設定します。

Amplify コンソールを Amplify プロジェクトに追加するターミナルセッションのスクリーンショット

継続的なデプロイを設定するためのワークフローには、迅速なブラウザセッションが必要です。まず、git プロバイダーを選択します。分岐リポジトリが GitHub にあるため、Amplify コンソールが GitHub アカウントを使用することを許可する必要があります。

git プロバイダー選択のスクリーンショット

プロバイダーが承認されると、リポジトリとブランチを選択して変更を監視します。

リポジトリとブランチの選択を示すスクリーンショット

AWS Amplify コンソールは、package.json のコンテンツに基づいて、正しいビルド設定を自動検出しました。

ビルド設定のスクリーンショット

設定を確認すると、最初のビルドとデプロイが開始されます。その後、選択した git ブランチを変更すると、追加のビルドとデプロイが行われます。次に、CLI でワークフローを完了する必要があります。そのためには、新しい Amplify コンソールアプリの ARN が必要です。ブラウザで、[アプリの設定]、[全般] をクリックして、ARN をコピーしてから端末に貼り付けて、ステータスを確認します。

アプリの ARN が設定されているターミナルウィンドウのスクリーンショット

ブラウザで URL を簡単に確認すると、アプリが正常にデプロイされていることが確認できます。

この記事でデプロイしたサンプルアプリのスクリーンショット

手動でのデプロイ

Amplify コンソールを使用した手動デプロイは、便利な機能も多数備えています。CLI でフロントエンド環境を管理し、テスト環境または開発環境を簡単に追加できるようになりました。また、簡単に URL リダイレクトと書き換えを追加したり、HTTP 基本認証経由でユーザー名/パスワードを追加したりできます。

手動デプロイは簡単に設定できます。環境名を設定するだけです。デプロイするときは、amplify publish と、プロジェクトの初期化中に定義されたビルドスクリプトが実行されます。生成されたアーティファクトは自動的にアップロードされます。

手動デプロイが設定されているターミナルウィンドウのスクリーンショット

手動でデプロイすると、CLI から複数のフロントエンド環境 (dev や prod など) を直接セットアップできます。新しい開発環境を作成するには、amplify env add (dev という名前) と、amplify publish を実行します。これにより、Amplify コンソールに 2 番目のフロントエンド環境が作成されます。すべてのフロントエンド環境とバックエンド環境を表示するには、CLI から Amplify コンソールを実行して、Amplify コンソールアプリを開きます。

数週間前に AWS Amplify コンソールを初めて使用して以来、アプリケーション、特に静的サイトをデプロイするための信頼できる方法になりました。AWS Amplify コンソールを使用したホスティングのシンプルさが、Amplify CLI に拡張されることを楽しみにしています。皆さんもそうであることを願います。構築がうまくいきますように。

— Brandon