Como implantar todos os frameworks JavaScript no Cloud Run

1. Introdução

Visão geral

Neste codelab, você vai implantar oito aplicativos JavaScript no Cloud Run:

  • SSR do Angular: com base no Angular
  • Nuxt.js - com base em Vue.js
  • Next.js: com base no React.
  • Remix (com base no React)
  • SvelteKit - baseado no Svelte
  • SolidStart: baseado em Solid.js.
  • Astro
  • Qwik

Captura de tela do aplicativo AngularCaptura de tela do aplicativo Nuxt.jsCaptura de tela do aplicativo Next.jsCaptura de tela do app RemixarCaptura de tela do aplicativo SvelteKitCaptura de tela do aplicativo SolidStartCaptura de tela do aplicativo AstroCaptura de tela do aplicativo Qwik

O que você vai aprender

  • Como implantar frameworks JavaScript compatíveis com o Cloud Build automaticamente
  • Como implantar frameworks JavaScript que exigem configuração

Pré-requisitos

2. Ativar o Cloud Shell

  1. Navegue até o terminal do Cloud Shell: https://shell.cloud.google.com/?show=terminalSe esta for a primeira vez que você inicia o Cloud Shell, uma tela intermediária com a descrição será exibida. Se aparecer uma tela intermediária, clique em Continuar.O provisionamento e a conexão com o Cloud Shell devem levar apenas alguns instantes.
  2. Execute o seguinte comando no Cloud Shell para definir seu projeto gcloud:
    gcloud config set project <PROJECT_ID>
    Substitua &lt;PROJECT_ID&gt; pelo ID do projeto. Exemplo:
    gcloud config set project js-frameworks
    Se for preciso autorizar, clique em Autorizar.

3. Ativar APIs

Antes de começar a usar este codelab, você precisa ativar várias APIs. Este codelab requer o uso das APIs a seguir. É possível ativar essas APIs executando o seguinte comando:

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

Em seguida, defina as variáveis de ambiente que serão usadas neste codelab.

4. Configurar região padrão

É possível definir a região individualmente para cada implantação. Esse comando definirá a região padrão como us-central1 para que você não precise defini-la para cada uma.

gcloud config set run/region us-central1

5. Configurar o Git

Algumas bibliotecas esperam que git seja usado para controle de versões por padrão. Se você já configurou o git na sua máquina (por exemplo, está executando este laboratório localmente), não é necessário seguir estas etapas.

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)

  1. Navegue até o diretório em que você quer criar o aplicativo do Angular 
    cd ~
  2. Criar um aplicativo Angular que usa a renderização do lado do servidor (SSR) 
    npx @angular/cli new angular-app --ssr
    Quando suas preferências forem solicitadas, pressione a tecla Enter para aceitar os padrões.
  3. Navegue até a nova pasta do projeto que você criou 
    cd angular-app
  4. Implantar o aplicativo 
    gcloud run deploy --allow-unauthenticated
    Quando suas preferências forem solicitadas, pressione a tecla Enter para aceitar os padrões.

Acesse seu aplicativo

A implantação vai levar alguns minutos. Quando concluído, o Cloud Run vai retornar um URL como:

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

Captura de tela do aplicativo Angular

Abra o URL fornecido em uma nova guia do navegador para ver o aplicativo implantado.

Limpeza opcional

  1. Excluir o projeto do Angular localmente 
    cd ..
rm -rf angular-app
  2. Excluir o serviço do Angular para o Cloud Run 
    gcloud run services delete angular-app
    Quando aparecer uma mensagem perguntando se você quer continuar, pressione a tecla Enter.

7. Nuxt.js (Vue.js)

  1. Navegue até o diretório em que você quer criar o aplicativo do Angular 
    cd ~
  2. Criar um aplicativo Nuxt.js 
    npx nuxi init nuxt-app
    Quando suas preferências forem solicitadas, pressione a tecla Enter para aceitar os padrões.
  3. Navegue até a nova pasta do projeto que você criou 
    cd nuxt-app
  4. Implantar o aplicativo 
    gcloud run deploy --allow-unauthenticated
    Quando suas preferências forem solicitadas, pressione a tecla Enter para aceitar os padrões.

Acesse seu aplicativo

A implantação vai levar alguns minutos. Quando concluído, o Cloud Run vai retornar um URL como:

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

Abra o URL fornecido em uma nova guia do navegador para ver o aplicativo implantado.

Captura de tela do aplicativo Nuxt.js

Limpeza opcional

  1. Excluir o projeto Nuxt.js localmente 
    cd ..
