Stellen Sie eine SvelteKit App für Amplify Hosting bereit

Verwenden Sie die folgenden Anweisungen, um eine SvelteKit Anwendung für 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 Amplify Hosting bereitzustellen, müssen Sie Ihrem Projekt einen Adapter hinzufügen. Wir unterhalten keinen Amplify-eigenen Adapter für das SvelteKit Framework. In diesem Beispiel verwenden wir den, der von einem Mitglied der Community amplify-adapter erstellt wurde. Der Adapter ist unter github.com/gzimbron/amplify-adapter auf der Website verfügbar. GitHub AWS verwaltet diesen Adapter nicht.

Um eine SvelteKit App für 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 unter github.com/gzimbron/amplify-adapter verfügbar ist. Wenn Sie einen anderen Community-Adapter verwenden, ersetzen Sie amplify-adapter mit dem 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 zu ersetzen 'amplify-adapter' mit dem 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. Übernehmen Sie die Änderung und übertragen Sie die Anwendung in Ihr Git-Repository.

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

   Melde dich an bei AWS Management Console und öffne die Amplify-Konsole.

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

7. Wählen Sie auf der Seite Start building with Amplify Ihren Git-Repository-Anbieter aus und klicken Sie dann auf Weiter.

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

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

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

   3. Wählen Sie Weiter.

9. Suchen Sie auf der Seite mit den App-Einstellungen den Abschnitt Build-Einstellungen. Geben Sie für Build-Ausgabeverzeichnis Folgendes 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 YMLDatei bearbeiten.

11. Suchen Sie in der amplify.yml Datei den Abschnitt mit den Frontend-Build-Befehlen. Geben Sie - cd build/compute/default/ und ein. - 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 Save (Speichern) aus.

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

14. Wählen Sie Weiter.

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