翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# Amplify ホスティングへのアプリのデプロイの概要
Amplify ホスティングの仕組みを理解できるように、以下のチュートリアルでは、Amplify がサポートする一般的な SSR フレームワークを使用して作成されたアプリケーションの構築とデプロイについて説明します。
**Topics**
+ [Next.js アプリケーションをデプロイする](getting-started-next.md)
+ [Nuxt.js アプリをデプロイする](get-started-nuxt.md)
+ [Astro.js アプリをデプロイする](get-started-astro.md)
+ [SvelteKit アプリをデプロイする](get-started-sveltekit.md)
# Next.js アプリを Amplify ホスティングにデプロイする
このチュートリアルでは、Git リポジトリから Next.js アプリケーションを構築およびデプロイする方法について説明します。
このチュートリアルを始める前に、次の前提条件を完了してください。
**にサインアップする AWS アカウント**
まだ AWS のお客様でない場合は、オンラインの手順に従って [を作成 AWS アカウント](https://portal.aws.amazon.com/billing/signup#/start/email)する必要があります。サインアップすると、Amplify やアプリケーションで使用できるその他の AWS サービスにアクセスできます。
** アプリケーションの作成**
「*Next.js ドキュメント*」の [create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app) 手順を使用して、このチュートリアルで使用する基本的な Next.js アプリケーションを作成します。
**Git リポジトリを作成する**
Amplify は、GitHub、Bitbucket、GitLab、および をサポートしています AWS CodeCommit。`create-next-app` アプリケーションを Git リポジトリにプッシュします。
## ステップ 1: Git リポジトリの接続
このステップでは、Git リポジトリの Next.js アプリケーションを Amplify ホスティングに接続します。
**アプリを GitHub リポジトリに接続するには**
1. [Amplify コンソールを開きます](https://console.aws.amazon.com/amplify/)。
1. 現在のリージョンに最初のアプリをデプロイしている場合は、デフォルトで **[AWS Amplify]** サービスページから開始できます。
ページの上部で、**[アプリケーションをデプロイする]** を選択します。
1. **[Amplify で構築を開始]** ページで、自分の Git リポジトリプロバイダーを選択し、**[次へ]** を選択します。
GitHub リポジトリの場合、Amplify は GitHub Apps の機能を使用して Amplify へのアクセスを承認するようになります。GitHub App のインストールと認証の詳細については、[GitHub リポジトリへの Amplify アクセスの設定](setting-up-GitHub-access.md) をご参照ください。
**注記**
Bitbucket、GitLab、または で Amplify コンソールを承認すると AWS CodeCommit、Amplify はリポジトリプロバイダーからアクセストークンを取得しますが、 AWS サーバーには*トークンを保存しません*。Amplify は、特定のリポジトリにのみインストールされているデプロイキーを使用してリポジトリにアクセスします。
1. 「**リポジトリブランチを追加**」ページで、以下の操作を行います。
1. 接続するリポジトリの名前を選択します。
1. 接続するリポジトリブランチの名前を選択します。
1. [**次へ**] を選択します。
## ステップ 2: ビルド設定を確認する
Amplify は、デプロイしているブランチに対して実行するビルドコマンドのシーケンスを自動的に検出します。このステップでは、ビルド設定を確認して承認します。
**アプリのビルド設定を確認するには**
1. **[アプリ設定]** ページで、**[ビルド設定]** セクションを見つけます。
**[フロントエンドのビルドコマンド]** と **[ビルド出力ディレクトリ]** が正しいことを確認します。この Next.js サンプルアプリケーションの場合、**[ビルド出力ディレクトリ]** は `.next` に設定されます。
1. サービスロールを追加する手順は、新しいロールを作成するか、既存のロールを使用するかによって異なります。
+ 新規ロールを作成するには:
1. **[新しいサービスロールの作成と使用]** を選択します。
+ 既存のサービスロールを使用するには:
1. **[既存のロールを使用する]** を選択します。
1. サービスロールリストで、使用するロールを選択します。
1. [**次へ**] を選択します。
## ステップ 3: アプリケーションをデプロイする
このステップでは、 AWS グローバルコンテンツ配信ネットワーク (CDN) にアプリケーションをデプロイします。
**アプリを保存してデプロイするには**
1. **[レビュー]** ページで、リポジトリの詳細とアプリの設定が適切であることを確認します。
1. **[保存してデプロイ]** を選択します。フロントエンドのビルドには通常 1〜2 分かかりますが、アプリのサイズによって変わります。
1. デプロイが完了したら、`amplifyapp.com` デフォルトドメインへのリンクを使用してアプリを表示できます。
**注記**
Amplify のアプリケーションのセキュリティを強化するために、*amplifyapp.com* ドメインは[パブリックサフィックスリスト (PSL)](https://publicsuffix.org/) に登録されています。セキュリティを強化するために、Amplify アプリケーションのデフォルトドメイン名に機密性の高いCookieを設定する必要がある場合は、`__Host-`プレフィックスの付いたCookieを使用することをお勧めします。このプラクティスは、クロスサイトリクエストフォージェリ (CSRF) 攻撃からドメインを防ぐ際に役立ちます。詳細については、Mozilla 開発者ネットワークの「[Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes)」ページを参照してください。
## ステップ 4: (省略可) リソースをクリーンアップする
チュートリアルでデプロイしたアプリが不要になった場合は、削除できます。このステップにより、使用していないリソースに対して課金されることがなくなります。
**アプリを削除するには**
1. ナビゲーションペインの **[アプリの設定]** メニューから、**[全般設定]** を選択します。
1. **[全般設定]** ページで、**[アプリの削除]** を選択します。
1. 確認ウィンドウで、**delete** と入力します。その後、**[アプリの削除]** を選択します。
## アプリに機能を追加する
これで、Amplify にアプリがデプロイされたので、ホストされたアプリで利用可能な機能の一部を以下で確認できます。
**環境変数**
多くの場合、アプリケーションは実行時に構成情報を必要とします。この構成には、データベース接続の詳細、API キー、パラメータなどがあります。環境変数は、ビルド時にこれらの構成を公開する方法として使用できます。詳細については、「[環境変数](environment-variables.md)」を参照してください。
**カスタムドメイン**
このチュートリアルでは、Amplify は `https://branch-name.d1m7bkiki6tdw1.amplifyapp.com` などの URL を使用して、デフォルトの `amplifyapp.com` ドメインでアプリをホストします。アプリをカスタムドメインに接続すると、ユーザーは、アプリがカスタム URL (`https://www.example.com` など) でホストされていることを理解できます。詳細については、「[カスタムドメイン名の設定](custom-domains.md)」を参照してください。
**プルリクエストのプレビュー**
Web プルリクエストプレビューは、コードを本番ブランチや統合ブランチにマージする前に、プルリクエスト (PR) からの変更をプレビューする方法をチームに提供します。詳細については、「[プルリクエストのウェブプレビュー](pr-previews.md)」を参照してください。
**複数の環境を管理する**
Amplify が機能ブランチと GitFlow ワークフローと連携して複数のデプロイをサポートする方法については、「[機能ブランチのデプロイとチームワークフロー](multi-environments.md)」を参照してください。
# Nuxt.js アプリを Amplify ホスティングにデプロイする
以下の手順に従って、Nuxt.js アプリケーションを Amplify ホスティングにデプロイします。Nuxt は Nitro サーバーを使用してプリセットアダプターを実装しています。これにより、追加の設定なしで Nuxt プロジェクトをデプロイできます。
**Nuxt アプリを Amplify ホスティングにデプロイするには**
1. にサインイン AWS マネジメントコンソール し、[Amplify コンソール](https://console.aws.amazon.com/amplify/)を開きます。
1. **[すべてのアプリ]** ページで、**[アプリの新規作成]** を選択します。
1. **[Amplify で構築を開始]** ページで、自分の Git リポジトリプロバイダーを選択し、**[次へ]** を選択します。
1. **[リポジトリブランチを追加]** ページで、次の操作を行います。
1. 接続するリポジトリの名前を選択します。
1. 接続するリポジトリブランチの名前を選択します。
1. [**次へ**] を選択します。
1. Amplify がアプリログを Amazon CloudWatch Logs に送信できるようにするには、コンソールで明示的に有効にする必要があります。**[詳細設定]** セクションを開いて、**[サーバーサイドレンダリング (SSR) のデプロイ]** セクションで **[SSR アプリのログを有効にする]** を選択します。
1. [**次へ**] を選択します。
1. **[レビュー]**ページで、**[保存してデプロイ] **を選択します。
# Astro.js アプリを Amplify ホスティングにデプロイする
以下の手順に従って、Astro.js アプリケーションを Amplify Hosting にデプロイします。既存のアプリケーションを使用することもできるし、Astro が提供する公式例のいずれかを使用してスターターアプリケーションを作成できます。スターターアプリケーションを作成するには、「*Astro ドキュメント*」の「[テーマまたはスターターテンプレートを使用する](https://docs.astro.build/en/install-and-setup/#use-a-theme-or-starter-template)」を参照してください。
SSR を使用して Astro サイトを Amplify ホスティングにデプロイするには、お使いのアプリケーションにアダプターを追加する必要があります。Astro フレームワーク用の Amplify 所有アダプターは維持されません。このチュートリアルでは、コミュニティのメンバーによって作成された `astro-aws-amplify` アダプターを使用します。このアダプターは、GitHub ウェブサイトの [github.com/alexnguyennz/astro-aws-amplify](https://github.com/alexnguyennz/astro-aws-amplify) で入手できます。このアダプターはメンテナンス AWS されません。
**Astro アプリを Amplify ホスティングにデプロイするには**
1. ローカルコンピュータで、デプロイする Astro アプリケーションに移動します。
1. このアダプターをインストールするには、ターミナルウィンドウを開いて以下のコマンドを実行します。この例では、[github.com/alexnguyennz/astro-aws-amplify](https://github.com/alexnguyennz/astro-aws-amplify) で利用可能なコミュニティアダプターを使用します。*astro-aws-amplify* は、使用しているアダプターの名前に置き換えることができます。
```
npm install astro-aws-amplify
```
1. Astro アプリのプロジェクトフォルダで、`astro.config.mjs` ファイルを開きます。ファイルを更新してアダプターを追加します。ファイルは次のようになっているはずです。
```
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import awsAmplify from 'astro-aws-amplify';
import sitemap from '@astrojs/sitemap';
// https://astro.build/config
export default defineConfig({
site: 'https://example.com',
integrations: [mdx(), sitemap()],
adapter: awsAmplify(),
output: 'server',
});
```
1. 変更をコミットし、プロジェクトを Git リポジトリにプッシュします。
これで、Astro アプリを Amplify にデプロイする準備が整いました。
1. にサインイン AWS マネジメントコンソール し、[Amplify コンソール](https://console.aws.amazon.com/amplify/)を開きます。
1. **[すべてのアプリ]** ページで、**[アプリの新規作成]** を選択します。
1. **[Amplify で構築を開始]** ページで、自分の Git リポジトリプロバイダーを選択し、**[次へ]** を選択します。
1. **[リポジトリブランチを追加]** ページで、次の操作を行います。
1. 接続するリポジトリの名前を選択します。
1. 接続するリポジトリブランチの名前を選択します。
1. [**次へ**] を選択します。
1. **[アプリ設定]** ページで、**[ビルド設定]** セクションを見つけます。**[ビルド出力ディレクトリ]** には、**.amplify-hosting** を入力します。
1. また、ビルド仕様でアプリのフロントエンドのビルドコマンドを更新する必要があります。ビルド仕様を開くには、**[YML ファイルの編集]** を選択します。
1. `amplify.yml` ファイルで、フロントエンドのビルドコマンドセクションを検索します。**mv node\$1modules ./.amplify-hosting/compute/default** と入力します。
ビルド設定ファイルは以下のようになっている必要があります。
```
version: 1
frontend:
phases:
preBuild:
commands:
- 'npm ci --cache .npm --prefer-offline'
build:
commands:
- 'npm run build'
- 'mv node_modules ./.amplify-hosting/compute/default'
artifacts:
baseDirectory: .amplify-hosting
files:
- '**/*'
cache:
paths:
- '.npm/**/*'
```
1. **[保存]** を選択します。
1. Amplify がアプリログを Amazon CloudWatch Logs に送信できるようにするには、コンソールで明示的に有効にする必要があります。**[詳細設定]** セクションを開いて、**[サーバーサイドレンダリング (SSR) のデプロイ]** セクションで **[SSR アプリのログを有効にする]** を選択します。
1. [**次へ**] を選択します。
1. **[レビュー]**ページで、**[保存してデプロイ] **を選択します。
# SvelteKit アプリを Amplify ホスティングにデプロイする
以下の手順に従って、SvelteKit アプリケーションを Amplify ホスティングにデプロイします。独自のアプリケーションを使用することも、スターターアプリケーションを作成することもできます。詳細については、「*SvelteKit ドキュメント*」の「[プロジェクトの作成](https://kit.svelte.dev/docs/creating-a-project)」を参照してください。
SSR を使用して SvelteKit アプリを Amplify ホスティングにデプロイするには、プロジェクトにアダプターを追加する必要があります。SvelteKit フレームワークの Amplify 所有アダプターは維持されません。この例では、コミュニティのメンバーが作成した `amplify-adapter` を使用しています。アダプターはGitHub ウェブサイトの [github.com/gzimbron/amplify-adapter](https://github.com/gzimbron/amplify-adapter) で入手できます。このアダプターはメンテナンス AWS されません。
**SvelteKit アプリを Amplify ホスティングにデプロイするには**
1. ローカルコンピュータで、デプロイする SvelteKit アプリケーションに移動します。
1. このアダプターをインストールするには、ターミナルウィンドウを開いて以下のコマンドを実行します。この例では、[github.com/gzimbron/amplify-adapter](https://github.com/gzimbron/amplify-adapter) で利用可能なコミュニティアダプターを使用します。別のコミュニティアダプターを使用している場合は、*amplify-adapter* をお使いのアダプターの名前に置き換えます。
```
npm install amplify-adapter
```
1. SvelteKit アプリのプロジェクトフォルダで、`svelte.config.js` ファイルを開きます。ファイルを編集して `amplify-adapter` を使用するか、*[amplify-adapter]* をお使いのアダプター名に置き換えます。ファイルは次のようになっているはずです。
```
import adapter from 'amplify-adapter';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter()
}
};
export default config;
```
1. 変更をコミットし、アプリケーションを Git リポジトリにプッシュします。
1. これで、SvelteKit アプリを Amplify にデプロイする準備が整いました。
にサインイン AWS マネジメントコンソール し、[Amplify コンソール](https://console.aws.amazon.com/amplify/)を開きます。
1. **[すべてのアプリ]** ページで、**[アプリの新規作成]** を選択します。
1. **[Amplify で構築を開始]** ページで、自分の Git リポジトリプロバイダーを選択し、**[次へ]** を選択します。
1. **[リポジトリブランチを追加]** ページで、次の操作を行います。
1. 接続するリポジトリの名前を選択します。
1. 接続するリポジトリブランチの名前を選択します。
1. [**次へ**] を選択します。
1. **[アプリ設定]** ページで、**[ビルド設定]** セクションを見つけます。**[ビルド出力ディレクトリ]** には、**build** を入力します。
1. また、ビルド仕様でアプリのフロントエンドのビルドコマンドを更新する必要があります。ビルド仕様を開くには、**[YML ファイルの編集]** を選択します。
1. `amplify.yml` ファイルで、フロントエンドのビルドコマンドセクションを検索します。**- cd build/compute/default/** と **- npm i --production** を入力します。
ビルド設定ファイルは以下のようになっている必要があります。
```
version: 1
frontend:
phases:
preBuild:
commands:
- 'npm ci --cache .npm --prefer-offline'
build:
commands:
- 'npm run build'
- 'cd build/compute/default/'
- 'npm i --production'
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- '.npm/**/*'
```
1. **[保存]** を選択します。
1. Amplify がアプリログを Amazon CloudWatch Logs に送信できるようにするには、コンソールで明示的に有効にする必要があります。**[詳細設定]** セクションを開いて、**[サーバーサイドレンダリング (SSR) のデプロイ]** セクションで **[SSR アプリのログを有効にする]** を選択します。
1. [**次へ**] を選択します。
1. **[レビュー]**ページで、**[保存してデプロイ] **を選択します。