翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
AWS Amplifyホスティングへようこそ
AWS Amplifyは、フロントエンドのウェブおよびモバイルデベロッパーが AWSで迅速かつ簡単にフルスタックアプリケーションを構築できるようにする、専用のツールと機能のセットです。Amplify は、Amplify Hosting と Amplify Studio の 2 つのサービスを提供します。Amplify Hosting は、継続的なデプロイメントでフルスタックのサーバーレスウェブアプリケーションをホストするための git ベースのワークフローを提供します。このユーザーガイドでは、Amplify Hostingを使い始めるために必要な情報を提供します。
Amplify Hosting の機能
-
Amplify Hosting は、React、Angular、Vue.js、Ionic、Ember などの一般的な SPA フレームワークと、Gatsby、Eleventy、Hugo VuePress、Jekyll などの静的サイトジェネレーターをサポートしています。
-
新しいブランチを接続して、フロントエンドとバックエンドの本番稼働環境とステージング環境を管理します。機能ブランチのデプロイを参照してください。
-
アプリケーションをカスタムドメインに接続。「カスタムドメインの設定」を参照してください。
-
SSR ウェブアプリケーションをデプロイしてホストします。Amplify Hosting は、Next.js フレームワークを使用して作成されたアプリケーションを自動的に検出します。
また、Amplify は、アプリケーションのビルド出力を Amplify ホスティングが想定するディレクトリ構造に変換するオープンソースのビルドアダプターを備えた Javascript ベースの SSR フレームワークもサポートしています。アダプターは、Nuxt アプリケーションを Amplify にデプロイするために使用できます。
-
プルリクエストのプレビューを設定して、コードレビュー中に変更をプレビューできます。
-
エンドツーエンドのテストでアプリの品質を向上させましょう。end-to-end 「 のテスト」を参照してください。
-
パブリックアクセス可能にせずに新しい機能を使用できるように、ウェブアプリをパスワードで保護します。アクセスを制限するを参照してください。
-
リライトとリダイレクトを設定して SEO ランキングを維持し、クライアントのアプリの要件に基づいてトラフィックをルーティングします。リダイレクトの使用を参照してください。
-
アトミックデプロイにより、Web アプリはすべてのデプロイが完了したときに更新されるようになり、メンテナンスウィンドウが必要なくなります。これにより、ファイルが正しくアップロードされないというシナリオが解消されます。
Amplify Hostingの使用開始
Amplifyのホスティング機能を使い始めるには、既存のコードで使用開始のチュートリアルをご覧ください。チュートリアルを完了すると、git リポジトリ (GitHub、 BitBucket クラウド GitLab、AWS CodeCommit) を接続して継続的なデプロイを設定できます。あるいは、フルスタックの継続的なデプロイサンプルから始めることもできます。
Amplify Studio
Amplify Studio には、AWS Management ConsoleでAWS Amplifyのコンソールからアクセスできます。Amplify Studio は、スケーラブルなフルスタックのウェブおよびモバイルアプリの作成を簡素化するビジュアル開発環境です。Studio を使用して、一連の UI コンポーネントを使用してフロントエンド ready-to-use UI を構築し、アプリバックエンドを作成して、2 つを接続します。AmplifyのドキュメントにあるAmplify Studio
Amplify Studio の機能
-
ビジュアルデータモデリングにより、クラウドインフラストラクチャではなく、ドメイン固有のオブジェクトに集中できます。
-
アプリの認証を設定します。
-
強力でわかりやすい認証。
-
ですべてのバックエンド機能nfrastructure-as-code を設定しますAWS CloudFormation。
-
Amplify コマンドラインインターフェイス (CLI) と連携します。Studioで行ったすべての更新をCLIに取り込むことができます。
-
メールでユーザーを招待し、バックエンドの設定と管理を行います。これらのユーザーは、電子メールを使用してAmplify CLI にログインすることもできます。
-
マークダウンをサポートするコンテンツ管理。
-
アプリのユーザーとグループを管理します。
-
Studioのビジュアルデザイナーを使用してフロントエンド UI コンポーネントを構築します。ビルド済みの UI コンポーネントライブラリにある多数のデザインから選択できます。
-
デザイナーが作成した Figma のプロトタイプを React コードとして Studio にインポートします。
-
テーマを使用してフロントエンド UI をカスタマイズし、アプリのコンポーネントにグローバルスタイルを適用します。
-
Studio 内で UI コンポーネントを直接設定してテストし、データの更新と表示方法を確認します。
-
いくつかの簡単な手順で、クラウド接続バックエンドをフロントエンド UI にバインドできます。
Amplify Studioの使用開始
Studio を使用してバックエンドを作成し始めるのに、AWSアカウントは必要ありません。AWSアカウントがなくても、バックエンドのデータのモデリングをローカルで開始できます。
AWSアカウントがあれば、バックエンド環境を管理するための Studio の拡張機能のほか、アプリのバックエンドに接続できるフロントエンド UI コンポーネントを作成するためのビジュアルデザイナーにもアクセスできます。詳細については、「Amplifyドキュメント」の「ご利用開始にあたって
最新の SPA Web アプリケーション
このユーザーガイドは、最新のシングルページ Web アプリケーション(SPA)の基本を理解しているお客様を対象としています。最新のWebアプリケーションは、すべてのアプリケーションのコンポーネントを静的ファイルにパッケージ化する、単一ページの Web アプリケーションとして構築されます。従来のクライアントサーバー型のウェブアーキテクチャには、エクスペリエンスが低下する原因がありました。ボタンをクリックしたり検索したりするたびに、サーバーのラウンドトリップや、アプリケーション全体の再レンダリングが必要でした。最新のウェブアプリケーションは、アプリのフロントエンドまたはユーザーインターフェイスをブラウザに効率的に提供することで、ネイティブなアプリケーションのようなユーザーエクスペリエンスを提供します。JavaScript これにより、ページを再ロードすることなくバックエンド機能を呼び出すことができます。
最近のウェブアプリケーション機能は、データベース、認証サービス、ブラウザで実行されているフロントエンドコードや、クラウドで実行されているバックエンドビジネスロジック、またはAWS Lambda関するなど、複数の場所に分散されていることが少なくありません。そのため、開発者がフロントエンドとバックエンド間でデプロイメントを慎重に調整して、部分的または失敗したデプロイメントを回避する必要があり、アプリケーションのデプロイは複雑で時間がかかります。AAmplify は、単一ワークフローのフロントエンドとバックエンドのデプロイを簡素化します。