Diese Seite wurde von der Cloud Translation API übersetzt.

Alle JavaScript-Frameworks in Cloud Run bereitstellen

1. Einführung

Übersicht

In diesem Codelab stellen Sie acht JavaScript-Anwendungen in Cloud Run bereit:

Angular SSR – basierend auf Angular
Nuxt.js – basierend auf Vue.js
Next.js – basierend auf React
Remix – basierend auf React
SvelteKit – basierend auf Svelte
SolidStart – basierend auf Solid.js
Astro
Qwik

Screenshot der Angular-Anwendung Screenshot der Nuxt.js-Anwendung Screenshot der Next.js-Anwendung Screenshot der Remix-Anwendung Screenshot der SvelteKit-Anwendung Screenshot der SolidStart-Anwendung Screenshot der Astro-Anwendung Screenshot der Qwik-Anwendung

Aufgaben in diesem Lab

Von Cloud Build automatisch unterstützte JavaScript-Frameworks bereitstellen
JavaScript-Frameworks bereitstellen, die konfiguriert werden müssen

Voraussetzungen

Sie sind im Cloud Shell-Terminal angemeldet.
Sie haben ein Google Cloud-Projekt mit aktivierter Abrechnung und der Berechtigung zur Bereitstellung in Cloud Run.
- Sie können dies prüfen, wenn Sie zuvor einen Cloud Run-Dienst bereitgestellt haben. Weitere Informationen finden Sie beispielsweise in der Kurzanleitung zur Bereitstellung eines Node.js-Webdiensts aus dem Quellcode.

2. Cloud Shell aktivieren

Rufen Sie das Cloud Shell-Terminal auf: https://shell.cloud.google.com/?show=terminalWenn Sie Cloud Shell zum ersten Mal starten, wird ein Zwischenbildschirm mit einer Beschreibung dieser Funktion angezeigt. Wenn ein Zwischenbildschirm angezeigt wird, klicken Sie auf Weiter.Es dauert nur einen Moment, bis die Bereitstellung und die Verbindung mit Cloud Shell abgeschlossen sind.
Führen Sie in Cloud Shell den folgenden Befehl aus, um das gcloud-Projekt festzulegen:
```
gcloud config set project <PROJECT_ID>
```
Ersetzen Sie <PROJECT_ID> durch Ihre Projekt-ID. Beispiel:
```
gcloud config set project js-frameworks
```
Wenn Sie zur Autorisierung aufgefordert werden, klicken Sie auf Autorisieren.

3. APIs aktivieren

Bevor Sie dieses Codelab verwenden können, müssen Sie mehrere APIs aktivieren. Für dieses Codelab müssen die folgenden APIs verwendet werden. Sie können diese APIs aktivieren, indem Sie den folgenden Befehl ausführen:

gcloud services enable \
    cloudbuild.googleapis.com \
    artifactregistry.googleapis.com \
    run.googleapis.com

Dann können Sie Umgebungsvariablen festlegen, die in diesem Codelab verwendet werden.

4. Standardregion konfigurieren

Sie können die Region für jede Bereitstellung individuell festlegen. Mit diesem Befehl wird die Standardregion auf us-central1 festgelegt, sodass Sie sie nicht für jede Region einzeln festlegen müssen.

gcloud config set run/region us-central1

5. Git konfigurieren

Einige Bibliotheken erwarten, dass git standardmäßig für die Versionsverwaltung verwendet wird. Wenn Sie git bereits auf Ihrem Computer konfiguriert haben (Beispiel: Sie führen dieses Lab lokal aus), müssen Sie diese Schritte nicht ausführen.

git config --global user.email "you@example.com"
git config --global user.name "Your Name"
git config --global init.defaultBranch main

6. Angular SSR (Angular)

Gehen Sie zu dem Verzeichnis, in dem Sie die Angular-Anwendung erstellen möchten.
```
cd ~
```
Angular-Anwendung erstellen, die serverseitiges Rendering (SSR) verwendet
```
npx @angular/cli new angular-app --ssr
```
Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.
Öffnen Sie den neuen Projektordner, den Sie erstellt haben.
```
cd angular-app
```
Anwendung bereitstellen
```
gcloud run deploy --allow-unauthenticated
```
Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.

