Déployer tous les frameworks JavaScript sur Cloud Run

1. Introduction

Présentation

Dans cet atelier de programmation, vous allez déployer huit applications JavaScript sur Cloud Run :

SSR Angular (basé sur Angular)
Nuxt.js : basé sur Vue.js
Next.js (basé sur React)
Remix : basé sur React
SvelteKit (basé sur Svelte)
SolidStart, basé sur Solid.js
Astro
Qwik

Capture d'écran de l'application Angular

Points abordés

Déployer automatiquement des frameworks JavaScript compatibles avec Cloud Build
Déployer des frameworks JavaScript nécessitant une configuration

Prérequis

Vous êtes connecté au terminal Cloud Shell.
Vous disposez d'un projet Google Cloud avec facturation activée et autorisation de déploiement sur Cloud Run.
- Vous pouvez le vérifier si vous avez déjà déployé un service Cloud Run. Par exemple, vous pouvez suivre le guide de démarrage rapide pour déployer un service Web Node.js à partir du code source pour commencer.

2. Activer Cloud Shell

Accédez au terminal Cloud Shell : https://shell.cloud.google.com/?show=terminal. Si c'est la première fois que vous démarrez Cloud Shell, un écran intermédiaire s'affiche pour vous le présenter. Si tel est le cas, cliquez sur Continuer. Le provisionnement et la connexion à Cloud Shell ne devraient pas prendre plus de quelques minutes.
Exécutez la commande suivante dans Cloud Shell pour définir votre projet gcloud :
```
gcloud config set project <PROJECT_ID>
```
Remplacez <PROJECT_ID> par l'ID de votre projet. Exemple :
```
gcloud config set project js-frameworks
```
Si vous êtes invité à donner votre autorisation, cliquez sur Autoriser.

3. Activer les API

Avant de pouvoir commencer à utiliser cet atelier de programmation, vous devez activer plusieurs API. Cet atelier de programmation nécessite l'utilisation des API suivantes. Vous pouvez activer ces API en exécutant la commande suivante :

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

Vous pouvez ensuite définir des variables d'environnement qui seront utilisées tout au long de cet atelier de programmation.

4. Configurer la région par défaut

Vous pouvez définir la région individuellement pour chaque déploiement. Cette commande définira la région par défaut sur us-central1 afin que vous n'ayez pas à la définir pour chacune d'elles.

gcloud config set run/region us-central1

5. Configurer Git

Certaines bibliothèques s'attendent à ce que git soit utilisé pour le contrôle des versions par défaut. Si git est déjà configuré sur votre machine (par exemple, si vous exécutez cet atelier en local), vous n'avez pas besoin de suivre ces étapes.

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

6. SSR Angular (Angular)

Accédez au répertoire dans lequel vous souhaitez créer votre application Angular.
```
cd ~
```
Créer une application Angular qui utilise le rendu côté serveur (SSR)
```
npx @angular/cli new angular-app --ssr
```
Lorsque vous êtes invité à indiquer vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.
Accédez au dossier du nouveau projet que vous avez créé.
```
cd angular-app
```
Déployer l'application
```
gcloud run deploy --allow-unauthenticated
```
Lorsque vous êtes invité à indiquer vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.

Accéder à votre application

Le déploiement prendra quelques minutes. Une fois l'opération terminée, Cloud Run renvoie une URL semblable à celle-ci :

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

Capture d'écran de l'application Angular

Ouvrez l'URL fournie dans un nouvel onglet de navigateur pour afficher votre application déployée.

Nettoyage facultatif

Supprimer le projet Angular localement
```
cd ..
rm -rf angular-app
```
Supprimer le service Angular Cloud Run
```
gcloud run services delete angular-app
```
Lorsque vous êtes invité à continuer, appuyez sur la touche Enter.

7. Nuxt.js (Vue.js)

Accédez au répertoire dans lequel vous souhaitez créer votre application Angular.
```
cd ~
```
Créer une application Nuxt.js
```
npx nuxi init nuxt-app
```
Lorsque vous êtes invité à indiquer vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.
Accédez au dossier du nouveau projet que vous avez créé.
```
cd nuxt-app
```
Déployer l'application
```
gcloud run deploy --allow-unauthenticated
```
Lorsque vous êtes invité à indiquer vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.

Accéder à votre application

Le déploiement prendra quelques minutes. Une fois l'opération terminée, Cloud Run renvoie une URL semblable à celle-ci :

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

Ouvrez l'URL fournie dans un nouvel onglet de navigateur pour afficher votre application déployée.