rm -rf nuxt-app
  2. Excluir o serviço Nuxt.js do Cloud Run 
    gcloud run services delete nuxt-app
    Quando aparecer uma mensagem perguntando se você quer continuar, pressione a tecla Enter.

8. Next.js (React)

  1. Navegue até o diretório em que você quer criar o aplicativo Angular 
    cd ~
  2. Criar um aplicativo Next.js 
    npx create-next-app next-app
    Quando suas preferências forem solicitadas, pressione a tecla Enter para aceitar os padrões.
  3. Navegue até a nova pasta do projeto que você criou 
    cd next-app
  4. Implantar o aplicativo 
    gcloud run deploy --allow-unauthenticated
    Quando suas preferências forem solicitadas, pressione a tecla Enter para aceitar os padrões.

Acesse seu aplicativo

A implantação vai levar alguns minutos. Quando concluído, o Cloud Run vai retornar um URL como:

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

Abra o URL fornecido em uma nova guia do navegador para ver o aplicativo implantado.

Captura de tela do aplicativo Next.js

Limpeza opcional

  1. Excluir o projeto Next.js localmente 
    cd ..
rm -rf next-app
  2. Excluir o serviço Next.js do Cloud Run 
    gcloud run services delete next-app
    Quando aparecer uma mensagem perguntando se você quer continuar, pressione a tecla Enter.

9. Remix (reação)

  1. Navegue até o diretório em que você quer criar o aplicativo Angular 
    cd ~
  2. Criar um app Remix 
    npx create-remix remix-app
    Quando suas preferências forem solicitadas, pressione a tecla Enter para aceitar os padrões.
  3. Navegue até a nova pasta do projeto que você criou 
    cd remix-app
  4. Implantar o aplicativo 
    gcloud run deploy --allow-unauthenticated
    Quando suas preferências forem solicitadas, pressione a tecla Enter para aceitar os padrões.

Acesse seu aplicativo

A implantação vai levar alguns minutos. Quando concluído, o Cloud Run vai retornar um URL como:

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

Abra o URL fornecido em uma nova guia do navegador para ver o aplicativo implantado.

Captura de tela do app Remixar

Limpeza opcional

  1. Excluir o projeto de remix localmente 
    cd ..
rm -rf remix-app
  2. Excluir o serviço Remix do Cloud Run 
    gcloud run services delete remix-app
    Quando aparecer uma mensagem perguntando se você quer continuar, pressione a tecla Enter.

10. Limpeza do Cloud Shell

Se você não estiver usando o Cloud Shell ou estiver implantando apenas um aplicativo, esta etapa é opcional

O Cloud Shell oferece um diretório principal permanente de 5 GB e é executado no Google Cloud.

Para implantar os oito frameworks com o Cloud Shell, você precisa criar espaço para os aplicativos restantes.

A remoção dos projetos do Cloud Shell não excluirá os serviços implantados do Cloud Run.

Para limpar os aplicativos que você já criou, execute estes comandos:

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

11. SvelteKit (Svelte)

  1. Navegue até o diretório em que você quer criar o aplicativo Angular 
    cd ~
  2. Criar um aplicativo SvelteKit 
    npx create-svelte svelte-app
    Quando suas preferências forem solicitadas, pressione a tecla Enter para aceitar os padrões.
  3. Navegue até a nova pasta do projeto que você criou 
    cd svelte-app
  4. Implantar o aplicativo 
    gcloud run deploy --allow-unauthenticated
    Quando suas preferências forem solicitadas, pressione a tecla Enter para aceitar os padrões.

Acesse seu aplicativo

A implantação vai levar alguns minutos. Quando concluído, o Cloud Run vai retornar um URL como:

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

Abra o URL fornecido em uma nova guia do navegador para ver o aplicativo implantado.

Captura de tela do aplicativo SvelteKit

Limpeza opcional

  1. Excluir o projeto SvelteKit localmente 
    cd ..
rm -rf svelte-app
  2. Excluir o serviço SvelteKit do Cloud Run 
    gcloud run services delete svelte-app
    Quando aparecer uma mensagem perguntando se você quer continuar, pressione a tecla Enter.

12. SolidStart (Solid)

  1. Navegue até o diretório em que você quer criar o aplicativo Angular 
    cd ~
  2. Criar um aplicativo SolidStart 
    npx create-solid solid-app
    Quando suas preferências forem solicitadas, pressione a tecla Enter para aceitar os padrões.
  3. Navegue até a nova pasta do projeto que você criou 
    cd solid-app
  4. Implantar o aplicativo 
    gcloud run deploy --allow-unauthenticated
    Quando suas preferências forem solicitadas, pressione a tecla Enter para aceitar os padrões.

