Questa pagina è stata tradotta dall'API Cloud Translation.

Eseguire il deployment di tutti i framework JavaScript in Cloud Run

1. Introduzione

Panoramica

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

SSR Angular, basato su Angular
Nuxt.js - basato su Vue.js
Next.js - basato sulla reazione
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

Eseguire automaticamente il deployment di 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 fatturazione abilitata e autorizzazione per il deployment in Cloud Run
- Puoi verificarlo se hai già eseguito il deployment di un servizio Cloud Run. Ad esempio, per iniziare, puoi seguire la guida rapida al deployment di un servizio web Node.js dal codice sorgente.

2. Attiva Cloud Shell

Vai al terminale Cloud Shell: https://shell.cloud.google.com/?show=terminalSe è la prima volta che avvii Cloud Shell, viene visualizzata una schermata intermedia che descrive di cosa si tratta. Se è stata visualizzata una schermata intermedia, fai clic su Continua.Il provisioning e la connessione a Cloud Shell dovrebbero richiedere solo pochi minuti.
Esegui questo comando in Cloud Shell per impostare il tuo progetto gcloud:
```
gcloud config set project <PROJECT_ID>
```
Sostituisci <PROJECT_ID> con l'ID del tuo progetto. Esempio:
```
gcloud config set project js-frameworks
```
Se ti viene richiesta l'autorizzazione, fai clic su Autorizza.

3. Abilita API

Prima di poter iniziare a utilizzare questo codelab, ci sono diverse API che dovrai abilitare. Questo codelab richiede l'utilizzo delle API seguenti. Puoi abilitare queste API eseguendo questo comando:

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

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

4. Configura la regione predefinita

Puoi impostare la regione singolarmente per ogni deployment. Questo comando imposterà la regione predefinita su us-central1, così non dovrai impostarla per ogni regione.

gcloud config set run/region us-central1

5. Configura Git

Alcune librerie prevedono che per impostazione predefinita venga utilizzato git per il controllo della versione. Se hai già configurato git sulla tua macchina (ad esempio, stai eseguendo questo lab localmente), non devi 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 ~
```
Creare un'applicazione Angular che utilizza il rendering lato server (SSR)
```
npx @angular/cli new angular-app --ssr
```
Quando ti vengono richieste le tue preferenze, premi il tasto Enter per accettare i valori predefiniti.
Vai alla nuova cartella del progetto che hai creato
```
cd angular-app
```
Esegui il deployment dell'applicazione
```
gcloud run deploy --allow-unauthenticated
```
Quando ti vengono richieste le tue preferenze, premi il tasto Enter per accettare i valori predefiniti.

Visitare l'applicazione

Il deployment richiederà alcuni minuti. Al termine, Cloud Run restituirà un URL come il seguente:

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 hai 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 ~
```
Creare un'applicazione Nuxt.js
```
npx nuxi init nuxt-app
```
Quando ti vengono richieste le tue preferenze, premi il tasto Enter per accettare i valori predefiniti.
Vai alla nuova cartella del progetto che hai creato
```
cd nuxt-app
```
Esegui il deployment dell'applicazione
```
gcloud run deploy --allow-unauthenticated
```
Quando ti vengono richieste le tue preferenze, premi il tasto Enter per accettare i valori predefiniti.

Visitare l'applicazione

Il deployment richiederà alcuni minuti. Al termine, Cloud Run restituirà un URL come il seguente:

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

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

Screenshot dell'applicazione Nuxt.js

Pulizia facoltativa

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

8. Next.js (reazione)

Vai alla directory in cui vuoi creare l'applicazione Angular
```
cd ~
```
Creare un'applicazione Next.js
```
npx create-next-app next-app
```
Quando ti vengono richieste le tue preferenze, premi il tasto Enter per accettare i valori predefiniti.
Vai alla nuova cartella del progetto che hai creato
```
cd next-app
```
Esegui il deployment dell'applicazione
```
gcloud run deploy --allow-unauthenticated
```
Quando ti vengono richieste le tue preferenze, premi il tasto Enter per accettare i valori predefiniti.