Capture d'écran de l'application Nuxt.js

Nettoyage facultatif

Supprimer le projet Nuxt.js localement
```
cd ..
rm -rf nuxt-app
```
Supprimer le service Cloud Run Nuxt.js
```
gcloud run services delete nuxt-app
```
Lorsque vous êtes invité à continuer, appuyez sur la touche Enter.

8. Next.js (React)

Accédez au répertoire dans lequel vous souhaitez créer votre application Angular.
```
cd ~
```
Créer une application Next.js
```
npx create-next-app next-app
```
Lorsque vous êtes invité à indiquer vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.
Accédez au dossier du nouveau projet que vous avez créé.
```
cd next-app
```
Déployer l'application
```
gcloud run deploy --allow-unauthenticated
```
Lorsque vous êtes invité à indiquer vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.

Accéder à votre application

Le déploiement prendra quelques minutes. Une fois l'opération terminée, Cloud Run renvoie une URL semblable à celle-ci :

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

Ouvrez l'URL fournie dans un nouvel onglet de navigateur pour afficher votre application déployée.

Capture d'écran de l'application Next.js

Nettoyage facultatif

Supprimer le projet Next.js localement
```
cd ..
rm -rf next-app
```
Supprimer le service Cloud Run Next.js
```
gcloud run services delete next-app
```
Lorsque vous êtes invité à continuer, appuyez sur la touche Enter.

9. Remix (React)

Accédez au répertoire dans lequel vous souhaitez créer votre application Angular.
```
cd ~
```
Créer une application Remix
```
npx create-remix remix-app
```
Lorsque vous êtes invité à indiquer vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.
Accédez au dossier du nouveau projet que vous avez créé.
```
cd remix-app
```
Déployer l'application
```
gcloud run deploy --allow-unauthenticated
```
Lorsque vous êtes invité à indiquer vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.

Accéder à votre application

Le déploiement prendra quelques minutes. Une fois l'opération terminée, Cloud Run renvoie une URL semblable à celle-ci :

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

Ouvrez l'URL fournie dans un nouvel onglet de navigateur pour afficher votre application déployée.

Capture d'écran de l'application Remix

Nettoyage facultatif

Supprimer le projet Remix en local
```
cd ..
rm -rf remix-app
```
Supprimer le service Remix Cloud Run
```
gcloud run services delete remix-app
```
Lorsque vous êtes invité à continuer, appuyez sur la touche Enter.

10. Nettoyer Cloud Shell

Cette étape est facultative si vous n'utilisez pas Cloud Shell ou si vous ne déployez qu'une seule application.

Cloud Shell offre un répertoire d'accueil persistant de 5 Go et s'exécute sur Google Cloud.

Pour déployer les huit frameworks avec Cloud Shell, vous devez libérer de l'espace pour les applications restantes.

La suppression des projets dans Cloud Shell n'entraînera pas la suppression des services Cloud Run déployés.

Pour supprimer les applications que vous avez déjà créées, exécutez les commandes suivantes :

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

11. SvelteKit (Svelte)

Accédez au répertoire dans lequel vous souhaitez créer votre application Angular.
```
cd ~
```
Créer une application SvelteKit
```
npx create-svelte svelte-app
```
Lorsque vous êtes invité à indiquer vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.
Accédez au dossier du nouveau projet que vous avez créé.
```
cd svelte-app
```
Déployer l'application
```
gcloud run deploy --allow-unauthenticated
```
Lorsque vous êtes invité à indiquer vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.

Accéder à votre application

Le déploiement prendra quelques minutes. Une fois l'opération terminée, Cloud Run renvoie une URL semblable à celle-ci :

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

Ouvrez l'URL fournie dans un nouvel onglet de navigateur pour afficher votre application déployée.

Capture d'écran de l'application SvelteKit

Nettoyage facultatif

Supprimer le projet SvelteKit localement
```
cd ..
rm -rf svelte-app
```
Supprimer le service Cloud Run SvelteKit
```
gcloud run services delete svelte-app
```
Lorsque vous êtes invité à continuer, appuyez sur la touche Enter.

12. SolidStart (Solid)

Accédez au répertoire dans lequel vous souhaitez créer votre application Angular.
```
cd ~
```
Créer une application SolidStart
```
npx create-solid solid-app
```
Lorsque vous êtes invité à indiquer vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.
Accédez au dossier du nouveau projet que vous avez créé.
```
cd solid-app
```
Déployer l'application
```
gcloud run deploy --allow-unauthenticated
```
Lorsque vous êtes invité à indiquer vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.

