Eseguire il deployment di tutti i framework JavaScript in Cloud Run

1. Introduzione

Panoramica

In questo codelab, esegui il deployment di otto applicazioni JavaScript su Cloud Run:

Angular SSR - basato su Angular
Nuxt.js, basato su Vue.js
Next.js - basato su React
Remix - basato su React
SvelteKit, basato su Svelte
SolidStart, basato su Solid.js
Astrofotografia
Qwik

Screenshot dell'applicazione Angular Screenshot dell'applicazione Nuxt.js Screenshot dell'applicazione Remix Screenshot dell'applicazione SvelteKit Screenshot dell'applicazione Qwik

Cosa imparerai a fare

Come eseguire automaticamente il deployment dei framework JavaScript supportati da Cloud Build
Come eseguire il deployment di framework JavaScript che richiedono la configurazione

Prerequisiti

Hai eseguito l'accesso al terminale Cloud Shell.
Hai un progetto Google Cloud con la fatturazione abilitata e l'autorizzazione per il deployment su Cloud Run
- Puoi verificarlo se hai già eseguito il deployment di un servizio Cloud Run. Ad esempio, puoi seguire la guida rapida per il deployment di un servizio web Node.js dal codice sorgente per iniziare.

2. Attiva Cloud Shell

Vai al terminale Cloud Shell: https://shell.cloud.google.com/?show=terminal. Se è la prima volta che avvii Cloud Shell, viene visualizzata una schermata intermedia che ne descrive le funzionalità. Se è stata visualizzata una schermata intermedia, fai clic su Continua. Bastano pochi istanti per eseguire il provisioning e connettersi a Cloud Shell.
Esegui questo comando in Cloud Shell per impostare il progetto gcloud:
```
gcloud config set project <PROJECT_ID>
```
Sostituisci <PROJECT_ID> con il tuo ID progetto. Esempio:
```
gcloud config set project js-frameworks
```
Se ti viene richiesto di concedere l'autorizzazione, fai clic su Autorizza.

3. Abilita API

Prima di poter iniziare a utilizzare questo codelab, devi abilitare diverse API. Questo codelab richiede l'utilizzo delle seguenti API. Puoi abilitare queste API eseguendo il seguente comando:

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

Poi puoi impostare le variabili di ambiente che verranno utilizzate durante questo codelab.

4. Configurare la regione predefinita

Puoi impostare la regione singolarmente per ogni deployment. Questo comando imposta la regione predefinita su us-central1, in modo che non sia necessario impostarla per ogni regione.

gcloud config set run/region us-central1

5. Configura Git

Per impostazione predefinita, alcune librerie prevedono l'utilizzo di git per il controllo delle versioni. Se hai già configurato git sul tuo computer (ad esempio, se stai eseguendo questo lab in locale), non è necessario eseguire questi passaggi.

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)

Vai alla directory in cui vuoi creare l'applicazione Angular
```
cd ~
```
Crea un'applicazione Angular che utilizza il rendering lato server (SSR)
```
npx @angular/cli new angular-app --ssr
```
Quando ti viene chiesto di inserire le tue preferenze, premi il tasto Enter per accettare le impostazioni predefinite.
Vai alla nuova cartella del progetto che hai creato.
```
cd angular-app
```
Esegui il deployment dell'applicazione
```
gcloud run deploy --allow-unauthenticated
```
Quando ti viene chiesto di inserire le tue preferenze, premi il tasto Enter per accettare le impostazioni predefinite.

Visitare l'applicazione

Il deployment richiederà alcuni minuti. Al termine, Cloud Run restituirà un URL simile a:

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

Screenshot dell'applicazione Angular

Apri l'URL fornito in una nuova scheda del browser per visualizzare l'applicazione di cui è stato eseguito il deployment.

Pulizia facoltativa

Elimina il progetto Angular in locale
```
cd ..
rm -rf angular-app
```
Elimina il servizio Cloud Run Angular
```
gcloud run services delete angular-app
```
Quando ti viene chiesto se vuoi continuare, premi il tasto Enter.

7. Nuxt.js (Vue.js)

Vai alla directory in cui vuoi creare l'applicazione Angular
```
cd ~
```
Crea un'applicazione Nuxt.js
```
npx nuxi init nuxt-app
```
Quando ti viene chiesto di inserire le tue preferenze, premi il tasto Enter per accettare le impostazioni predefinite.
Vai alla nuova cartella del progetto che hai creato.
```
cd nuxt-app
```
Esegui il deployment dell'applicazione
```
gcloud run deploy --allow-unauthenticated
```
Quando ti viene chiesto di inserire le tue preferenze, premi il tasto Enter per accettare le impostazioni predefinite.

Visitare l'applicazione

Il deployment richiederà alcuni minuti. Al termine, Cloud Run restituirà un URL simile a:

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

Apri l'URL fornito in una nuova scheda del browser per visualizzare l'applicazione di cui è stato eseguito il deployment.