Anwendung besuchen

Die Bereitstellung dauert einige Minuten. Nach Abschluss des Vorgangs gibt Cloud Run eine URL wie die folgende zurück:

https://angular-app-xxxxxxxxxx-uc.a.run.app

Screenshot der Angular-Anwendung

Öffnen Sie die angegebene URL in einem neuen Browsertab, um die bereitgestellte Anwendung anzusehen.

Optionale Bereinigung

Angular-Projekt lokal löschen
```
cd ..
rm -rf angular-app
```
Angular Cloud Run-Dienst löschen
```
gcloud run services delete angular-app
```
Wenn du gefragt wirst, ob du fortfahren möchtest, drücke zum Fortfahren die Enter-Taste.

7. Nuxt.js (Vue.js)

Gehen Sie zu dem Verzeichnis, in dem Sie Ihre Angular-Anwendung erstellen möchten.
```
cd ~
```
Nuxt.js-Anwendung erstellen
```
npx nuxi init nuxt-app
```
Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.
Öffnen Sie den neuen Projektordner, den Sie erstellt haben.
```
cd nuxt-app
```
Anwendung bereitstellen
```
gcloud run deploy --allow-unauthenticated
```
Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.

Anwendung besuchen

Die Bereitstellung dauert einige Minuten. Nach Abschluss des Vorgangs gibt Cloud Run eine URL wie die folgende zurück:

https://nuxt-app-xxxxxxxxxx-uc.a.run.app

Öffnen Sie die angegebene URL in einem neuen Browsertab, um die bereitgestellte Anwendung anzusehen.

Screenshot der Nuxt.js-Anwendung

Optionale Bereinigung

Nuxt.js-Projekt lokal löschen
```
cd ..
rm -rf nuxt-app
```
Nuxt.js-Cloud Run-Dienst löschen
```
gcloud run services delete nuxt-app
```
Wenn du gefragt wirst, ob du fortfahren möchtest, drücke zum Fortfahren die Enter-Taste.

8. Next.js (React)

Gehen Sie zu dem Verzeichnis, in dem Sie die Angular-Anwendung erstellen möchten.
```
cd ~
```
Next.js-Anwendung erstellen
```
npx create-next-app next-app
```
Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.
Öffnen Sie den neuen Projektordner, den Sie erstellt haben.
```
cd next-app
```
Anwendung bereitstellen
```
gcloud run deploy --allow-unauthenticated
```
Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.

Anwendung besuchen

Die Bereitstellung dauert einige Minuten. Nach Abschluss des Vorgangs gibt Cloud Run eine URL wie die folgende zurück:

https://next-app-xxxxxxxxxx-uc.a.run.app

Öffnen Sie die angegebene URL in einem neuen Browsertab, um die bereitgestellte Anwendung anzusehen.

Screenshot der Next.js-Anwendung

Optionale Bereinigung

Next.js-Projekt lokal löschen
```
cd ..
rm -rf next-app
```
Next.js-Cloud Run-Dienst löschen
```
gcloud run services delete next-app
```
Wenn du gefragt wirst, ob du fortfahren möchtest, drücke zum Fortfahren die Enter-Taste.

9. Remix (Reaktion)

Gehen Sie zu dem Verzeichnis, in dem Sie die Angular-Anwendung erstellen möchten.
```
cd ~
```
Remix-Anwendung erstellen
```
npx create-remix remix-app
```
Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.
Öffnen Sie den neuen Projektordner, den Sie erstellt haben.
```
cd remix-app
```
Anwendung bereitstellen
```
gcloud run deploy --allow-unauthenticated
```
Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.

Anwendung besuchen

Die Bereitstellung dauert einige Minuten. Nach Abschluss des Vorgangs gibt Cloud Run eine URL wie die folgende zurück:

https://remix-app-xxxxxxxxxx-uc.a.run.app

Öffnen Sie die angegebene URL in einem neuen Browsertab, um die bereitgestellte Anwendung anzusehen.

Screenshot der Remix-Anwendung

Optionale Bereinigung