Accéder à votre application

Le déploiement prendra quelques minutes. Une fois l'opération terminée, Cloud Run renvoie une URL semblable à celle-ci :

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

Ouvrez l'URL fournie dans un nouvel onglet de navigateur pour afficher votre application déployée.

Capture d'écran de l'application SolidStart

Nettoyage facultatif

Supprimer le projet SolidStart localement
```
cd ..
rm -rf solid-app
```
Supprimer le service SolidStart Cloud Run
```
gcloud run services delete solid-app
```
Lorsque vous êtes invité à continuer, appuyez sur la touche Enter.

13. Astro

Accédez au répertoire dans lequel vous souhaitez créer votre application Angular.
```
cd ~
```
Créer une application Astro
```
npx create-astro astro-app
```
Lorsque vous êtes invité à indiquer vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.
Accédez au dossier du nouveau projet que vous avez créé.
```
cd astro-app
```
Ajouter l'adaptateur Astro pour Node.js
```
npx astro add node
```

Mettre à jour le script start dans package.json

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

Déployer l'application
```
gcloud run deploy --allow-unauthenticated
```
Lorsque vous êtes invité à indiquer vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.

Accéder à votre application

Le déploiement prendra quelques minutes. Une fois l'opération terminée, Cloud Run renvoie une URL semblable à celle-ci :

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

Ouvrez l'URL fournie dans un nouvel onglet de navigateur pour afficher votre application déployée.

Capture d'écran de l'application Astro

Nettoyage facultatif

Supprimer le projet Astro localement
```
cd ..
rm -rf astro-app
```
Supprimer le service Astro Cloud Run
```
gcloud run services delete astro-app
```
Lorsque vous êtes invité à continuer, appuyez sur la touche Enter.

14. Qwik

Accédez au répertoire dans lequel vous souhaitez créer votre application Angular.
```
cd ~
```
Créer une application Qwik
```
npx create-qwik
```
Lorsque vous êtes invité à indiquer vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.
Accédez au dossier du nouveau projet que vous avez créé.
```
cd qwik-app
```
Ajouter l'adaptateur Qwik pour Cloud Run
```
npm run qwik add cloud-run
```
Déployer l'application
```
gcloud run deploy --allow-unauthenticated
```
Lorsque vous êtes invité à indiquer vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.

Accéder à votre application

Le déploiement prendra quelques minutes. Une fois l'opération terminée, Cloud Run renvoie une URL semblable à celle-ci :

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

Ouvrez l'URL fournie dans un nouvel onglet de navigateur pour afficher votre application déployée.

Capture d'écran de l'application Qwik

Nettoyage facultatif

Supprimer le projet Qwik localement
```
cd ..
rm -rf qwik-app
```
Supprimer le service Qwik Cloud Run
```
gcloud run services delete qwik-app
```
Lorsque vous êtes invité à continuer, appuyez sur la touche Enter.

15. Félicitations !

Bravo ! Vous avez terminé cet atelier de programmation.

Nous vous recommandons de consulter la documentation Guide de démarrage rapide : déployer dans Cloud Run à partir d'un dépôt git afin que vos futures compilations puissent être déployées automatiquement à chaque envoi vers le contrôle des versions.

Points abordés

Déployer automatiquement les frameworks JavaScript compatibles avec Cloud Build
- SSR Angular (basé sur Angular)
- Nuxt.js : basé sur Vue.js
- Next.js (basé sur React)
- Remix : basé sur React
- SvelteKit (basé sur Svelte)
- SolidStart, basé sur Solid.js
Déployer des frameworks JavaScript nécessitant une configuration
- Astro
- Qwik

16. Effectuer un nettoyage

Pour éviter des frais involontaires (par exemple, si ce service Cloud Run est invoqué par inadvertance plus de fois que votre quota mensuel d'invocations Cloud Run dans le niveau sans frais), vous pouvez supprimer le job Cloud Run ou le projet que vous avez créé à l'étape 1.

Pour supprimer les services Cloud Run, accédez à la console Cloud Run à l'adresse https://console.cloud.google.com/run/, puis supprimez les services Cloud Run.

Si vous choisissez de supprimer l'intégralité du projet, vous pouvez accéder à https://console.cloud.google.com/cloud-resource-manager, sélectionner le projet que vous avez créé à l'étape 2, puis choisir "Supprimer". Si vous supprimez le projet, vous devrez changer de projet dans votre SDK Cloud. Vous pouvez afficher la liste de tous les projets disponibles en exécutant gcloud projects list.