View a markdown version of this page

Stellen Sie eine SvelteKit App auf Amplify Hosting bereit - AWS Amplify Hosting

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Stellen Sie eine SvelteKit App auf Amplify Hosting bereit

Verwenden Sie die folgenden Anweisungen, um eine SvelteKit Anwendung auf Amplify Hosting bereitzustellen. Sie können Ihre eigene Anwendung verwenden oder eine Starter-App erstellen. Weitere Informationen finden Sie in der SvelteKit Dokumentation unter Projekt erstellen.

Um eine SvelteKit App mit SSR auf Amplify Hosting bereitzustellen, müssen Sie Ihrem Projekt einen Adapter hinzufügen. Wir betreiben keinen Amplify-eigenen Adapter für das Framework. SvelteKit In diesem Beispiel verwenden wir den, der von einem Mitglied der Community amplify-adapter erstellt wurde. Der Adapter ist auf Github verfügbar. com/gzimbron/amplify-adapter auf der Website. GitHub AWS verwaltet diesen Adapter nicht.

Um eine SvelteKit App auf Amplify Hosting bereitzustellen

  1. Navigieren Sie auf Ihrem lokalen Computer zu der SvelteKit Anwendung, die Sie bereitstellen möchten.

  2. Um den Adapter zu installieren, öffnen Sie ein Terminalfenster und führen Sie den folgenden Befehl aus. In diesem Beispiel wird der Community-Adapter verwendet, der auf Github verfügbar ist. com/gzimbron/amplify-adapter. Wenn Sie einen anderen Community-Adapter verwenden, amplify-adapter ersetzen Sie ihn durch den Namen Ihres Adapters.

    npm install amplify-adapter

  3. Öffnen Sie die svelte.config.js Datei im Projektordner für Ihre SvelteKit App. Bearbeiten Sie die Datei, um sie zu verwenden, amplify-adapter oder 'amplify-adapter' ersetzen Sie sie durch den Namen Ihres Adapters. Die Datei sollte wie folgt aussehen.

    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. Bestätigen Sie die Änderung und übertragen Sie die Anwendung in Ihr Git-Repository.

  5. Jetzt sind Sie bereit, Ihre SvelteKit App auf Amplify bereitzustellen.

    Melden Sie sich bei der an AWS-Managementkonsole und öffnen Sie die Amplify-Konsole.

  6. Wählen Sie auf der Seite Alle Apps die Option Neue App erstellen.

  7. Wähle auf der Seite „Mit Amplify erstellen“ deinen Git-Repository-Anbieter aus und wähle dann Weiter aus.

  8. Gehen Sie auf der Seite Repository-Zweig hinzufügen wie folgt vor:

    1. Wählen Sie den Namen des Repositorys aus, mit dem Sie eine Verbindung herstellen möchten.

    2. Wählen Sie den Namen des Repository-Zweigs aus, mit dem eine Verbindung hergestellt werden soll.

    3. Wählen Sie Weiter aus.

  9. Suchen Sie auf der Seite mit den App-Einstellungen nach dem Abschnitt Build-Einstellungen. Geben Sie für das Build-Ausgabeverzeichnis einbuild.

  10. Sie müssen auch die Frontend-Build-Befehle der App in der Build-Spezifikation aktualisieren. Um die Build-Spezifikation zu öffnen, wählen Sie YML-Datei bearbeiten.

  11. Suchen Sie in der amplify.yml Datei den Abschnitt mit den Frontend-Build-Befehlen. Geben Sie ein - cd build/compute/default/ und- npm i --production.

    Ihre Build-Einstellungsdatei sollte wie folgt aussehen.

    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. Wählen Sie Speichern.

  13. Wenn Sie möchten, dass Amplify App-Logs an Amazon CloudWatch Logs senden kann, müssen Sie dies in der Konsole explizit aktivieren. Öffnen Sie den Abschnitt Erweiterte Einstellungen und wählen Sie dann im Abschnitt Server-Side Rendering (SSR) -Bereitstellung die Option SSR-App-Logs aktivieren.

  14. Wählen Sie Weiter aus.

  15. Wählen Sie auf der Seite „Überprüfen“ die Option Speichern und bereitstellen aus.