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

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

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

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

ローカルコンピュータで、デプロイする SvelteKit アプリケーションに移動します。
アダプターをインストールするには、ターミナルウィンドウを開き、次のコマンドを実行します。この例では、github.com/gzimbron/amplify-adapter で利用可能なコミュニティアダプターを使用しています。別のコミュニティアダプターを使用している場合は、amplify-adapter アダプターの名前を入力します。
```
npm install amplify-adapter
```

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;

変更をコミットし、アプリケーションを Git リポジトリにプッシュします。
これで、 SvelteKit アプリケーションを Amplify にデプロイする準備が整いました。

にサインインする AWS Management Console Amplify コンソールを開きます。
「すべてのアプリ」ページで、「新しいアプリの作成」を選択します。
Amplify で構築を開始するページで、Git リポジトリプロバイダーを選択し、次へを選択します。
[リポジトリブランチを追加] ページで、次の操作を行います。
1. 接続するリポジトリの名前を選択します。
2. 接続するリポジトリブランチの名前を選択します。
3. [Next (次へ)] を選択します。
アプリ設定ページで、ビルド設定セクションを見つけます。ビルド出力ディレクトリ にと入力しますbuild。
また、ビルド仕様でアプリケーションのフロントエンドビルドコマンドを更新する必要があります。ビルド仕様を開くには、YMLファイルの編集 を選択します。

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

[Save] を選択します。
Amplify がアプリケーションログを Amazon CloudWatch Logs に配信できるようにするには、コンソールでこれを明示的に有効にする必要があります。詳細設定セクションを開き、サーバー側のレンダリング (SSR) デプロイセクションでSSRアプリケーションログを有効にするを選択します。
[Next (次へ)] を選択します。
[レビュー]ページで、[保存してデプロイ] を選択します。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

Astro.js アプリをデプロイする

サーバー側でレンダリングされたアプリケーションのデプロイ