Remix-Projekt lokal löschen
```
cd ..
rm -rf remix-app
```
Cloud Run-Dienst „Remix“ löschen
```
gcloud run services delete remix-app
```
Wenn Sie gefragt werden, ob Sie fortfahren möchten, drücken Sie die Enter-Taste, um fortzufahren.

10. Cloud Shell-Bereinigung

Wenn Sie Cloud Shell nicht verwenden oder nur eine Anwendung bereitstellen, ist dieser Schritt optional.

Cloud Shell bietet ein Basisverzeichnis mit 5 GB nichtflüchtigem Speicher und wird in Google Cloud ausgeführt.

Damit Sie alle acht Frameworks mit Cloud Shell bereitstellen können, müssen Sie Speicherplatz für die verbleibenden Anwendungen schaffen.

Durch das Entfernen der Projekte in Cloud Shell werden die bereitgestellten Cloud Run-Dienste, die Sie bereitgestellt haben, nicht gelöscht.

Führen Sie die folgenden Befehle aus, um die bereits erstellten Anwendungen zu löschen:

cd ~
rm -rf angular-app/
rm -rf nuxt-app/
rm -rf next-app/
rm -rf remix-app/

11. SvelteKit (Svelte)

Gehen Sie zu dem Verzeichnis, in dem Sie Ihre Angular-Anwendung erstellen möchten.
```
cd ~
```
SvelteKit-Anwendung erstellen
```
npx create-svelte svelte-app
```
Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.
Öffnen Sie den neuen Projektordner, den Sie erstellt haben.
```
cd svelte-app
```
Anwendung bereitstellen
```
gcloud run deploy --allow-unauthenticated
```
Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.

Anwendung besuchen

Die Bereitstellung dauert einige Minuten. Nach Abschluss des Vorgangs gibt Cloud Run eine URL wie die folgende zurück:

https://svelte-app-xxxxxxxxxx-uc.a.run.app

Öffnen Sie die angegebene URL in einem neuen Browsertab, um die bereitgestellte Anwendung anzusehen.

Screenshot der SvelteKit-Anwendung

Optionale Bereinigung

SvelteKit-Projekt lokal löschen
```
cd ..
rm -rf svelte-app
```
SvelteKit Cloud Run-Dienst löschen
```
gcloud run services delete svelte-app
```
Wenn Sie gefragt werden, ob Sie fortfahren möchten, drücken Sie die Enter-Taste, um fortzufahren.

12. SolidStart (Solid)

Gehen Sie zu dem Verzeichnis, in dem Sie Ihre Angular-Anwendung erstellen möchten.
```
cd ~
```
SolidStart-Anwendung erstellen
```
npx create-solid solid-app
```
Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.
Öffnen Sie den neuen Projektordner, den Sie erstellt haben.
```
cd solid-app
```
Anwendung bereitstellen
```
gcloud run deploy --allow-unauthenticated
```
Wenn Sie nach Ihren Einstellungen gefragt werden, drücken Sie die Taste Enter, um die Standardeinstellungen zu übernehmen.

Anwendung besuchen

Die Bereitstellung dauert einige Minuten. Nach Abschluss des Vorgangs gibt Cloud Run eine URL wie die folgende zurück:

https://solid-app-xxxxxxxxxx-uc.a.run.app

Öffnen Sie die angegebene URL in einem neuen Browsertab, um die bereitgestellte Anwendung anzusehen.

Screenshot der SolidStart-Anwendung

Optionale Bereinigung

SolidStart-Projekt lokal löschen
```
cd ..
rm -rf solid-app
```
SolidStart-Cloud Run-Dienst löschen
```
gcloud run services delete solid-app
```
Wenn Sie gefragt werden, ob Sie fortfahren möchten, drücken Sie die Enter-Taste, um fortzufahren.

13. Astro

Gehen Sie zu dem Verzeichnis, in dem Sie die Angular-Anwendung erstellen möchten.
```
cd ~
```
Astro-Anwendung erstellen
```
npx create-astro astro-app
```
Wenn Sie nach Ihren Einstellungen gefragt werden, drücken Sie die Taste Enter, um die Standardeinstellungen zu übernehmen.
Öffnen Sie den neuen Projektordner, den Sie erstellt haben.
```
cd astro-app
```
Astro-Adapter für Node.js hinzufügen
```
npx astro add node
```