Screenshot dell'applicazione Nuxt.js

Pulizia facoltativa

Elimina il progetto Nuxt.js in locale
```
cd ..
rm -rf nuxt-app
```
Elimina il servizio Cloud Run Nuxt.js
```
gcloud run services delete nuxt-app
```
Quando ti viene chiesto se vuoi continuare, premi il tasto Enter.

8. Next.js (React)

Vai alla directory in cui vuoi creare l'applicazione Angular
```
cd ~
```
Crea un'applicazione Next.js
```
npx create-next-app next-app
```
Quando ti viene chiesto di inserire le tue preferenze, premi il tasto Enter per accettare le impostazioni predefinite.
Vai alla nuova cartella del progetto che hai creato.
```
cd next-app
```
Esegui il deployment dell'applicazione
```
gcloud run deploy --allow-unauthenticated
```
Quando ti viene chiesto di inserire le tue preferenze, premi il tasto Enter per accettare le impostazioni predefinite.

Visitare l'applicazione

Il deployment richiederà alcuni minuti. Al termine, Cloud Run restituirà un URL simile a:

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

Apri l'URL fornito in una nuova scheda del browser per visualizzare l'applicazione di cui è stato eseguito il deployment.

Screenshot dell'applicazione Next.js

Pulizia facoltativa

Elimina il progetto Next.js in locale
```
cd ..
rm -rf next-app
```
Elimina il servizio Cloud Run Next.js
```
gcloud run services delete next-app
```
Quando ti viene chiesto se vuoi continuare, premi il tasto Enter.

9. Remix (React)

Vai alla directory in cui vuoi creare l'applicazione Angular
```
cd ~
```
Crea un'applicazione Remix
```
npx create-remix remix-app
```
Quando ti viene chiesto di inserire le tue preferenze, premi il tasto Enter per accettare le impostazioni predefinite.
Vai alla nuova cartella del progetto che hai creato.
```
cd remix-app
```
Esegui il deployment dell'applicazione
```
gcloud run deploy --allow-unauthenticated
```
Quando ti viene chiesto di inserire le tue preferenze, premi il tasto Enter per accettare le impostazioni predefinite.

Visitare l'applicazione

Il deployment richiederà alcuni minuti. Al termine, Cloud Run restituirà un URL simile a:

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

Apri l'URL fornito in una nuova scheda del browser per visualizzare l'applicazione di cui è stato eseguito il deployment.

Screenshot dell'applicazione Remix

Pulizia facoltativa

Eliminare il progetto di remix in locale
```
cd ..
rm -rf remix-app
```
Elimina il servizio Cloud Run Remix
```
gcloud run services delete remix-app
```
Quando ti viene chiesto se vuoi continuare, premi il tasto Enter.

10. Pulizia di Cloud Shell

Se non utilizzi Cloud Shell o esegui il deployment di una sola applicazione, questo passaggio è facoltativo

Cloud Shell offre una home directory permanente da 5 GB e viene eseguita in Google Cloud.

Per eseguire il deployment di tutti gli otto framework con Cloud Shell, devi creare spazio per le applicazioni rimanenti.

La rimozione dei progetti su Cloud Shell non elimina i servizi Cloud Run di cui hai eseguito il deployment.

Per eliminare le applicazioni che hai già creato, esegui questi comandi:

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

11. SvelteKit (Svelte)

Vai alla directory in cui vuoi creare l'applicazione Angular
```
cd ~
```
Crea un'applicazione SvelteKit
```
npx create-svelte svelte-app
```
Quando ti viene chiesto di inserire le tue preferenze, premi il tasto Enter per accettare le impostazioni predefinite.
Vai alla nuova cartella del progetto che hai creato.
```
cd svelte-app
```
Esegui il deployment dell'applicazione
```
gcloud run deploy --allow-unauthenticated
```
Quando ti viene chiesto di inserire le tue preferenze, premi il tasto Enter per accettare le impostazioni predefinite.

Visitare l'applicazione

Il deployment richiederà alcuni minuti. Al termine, Cloud Run restituirà un URL simile a:

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

Apri l'URL fornito in una nuova scheda del browser per visualizzare l'applicazione di cui è stato eseguito il deployment.

Screenshot dell'applicazione SvelteKit

Pulizia facoltativa

Elimina il progetto SvelteKit in locale
```
cd ..
rm -rf svelte-app
```
Elimina il servizio Cloud Run SvelteKit
```
gcloud run services delete svelte-app
```
Quando ti viene chiesto se vuoi continuare, premi il tasto Enter.

12. SolidStart (Solid)

Vai alla directory in cui vuoi creare l'applicazione Angular
```
cd ~
```
Crea un'applicazione SolidStart
```
npx create-solid solid-app
```
Quando ti viene chiesto di inserire le tue preferenze, premi il tasto Enter per accettare le impostazioni predefinite.
Vai alla nuova cartella del progetto che hai creato.
```
cd solid-app
```
Esegui il deployment dell'applicazione
```
gcloud run deploy --allow-unauthenticated
```
Quando ti viene chiesto di inserire le tue preferenze, premi il tasto Enter per accettare le impostazioni predefinite.

