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 – basiert auf Angular
Nuxt.js – basiert auf Vue.js
Next.js – basierend auf React
Remix – basiert auf React
SvelteKit – basiert auf Svelte
SolidStart – basiert 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-App Screenshot der Qwik-Anwendung

Lerninhalte

JavaScript-Frameworks, die von Cloud Build unterstützt werden, automatisch bereitstellen
JavaScript-Frameworks bereitstellen, die eine Konfiguration erfordern

Voraussetzungen

Sie sind im Cloud Shell-Terminal angemeldet.
Sie haben ein Google Cloud-Projekt mit aktivierter Abrechnung und die Berechtigung, in Cloud Run bereitzustellen.
- Sie können dies bestätigen, wenn Sie zuvor einen Cloud Run-Dienst bereitgestellt haben. Eine Anleitung finden Sie beispielsweise in der Kurzanleitung zum Bereitstellen eines Node.js-Webdienstes aus dem Quellcode.

2. Cloud Shell aktivieren

Rufen Sie das Cloud Shell-Terminal auf: https://shell.cloud.google.com/?show=terminal. Wenn Sie Cloud Shell zum ersten Mal starten, wird ein Fenster mit einer Beschreibung eingeblendet. Klicken Sie in diesem Fall auf Weiter. Die Bereitstellung und Verbindung mit Cloud Shell sollte nur wenige Augenblicke dauern.
Führen Sie den folgenden Befehl in Cloud Shell aus, um Ihr 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 mit diesem Codelab beginnen können, müssen Sie mehrere APIs aktivieren. Für dieses Codelab müssen Sie die folgenden APIs verwenden. Sie können diese APIs mit dem folgenden Befehl aktivieren:

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

Anschließend können Sie Umgebungsvariablen festlegen, die in diesem Codelab verwendet werden.

4. Standardregion konfigurieren

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

gcloud config set run/region us-central1

5. Git konfigurieren

In einigen Bibliotheken wird standardmäßig git für die Versionsverwaltung verwendet. Wenn Sie git bereits auf Ihrem Computer konfiguriert haben (z. B. wenn Sie dieses Lab lokal ausführen), 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. SSR (Angular)

Wechseln Sie in das Verzeichnis, in dem Sie Ihre Angular-Anwendung erstellen möchten.
```
cd ~
```
Angular-Anwendung mit serverseitigem Rendering (SSR) erstellen
```
npx @angular/cli new angular-app --ssr
```
Wenn Sie nach Ihren Einstellungen gefragt werden, drücken Sie die Taste Enter, um die Standardeinstellungen zu übernehmen.
Wechseln Sie in den neu erstellten Projektordner.
```
cd angular-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. Wenn der Vorgang abgeschlossen ist, 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 Browser-Tab, um die bereitgestellte Anwendung aufzurufen.

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 Sie gefragt werden, ob Sie fortfahren möchten, drücken Sie die Taste Enter.

7. Nuxt.js (Vue.js)

Wechseln Sie in das Verzeichnis, in dem Sie Ihre Angular-Anwendung erstellen möchten.
```
cd ~
```
Nuxt.js-Anwendung erstellen
```
npx nuxi init nuxt-app
```
Wenn Sie nach Ihren Einstellungen gefragt werden, drücken Sie die Taste Enter, um die Standardeinstellungen zu übernehmen.
Wechseln Sie in den neu erstellten Projektordner.
```
cd nuxt-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. Wenn der Vorgang abgeschlossen ist, 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 Browser-Tab, um die bereitgestellte Anwendung aufzurufen.

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 Sie gefragt werden, ob Sie fortfahren möchten, drücken Sie die Taste Enter.

8. Next.js (React)

Wechseln Sie in das Verzeichnis, in dem Sie Ihre Angular-Anwendung erstellen möchten.
```
cd ~
```
Next.js-Anwendung erstellen
```
npx create-next-app next-app
```
Wenn Sie nach Ihren Einstellungen gefragt werden, drücken Sie die Taste Enter, um die Standardeinstellungen zu übernehmen.
Wechseln Sie in den neu erstellten Projektordner.
```
cd next-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. Wenn der Vorgang abgeschlossen ist, 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 Browser-Tab, um die bereitgestellte Anwendung aufzurufen.

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 Sie gefragt werden, ob Sie fortfahren möchten, drücken Sie die Taste Enter.

9. Remix (React)

Wechseln Sie in das Verzeichnis, in dem Sie Ihre Angular-Anwendung erstellen möchten.
```
cd ~
```
Remix-Anwendung erstellen
```
npx create-remix remix-app
```
Wenn Sie nach Ihren Einstellungen gefragt werden, drücken Sie die Taste Enter, um die Standardeinstellungen zu übernehmen.
Wechseln Sie in den neu erstellten Projektordner.
```
cd remix-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. Wenn der Vorgang abgeschlossen ist, 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 Browser-Tab, um die bereitgestellte Anwendung aufzurufen.

Screenshot der Remix-Anwendung

Optionale Bereinigung

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