Visitare l'applicazione

Il deployment richiederà alcuni minuti. Al termine, Cloud Run restituirà un URL come il seguente:

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

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

Screenshot dell'applicazione Next.js

Pulizia facoltativa

Elimina il progetto Next.js localmente
```
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 (reazione)

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

Visitare l'applicazione

Il deployment richiederà alcuni minuti. Al termine, Cloud Run restituirà un URL come il seguente:

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

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

Screenshot dell'applicazione Remix

Pulizia facoltativa

Elimina il progetto Remix in locale
```
cd ..
rm -rf remix-app
```
Elimina il servizio Remix Cloud Run
```
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 eseguito in Google Cloud.

Per eseguire il deployment degli otto framework con Cloud Shell, dovrai creare spazio per le applicazioni rimanenti.

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

Per cancellare 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 vengono richieste le tue preferenze, premi il tasto Enter per accettare i valori predefiniti.
Vai alla nuova cartella del progetto che hai creato
```
cd svelte-app
```
Esegui il deployment dell'applicazione
```
gcloud run deploy --allow-unauthenticated
```
Quando ti vengono richieste le tue preferenze, premi il tasto Enter per accettare i valori predefiniti.

Visitare l'applicazione

Il deployment richiederà alcuni minuti. Al termine, Cloud Run restituirà un URL come il seguente:

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

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

Screenshot dell'applicazione SvelteKit

Pulizia facoltativa

Elimina il progetto SvelteKit localmente
```
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 (fisso)

Vai alla directory in cui vuoi creare l'applicazione Angular
```
cd ~
```
Creare un'applicazione SolidStart
```
npx create-solid solid-app
```
Quando ti vengono richieste le tue preferenze, premi il tasto Enter per accettare i valori predefiniti.
Vai alla nuova cartella del progetto che hai creato
```
cd solid-app
```
Esegui il deployment dell'applicazione
```
gcloud run deploy --allow-unauthenticated
```
Quando ti vengono richieste le tue preferenze, premi il tasto Enter per accettare i valori predefiniti.

Visitare l'applicazione

Il deployment richiederà alcuni minuti. Al termine, Cloud Run restituirà un URL come il seguente:

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

Apri l'URL fornito in una nuova scheda del browser per visualizzare l'applicazione di cui hai 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 vengono richieste le tue preferenze, premi il tasto Enter per accettare i valori predefiniti.
Vai alla nuova cartella del progetto che hai creato
```
cd astro-app
```
Aggiungere 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 vengono richieste le tue preferenze, premi il tasto Enter per accettare i valori predefiniti.

Visitare l'applicazione

Il deployment richiederà alcuni minuti. Al termine, Cloud Run restituirà un URL come il seguente:

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

Apri l'URL fornito in una nuova scheda del browser per visualizzare l'applicazione di cui hai 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 vengono richieste le tue preferenze, premi il tasto Enter per accettare i valori predefiniti.
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 vengono richieste le tue preferenze, premi il tasto Enter per accettare i valori predefiniti.

Visitare l'applicazione

Il deployment richiederà alcuni minuti. Al termine, Cloud Run restituirà un URL come il seguente:

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

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

Screenshot dell'applicazione Qwik

Pulizia facoltativa

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

15. Complimenti!

Complimenti per aver completato il codelab.

Ti consigliamo di consultare la documentazione sulla Guida rapida: deployment in Cloud Run da un repository Git in modo che il deployment delle build future possa essere eseguito automaticamente con ogni push al controllo della versione.

Argomenti trattati

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

16. Esegui la pulizia

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

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

Se scegli di eliminare l'intero progetto, puoi andare all'indirizzo 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 modificarli in Cloud SDK. Puoi visualizzare l'elenco di tutti i progetti disponibili eseguendo gcloud projects list.