Visitare l'applicazione

Il deployment richiederà alcuni minuti. Al termine, Cloud Run restituirà un URL simile a:

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

Apri l'URL fornito in una nuova scheda del browser per visualizzare l'applicazione di cui è stato eseguito il deployment.

Screenshot dell'applicazione SolidStart

Pulizia facoltativa

Elimina il progetto SolidStart in locale
```
cd ..
rm -rf solid-app
```
Elimina il servizio Cloud Run SolidStart
```
gcloud run services delete solid-app
```
Quando ti viene chiesto se vuoi continuare, premi il tasto Enter.

13. Astrofotografia

Vai alla directory in cui vuoi creare l'applicazione Angular
```
cd ~
```
Crea un'applicazione Astro
```
npx create-astro astro-app
```
Quando ti viene chiesto di inserire le tue preferenze, premi il tasto Enter per accettare le impostazioni predefinite.
Vai alla nuova cartella del progetto che hai creato.
```
cd astro-app
```
Aggiungi l'adattatore Astro per Node.js
```
npx astro add node
```

Aggiorna lo script start in package.json

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

Esegui il deployment dell'applicazione
```
gcloud run deploy --allow-unauthenticated
```
Quando ti viene chiesto di inserire le tue preferenze, premi il tasto Enter per accettare le impostazioni predefinite.

Visitare l'applicazione

Il deployment richiederà alcuni minuti. Al termine, Cloud Run restituirà un URL simile a:

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

Apri l'URL fornito in una nuova scheda del browser per visualizzare l'applicazione di cui è stato eseguito il deployment.

Screenshot dell'applicazione Astro

Pulizia facoltativa

Elimina il progetto Astro in locale
```
cd ..
rm -rf astro-app
```
Elimina il servizio Astro Cloud Run
```
gcloud run services delete astro-app
```
Quando ti viene chiesto se vuoi continuare, premi il tasto Enter.

14. Qwik

Vai alla directory in cui vuoi creare l'applicazione Angular
```
cd ~
```
Crea un'applicazione Qwik
```
npx create-qwik
```
Quando ti viene chiesto di inserire le tue preferenze, premi il tasto Enter per accettare le impostazioni predefinite.
Vai alla nuova cartella del progetto che hai creato.
```
cd qwik-app
```
Aggiungi l'adattatore Qwik per Cloud Run
```
npm run qwik add cloud-run
```
Esegui il deployment dell'applicazione
```
gcloud run deploy --allow-unauthenticated
```
Quando ti viene chiesto di inserire le tue preferenze, premi il tasto Enter per accettare le impostazioni predefinite.

Visitare l'applicazione

Il deployment richiederà alcuni minuti. Al termine, Cloud Run restituirà un URL simile a:

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

Apri l'URL fornito in una nuova scheda del browser per visualizzare l'applicazione di cui è stato eseguito il deployment.

Screenshot dell'applicazione Qwik

Pulizia facoltativa

Elimina il progetto Qwik in locale
```
cd ..
rm -rf qwik-app
```
Elimina il servizio Cloud Run Qwik
```
gcloud run services delete qwik-app
```
Quando ti viene chiesto se vuoi continuare, premi il tasto Enter.

15. Complimenti!

Congratulazioni per aver completato il codelab.

Ti consigliamo di consultare la documentazione relativa alla Guida rapida: esegui il deployment in Cloud Run da un repository Git in modo che le build future possano essere eseguite automaticamente a ogni push nel controllo della versione.

Argomenti trattati

Come eseguire automaticamente il deployment dei framework JavaScript supportati da Cloud Build
- Angular SSR - basato su Angular
- Nuxt.js, basato su Vue.js
- Next.js - basato su React
- Remix - basato su React
- SvelteKit, basato su Svelte
- SolidStart, basato su Solid.js
Come eseguire il deployment di framework JavaScript che richiedono la configurazione
- Astrofotografia
- Qwik

16. Esegui la pulizia

Per evitare addebiti involontari (ad esempio, se questo servizio Cloud Run viene richiamato inavvertitamente più volte rispetto all'allocazione mensile di chiamate di Cloud Run nel livello senza costi), puoi eliminare il job Cloud Run o il progetto che hai creato nel passaggio 1.

Per eliminare i servizi Cloud Run, vai alla console Cloud Run all'indirizzo https://console.cloud.google.com/run/ ed eliminali.

Se scegli di eliminare l'intero progetto, puoi andare alla pagina https://console.cloud.google.com/cloud-resource-manager, selezionare il progetto che hai creato nel passaggio 2 e scegliere Elimina. Se elimini il progetto, dovrai cambiare progetto in Cloud SDK. Puoi visualizzare l'elenco di tutti i progetti disponibili eseguendo gcloud projects list.