SvelteKit アプリを Amplify ホスティングにデプロイする - AWS Amplify ホスティング

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

SvelteKit アプリを Amplify ホスティングにデプロイする

以下の手順に従って、SvelteKit アプリケーションを Amplify ホスティングにデプロイします。独自のアプリケーションを使用することも、スターターアプリケーションを作成することもできます。詳細については、「SvelteKit ドキュメント」の「プロジェクトの作成」を参照してください。

SSR を使用して SvelteKit アプリを Amplify ホスティングにデプロイするには、プロジェクトにアダプターを追加する必要があります。SvelteKit フレームワークの Amplify 所有アダプターは維持されません。この例では、コミュニティのメンバーが作成した amplify-adapter を使用しています。アダプターは GitHub ウェブサイトの github.com/gzimbron/amplify-adapter で入手できます。AWS はこのアダプターを保守していません。

SvelteKit アプリを Amplify ホスティングにデプロイするには

  1. ローカルコンピュータで、デプロイする SvelteKit アプリケーションに移動します。

  2. このアダプターをインストールするには、ターミナルウィンドウを開いて以下のコマンドを実行します。この例では、github.com/gzimbron/amplify-adapter で利用可能なコミュニティアダプターを使用します。別のコミュニティアダプターを使用している場合は、amplify-adapter をお使いのアダプターの名前に置き換えます。

    npm install amplify-adapter

  3. 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;

  4. 変更をコミットし、アプリケーションを Git リポジトリにプッシュします。

  5. これで、SvelteKit アプリを Amplify にデプロイする準備が整いました。

    AWS Management Console にサインインし Amplify コンソールを開きます。

  6. [すべてのアプリ] ページで、[アプリの新規作成] を選択します。

  7. [Amplify で構築を開始] ページで、自分の Git リポジトリプロバイダーを選択し、[次へ] を選択します。

  8. [リポジトリブランチを追加] ページで、次の操作を行います。

    1. 接続するリポジトリの名前を選択します。

    2. 接続するリポジトリブランチの名前を選択します。

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

  9. [アプリ設定] ページで、[ビルド設定] セクションを見つけます。[ビルド出力ディレクトリ] には、build を入力します。

  10. また、ビルド仕様でアプリのフロントエンドのビルドコマンドを更新する必要があります。ビルド仕様を開くには、[YML ファイルの編集] を選択します。

  11. 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/**/*'

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

  13. Amplify がアプリログを Amazon CloudWatch Logs に送信できるようにするには、コンソールで明示的に有効にする必要があります。[詳細設定] セクションを開いて、[サーバーサイドレンダリング (SSR) のデプロイ] セクションで [SSR アプリのログを有効にする] を選択します。

  14. [Next] を選択します。

  15. [レビュー]ページで、[保存してデプロイ] を選択します。