Das Skript start in package.json aktualisieren

npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"

Anwendung bereitstellen
```
gcloud run deploy --allow-unauthenticated
```
Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.

Anwendung besuchen

Die Bereitstellung dauert einige Minuten. Nach Abschluss des Vorgangs gibt Cloud Run eine URL wie die folgende zurück:

https://astro-app-xxxxxxxxxx-uc.a.run.app

Öffnen Sie die angegebene URL in einem neuen Browsertab, um die bereitgestellte Anwendung anzusehen.

Screenshot der Astro-Anwendung

Optionale Bereinigung

Astro-Projekt lokal löschen
```
cd ..
rm -rf astro-app
```
Astro Cloud Run-Dienst löschen
```
gcloud run services delete astro-app
```
Wenn du gefragt wirst, ob du fortfahren möchtest, drücke zum Fortfahren die Enter-Taste.

14. Qwik

Gehen Sie zu dem Verzeichnis, in dem Sie die Angular-Anwendung erstellen möchten.
```
cd ~
```
Qwik-Anwendung erstellen
```
npx create-qwik
```
Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.
Öffnen Sie den neuen Projektordner, den Sie erstellt haben.
```
cd qwik-app
```
Qwik Adapter für Cloud Run hinzufügen
```
npm run qwik add cloud-run
```
Anwendung bereitstellen
```
gcloud run deploy --allow-unauthenticated
```
Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.

Anwendung besuchen

Die Bereitstellung dauert einige Minuten. Nach Abschluss des Vorgangs gibt Cloud Run eine URL wie die folgende zurück:

https://qwik-app-xxxxxxxxxx-uc.a.run.app

Öffnen Sie die angegebene URL in einem neuen Browsertab, um die bereitgestellte Anwendung anzusehen.

Screenshot der Qwik-Anwendung

Optionale Bereinigung

Qwik-Projekt lokal löschen
```
cd ..
rm -rf qwik-app
```
Qwik Cloud Run-Dienst löschen
```
gcloud run services delete qwik-app
```
Wenn du gefragt wirst, ob du fortfahren möchtest, drücke zum Fortfahren die Enter-Taste.

15. Glückwunsch!

Herzlichen Glückwunsch zum Abschluss des Codelabs!

Wir empfehlen Ihnen, die Dokumentation unter Kurzanleitung: Aus einem Git-Repository in Cloud Run bereitstellen zu lesen, damit Ihre zukünftigen Builds bei jedem Push zur Versionsverwaltung automatisch bereitgestellt werden können.

Worüber haben wir gesprochen?

Von Cloud Build automatisch unterstützte JavaScript-Frameworks bereitstellen
- Angular SSR – basierend auf Angular
- Nuxt.js – basierend auf Vue.js
- Next.js – basierend auf React
- Remix – basierend auf React
- SvelteKit – basierend auf Svelte
- SolidStart – basierend auf Solid.js
JavaScript-Frameworks bereitstellen, die konfiguriert werden müssen
- Astro
- Qwik

16. Bereinigen

Um versehentliche Kosten zu vermeiden, z. B. wenn dieser Cloud Run-Dienst versehentlich häufiger aufgerufen wird als Ihre monatliche Zuweisung von Cloud Run-Aufrufen in der kostenlosen Stufe, können Sie entweder den Cloud Run-Job oder das in Schritt 1 erstellte Projekt löschen.

Wenn Sie die Cloud Run-Dienste löschen möchten, rufen Sie die Cloud Run-Cloud Console unter https://console.cloud.google.com/run/ auf und löschen Sie die Cloud Run-Dienste.

Wenn Sie das gesamte Projekt löschen möchten, rufen Sie https://console.cloud.google.com/cloud-resource-manager auf, wählen Sie das in Schritt 2 erstellte Projekt aus und klicken Sie auf „Löschen“. Wenn Sie das Projekt löschen, müssen Sie die Projekte in Ihrem Cloud SDK ändern. Sie können die Liste aller verfügbaren Projekte mit dem Befehl gcloud projects list aufrufen.