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

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

1. 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.
2. 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 "[e-mail]"
git config --global user.name "Your Name"
git config --global init.defaultBranch main

6. Angular SSR (Angular)

1. Gehen Sie zu dem Verzeichnis, in dem Sie die Angular-Anwendung erstellen möchten.

   cd ~
   

2. 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.
3. Öffnen Sie den neuen Projektordner, den Sie erstellt haben.

   cd angular-app
   

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

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

Optionale Bereinigung

1. Angular-Projekt lokal löschen

   cd ..
   rm -rf angular-app
   

2. 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)

1. Gehen Sie zu dem Verzeichnis, in dem Sie Ihre Angular-Anwendung erstellen möchten.

   cd ~
   

2. 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.
3. Öffnen Sie den neuen Projektordner, den Sie erstellt haben.

   cd nuxt-app
   

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

Optionale Bereinigung

1. Nuxt.js-Projekt lokal löschen

   cd ..
   rm -rf nuxt-app
   

2. 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)

1. Gehen Sie zu dem Verzeichnis, in dem Sie die Angular-Anwendung erstellen möchten.

   cd ~
   

2. 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.
3. Öffnen Sie den neuen Projektordner, den Sie erstellt haben.

   cd next-app
   

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

Optionale Bereinigung

1. Next.js-Projekt lokal löschen

   cd ..
   rm -rf next-app
   

2. 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)

1. Gehen Sie zu dem Verzeichnis, in dem Sie die Angular-Anwendung erstellen möchten.

   cd ~
   

2. 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.
3. Öffnen Sie den neuen Projektordner, den Sie erstellt haben.

   cd remix-app
   

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

Optionale Bereinigung

1. Remix-Projekt lokal löschen

   cd ..
   rm -rf remix-app
   

2. 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)

1. Gehen Sie zu dem Verzeichnis, in dem Sie Ihre Angular-Anwendung erstellen möchten.

   cd ~
   

2. 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.
3. Öffnen Sie den neuen Projektordner, den Sie erstellt haben.

   cd svelte-app
   

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

Optionale Bereinigung

1. SvelteKit-Projekt lokal löschen

   cd ..
   rm -rf svelte-app
   

2. 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)

1. Gehen Sie zu dem Verzeichnis, in dem Sie Ihre Angular-Anwendung erstellen möchten.

   cd ~
   

2. 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.
3. Öffnen Sie den neuen Projektordner, den Sie erstellt haben.

   cd solid-app
   

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

Optionale Bereinigung

1. SolidStart-Projekt lokal löschen

   cd ..
   rm -rf solid-app
   

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

1. Gehen Sie zu dem Verzeichnis, in dem Sie die Angular-Anwendung erstellen möchten.

   cd ~
   

2. 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.
3. Öffnen Sie den neuen Projektordner, den Sie erstellt haben.

   cd astro-app
   

4. Astro-Adapter für Node.js hinzufügen

   npx astro add node
   

5. Das Skript start in package.json aktualisieren

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

6. Anwendung bereitstellen

   gcloud run deploy --allow-unauthenticated
   

   Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.

Hinweis:Astro wird von Cloud Run nicht automatisch unterstützt, da Astro nicht standardmäßig die Node.js-Umgebung verwendet. Mit dem obigen Befehl npm pkg set wird das Skript start in package.json auf HOST=0.0.0.0 node ./dist/server/entry.mjs aktualisiert. Wenn Sie diesen Befehl zum Starten Ihrer Anwendung kennen, legen Sie ihn als start-Skript fest. Cloud Build versucht, die Anwendung mit dem Wert auszuführen, den Sie als start-Skript festgelegt haben.

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.

Optionale Bereinigung

1. Astro-Projekt lokal löschen

   cd ..
   rm -rf astro-app
   

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

1. Gehen Sie zu dem Verzeichnis, in dem Sie die Angular-Anwendung erstellen möchten.

   cd ~
   

2. Qwik-Anwendung erstellen

   npx create-qwik
   

   Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.
3. Öffnen Sie den neuen Projektordner, den Sie erstellt haben.

   cd qwik-app
   

4. Qwik Adapter für Cloud Run hinzufügen

   npm run qwik add cloud-run
   

5. Anwendung bereitstellen

   gcloud run deploy --allow-unauthenticated
   

   Wenn du nach deinen Einstellungen gefragt wirst, drücke die Taste Enter, um die Standardeinstellungen zu übernehmen.

Hinweis:Qwiklabs verwendet ein Dockerfile, um anzugeben, wie das Projekt erstellt und ausgeführt wird. Wenn das ausgewählte Framework von Cloud Run nicht automatisch unterstützt wird, können Sie ein Dockerfile verwenden, um Ihr bevorzugtes Framework bereitzustellen, wie es bei Qwiklabs der Fall ist. Cloud Build sucht nach einem Dockerfile, bevor es versucht, die Anwendung mit Buildpacks automatisch bereitzustellen.

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.

Optionale Bereinigung

1. Qwik-Projekt lokal löschen

   cd ..
   rm -rf qwik-app
   

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