10. Cloud Shell bereinigen

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

Cloud Shell bietet ein Basisverzeichnis mit 5 GB nichtflüchtigem Speicher und läuft in Google Cloud.

Wenn Sie alle acht Frameworks mit Cloud Shell bereitstellen möchten, müssen Sie Platz für die verbleibenden Anwendungen schaffen.

Wenn Sie die Projekte in Cloud Shell entfernen, werden die bereitgestellten Cloud Run-Dienste nicht gelöscht.

Führen Sie die folgenden Befehle aus, um die von Ihnen 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)

Wechseln Sie in das Verzeichnis, in dem Sie Ihre Angular-Anwendung erstellen möchten.
```
cd ~
```
SvelteKit-Anwendung erstellen
```
npx create-svelte svelte-app
```
Wenn Sie nach Ihren Einstellungen gefragt werden, drücken Sie die Taste Enter, um die Standardeinstellungen zu übernehmen.
Wechseln Sie in den neu erstellten Projektordner.
```
cd svelte-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. Wenn der Vorgang abgeschlossen ist, 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 Browser-Tab, um die bereitgestellte Anwendung aufzurufen.

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 Taste Enter.

12. SolidStart (Solid)

Wechseln Sie in das Verzeichnis, in dem Sie Ihre Angular-Anwendung erstellen möchten.
```
cd ~
```
SolidStart-Anwendung erstellen
```
npx create-solid solid-app
```
Wenn Sie nach Ihren Einstellungen gefragt werden, drücken Sie die Taste Enter, um die Standardeinstellungen zu übernehmen.
Wechseln Sie in den neu erstellten Projektordner.
```
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. Wenn der Vorgang abgeschlossen ist, 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 Browser-Tab, um die bereitgestellte Anwendung aufzurufen.

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 Taste Enter.

13. Astro

Wechseln Sie in das Verzeichnis, in dem Sie Ihre 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.
Wechseln Sie in den neu erstellten Projektordner.
```
cd astro-app
```
Astro-Adapter für Node.js hinzufügen
```
npx astro add node
```

start-Skript 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 Sie nach Ihren Einstellungen gefragt werden, drücken Sie die Taste Enter, um die Standardeinstellungen zu übernehmen.

Anwendung besuchen

Die Bereitstellung dauert einige Minuten. Wenn der Vorgang abgeschlossen ist, 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 Browser-Tab, um die bereitgestellte Anwendung aufzurufen.

Screenshot der Astro-App

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 Sie gefragt werden, ob Sie fortfahren möchten, drücken Sie die Taste Enter.

14. Qwik

Wechseln Sie in das Verzeichnis, in dem Sie Ihre Angular-Anwendung erstellen möchten.
```
cd ~
```
Qwik-Anwendung erstellen
```
npx create-qwik
```
Wenn Sie nach Ihren Einstellungen gefragt werden, drücken Sie die Taste Enter, um die Standardeinstellungen zu übernehmen.
Wechseln Sie in den neu erstellten Projektordner.
```
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 Sie nach Ihren Einstellungen gefragt werden, drücken Sie die Taste Enter, um die Standardeinstellungen zu übernehmen.

Anwendung besuchen

Die Bereitstellung dauert einige Minuten. Wenn der Vorgang abgeschlossen ist, 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 Browser-Tab, um die bereitgestellte Anwendung aufzurufen.

Screenshot einer 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 Sie gefragt werden, ob Sie fortfahren möchten, drücken Sie die Taste Enter.

15. Glückwunsch!

Herzlichen Glückwunsch zum Abschluss des Codelabs!

Wir empfehlen, die Dokumentation unter Kurzanleitung: Für Cloud Run aus einem Git-Repository bereitstellen zu lesen, damit Ihre zukünftigen Builds bei jeder Übertragung an die Versionsverwaltung automatisch bereitgestellt werden können.

Worüber haben wir gesprochen?

JavaScript-Frameworks, die von Cloud Build unterstützt werden, automatisch bereitstellen
- Angular SSR – basiert auf Angular
- Nuxt.js – basiert auf Vue.js
- Next.js – basierend auf React
- Remix – basiert auf React
- SvelteKit – basiert auf Svelte
- SolidStart – basiert auf Solid.js
JavaScript-Frameworks bereitstellen, die eine Konfiguration erfordern
- Astro
- Qwik

16. Bereinigen

Um unbeabsichtigte Gebühren zu vermeiden, z. B. wenn dieser Cloud Run-Dienst versehentlich öfter aufgerufen wird als Ihre monatliche Cloud Run-Aufrufkontingent im kostenlosen Kontingent, können Sie entweder den Cloud Run-Job oder das Projekt löschen, das Sie in Schritt 1 erstellt haben.

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 Projekt aus, das Sie in Schritt 2 erstellt haben, und klicken Sie auf „Löschen“. Wenn Sie das Projekt löschen, müssen Sie das Projekt in Ihrem Cloud SDK ändern. Sie können die Liste aller verfügbaren Projekte mit gcloud projects list aufrufen.