View a markdown version of this page

Stellen Sie eine Astro.js 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 Astro.js App auf Amplify Hosting bereit

Verwenden Sie die folgenden Anweisungen, um eine Astro.js Anwendung auf Amplify Hosting bereitzustellen. Sie können eine vorhandene Anwendung verwenden oder eine Starter-Anwendung erstellen, indem Sie eines der offiziellen Beispiele verwenden, die Astro bereitstellt. Informationen zum Erstellen einer Starteranwendung finden Sie in der Astro-Dokumentation unter Verwenden eines Themes oder einer Starter-Vorlage.

Um eine Astro-Site mit SSR für Amplify Hosting bereitzustellen, müssen Sie Ihrer Anwendung einen Adapter hinzufügen. Wir betreiben keinen Amplify-eigenen Adapter für das Astro-Framework. In diesem Tutorial wird der astro-aws-amplify Adapter verwendet, der von einem Mitglied der Community erstellt wurde. Dieser Adapter ist auf Github verfügbar. com/alexnguyennz/astro-aws-amplify auf der Website. GitHub AWS verwaltet diesen Adapter nicht.

Um eine Astro-App auf Amplify Hosting bereitzustellen

  1. Navigieren Sie auf Ihrem lokalen Computer zu der Astro-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/alexnguyennz/astro-aws-amplify. Sie können es durch den Namen des astro-aws-amplify Adapters ersetzen, den Sie verwenden.

    npm install astro-aws-amplify

  3. Öffnen Sie die astro.config.mjs Datei im Projektordner für Ihre Astro-App. Aktualisieren Sie die Datei, um den Adapter hinzuzufügen. Die Datei sollte wie folgt aussehen.

    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',
});

  4. Bestätigen Sie die Änderung und übertragen Sie das Projekt in Ihr Git-Repository.

    Jetzt sind Sie bereit, Ihre Astro-App auf Amplify bereitzustellen.

  5. 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 ein.amplify-hosting.

  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 mv node_modules ./.amplify-hosting/compute/default ein.

    Ihre Build-Einstellungsdatei sollte wie folgt aussehen.

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

  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 aus.

  14. Wählen Sie Weiter aus.

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