Acesse seu aplicativo

A implantação vai levar alguns minutos. Quando concluído, o Cloud Run vai retornar um URL como:

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

Abra o URL fornecido em uma nova guia do navegador para ver o aplicativo implantado.

Captura de tela do aplicativo SolidStart

Limpeza opcional

  1. Excluir o projeto SolidStart localmente 
    cd ..
rm -rf solid-app
  2. Excluir o serviço SolidStart do Cloud Run 
    gcloud run services delete solid-app
    Quando aparecer uma mensagem perguntando se você quer continuar, pressione a tecla Enter.

13. Astro

  1. Navegue até o diretório em que você quer criar o aplicativo Angular 
    cd ~
  2. Criar um aplicativo Astro 
    npx create-astro astro-app
    Quando suas preferências forem solicitadas, pressione a tecla Enter para aceitar os padrões.
  3. Navegue até a nova pasta do projeto que você criou 
    cd astro-app
  4. Adicionar o adaptador Astro para Node.js 
    npx astro add node
  5. Atualize o script start em package.json.
    npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
  6. Implantar o aplicativo 
    gcloud run deploy --allow-unauthenticated
    Quando suas preferências forem solicitadas, pressione a tecla Enter para aceitar os padrões.

Acesse seu aplicativo

A implantação vai levar alguns minutos. Quando concluído, o Cloud Run vai retornar um URL como:

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

Abra o URL fornecido em uma nova guia do navegador para ver o aplicativo implantado.

Captura de tela do aplicativo Astro

Limpeza opcional

  1. Excluir o projeto Astro localmente 
    cd ..
rm -rf astro-app
  2. Excluir o serviço Astro Cloud Run 
    gcloud run services delete astro-app
    Quando aparecer uma mensagem perguntando se você quer continuar, pressione a tecla Enter.

14. Qwik

  1. Navegue até o diretório em que você quer criar o aplicativo Angular 
    cd ~
  2. Criar um aplicativo Qwik 
    npx create-qwik
    Quando suas preferências forem solicitadas, pressione a tecla Enter para aceitar os padrões.
  3. Navegue até a nova pasta do projeto que você criou 
    cd qwik-app
  4. Adicionar o adaptador do Qwik para o Cloud Run 
    npm run qwik add cloud-run
  5. Implantar o aplicativo 
    gcloud run deploy --allow-unauthenticated
    Quando suas preferências forem solicitadas, pressione a tecla Enter para aceitar os padrões.

Acesse seu aplicativo

A implantação vai levar alguns minutos. Quando concluído, o Cloud Run vai retornar um URL como:

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

Abra o URL fornecido em uma nova guia do navegador para ver o aplicativo implantado.

Captura de tela do aplicativo Qwik

Limpeza opcional

  1. Excluir o projeto Qwik localmente 
    cd ..
rm -rf qwik-app
  2. Excluir o serviço Qwik Cloud Run 
    gcloud run services delete qwik-app
    Quando aparecer uma mensagem perguntando se você quer continuar, pressione a tecla Enter.

15. Parabéns!

Parabéns por concluir o codelab.

Recomendamos consultar a documentação em Guia de início rápido: implantar no Cloud Run a partir de um repositório git para que os builds futuros possam ser implantados automaticamente a cada push no controle de versões.

O que discutimos

  • Como implantar frameworks JavaScript compatíveis com o Cloud Build automaticamente
    • SSR do Angular: com base no Angular
    • Nuxt.js - com base em Vue.js
    • Next.js: com base no React.
    • Remix (com base no React)
    • SvelteKit - baseado no Svelte
    • SolidStart: baseado em Solid.js.
  • Como implantar frameworks JavaScript que exigem configuração
    • Astro
    • Qwik

16. Limpar

Para evitar cobranças acidentais, por exemplo, se esse serviço do Cloud Run for invocado mais vezes do que sua alocação mensal de invocação do Cloud Run no nível sem custo financeiro, exclua o job do Cloud Run ou o projeto criado na Etapa 1.

Para excluir os serviços do Cloud Run, acesse o console do Cloud Run do Cloud Run em https://console.cloud.google.com/run/ e exclua os serviços.

Se você optar por excluir o projeto inteiro, acesse https://console.cloud.google.com/cloud-resource-manager, selecione o projeto criado na etapa 2 e escolha "Excluir". Se você excluir o projeto, precisará alterar os projetos no SDK Cloud. Para conferir a lista de todos os projetos disponíveis, execute gcloud projects list.