Cette page a été traduite par l'API Cloud Translation.

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 les frameworks JavaScript pris en charge automatiquement par Cloud Build
Déployer des frameworks JavaScript qui nécessitent une configuration

Prérequis

Vous êtes connecté au terminal Cloud Shell.
Vous disposez d'un projet Google Cloud pour lequel la facturation est activée et vous êtes autorisé à effectuer des déploiements sur Cloud Run.
- Vous pouvez le vérifier si vous avez déjà déployé un service Cloud Run. Vous pouvez par exemple suivre le guide de démarrage rapide pour déployer un service Web Node.js depuis le code source.

2. Activer Cloud Shell

Accédez au terminal Cloud Shell: https://shell.cloud.google.com/?show=terminal. Si vous démarrez Cloud Shell pour la première fois, un écran intermédiaire s'affiche. Si un écran intermédiaire s'est affiché, 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 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 les 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éfinit la région par défaut sur us-central1. Vous n'avez donc pas besoin de 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é par défaut pour le contrôle des versions. 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 utilisant le rendu côté serveur (SSR)
```
npx @angular/cli new angular-app --ssr
```
Lorsque vous êtes invité à saisir vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.
Accédez au dossier du projet que vous avez créé.
```
cd angular-app
```
Déployer l'application
```
gcloud run deploy --allow-unauthenticated
```
Lorsque vous êtes invité à saisir vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.

Accéder à votre application

Le déploiement prend 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 l'application déployée.

Nettoyage facultatif

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

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é à saisir vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.
Accédez au dossier du projet que vous avez créé.
```
cd nuxt-app
```
Déployer l'application
```
gcloud run deploy --allow-unauthenticated
```
Lorsque vous êtes invité à saisir vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.

Accéder à votre application

Le déploiement prend 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 l'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 y êtes invité, appuyez sur la touche Enter pour continuer.

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é à saisir vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.
Accédez au dossier du projet que vous avez créé.
```
cd next-app
```
Déployer l'application
```
gcloud run deploy --allow-unauthenticated
```
Lorsque vous êtes invité à saisir vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.

Accéder à votre application

Le déploiement prend 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 l'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 y êtes invité, appuyez sur la touche Enter pour continuer.

9. Remixer (réagir)

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é à saisir vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.
Accédez au dossier du projet que vous avez créé.
```
cd remix-app
```
Déployer l'application
```
gcloud run deploy --allow-unauthenticated
```
Lorsque vous êtes invité à saisir vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.

Accéder à votre application

Le déploiement prend 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 l'application déployée.

Capture d'écran de l'application Remix

Nettoyage facultatif

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

10. Nettoyage Cloud Shell

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

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

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

La suppression de projets dans Cloud Shell n'entraîne pas la suppression des services Cloud Run déployés que vous avez déployés.

Pour vider 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é à saisir vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.
Accédez au dossier du projet que vous avez créé.
```
cd svelte-app
```
Déployer l'application
```
gcloud run deploy --allow-unauthenticated
```
Lorsque vous êtes invité à saisir vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.

Accéder à votre application

Le déploiement prend 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 l'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 y êtes invité, appuyez sur la touche Enter pour continuer.

12. SolidStart (uni)

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é à saisir vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.
Accédez au dossier du projet que vous avez créé.
```
cd solid-app
```
Déployer l'application
```
gcloud run deploy --allow-unauthenticated
```
Lorsque vous êtes invité à saisir vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.

Accéder à votre application

Le déploiement prend 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 l'application déployée.

Capture d'écran de l'application SolidStart

Nettoyage facultatif

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

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é à saisir vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.
Accédez au dossier du projet que vous avez créé.
```
cd astro-app
```
Ajouter l'adaptateur Astro pour Node.js
```
npx astro add node
```

Mettez à 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é à saisir vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.

Accéder à votre application

Le déploiement prend 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 l'application déployée.

Capture d'écran de l'application Astro

Nettoyage facultatif

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

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é à saisir vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.
Accédez au dossier du 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é à saisir vos préférences, appuyez sur la touche Enter pour accepter les valeurs par défaut.

Accéder à votre application

Le déploiement prend 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 l'application déployée.

Capture d'écran de l'application Qwik

Nettoyage facultatif

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

15. Félicitations !

Félicitations ! Vous avez terminé cet atelier de programmation.

Nous vous recommandons de consulter la documentation sur le guide de démarrage rapide: Déployer sur Cloud Run à partir d'un dépôt Git pour que vos futures compilations puissent se déployer automatiquement à chaque transmission vers le contrôle des versions.

Ce que vous avez appris

Déployer 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 qui nécessitent une configuration
- Astro
- Qwik

16. Effectuer un nettoyage

Pour éviter des frais accidentels (par exemple, si ce service Cloud Run est appelé par inadvertance plus de fois que l'allocation mensuelle des appels Cloud Run dans le niveau sans frais), vous pouvez supprimer le job Cloud Run ou le projet créé à l'étape 1.

Pour supprimer les services Cloud Run, accédez à la console Cloud Run à l'adresse https://console.cloud.google.com/run/ et 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 cliquer sur "Supprimer". Si vous supprimez le projet, vous devrez le modifier dans Cloud SDK. Vous pouvez afficher la liste de tous les projets disponibles en exécutant gcloud projects list.