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: baseado em Vue.js
  • Next.js: baseado em React
  • Remix: com base no React.
  • SvelteKit: com base no Svelte
  • SolidStart: baseado em Solid.js.
  • Astrofotografia
  • Qwik

Captura de tela do aplicativo AngularCaptura de tela do aplicativo Nuxt.jsCaptura de tela do aplicativo Next.jsCaptura de tela do aplicativo RemixCaptura 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 automaticamente frameworks JavaScript compatíveis com o Cloud Build
  • Como implantar frameworks JavaScript que exigem configuração

Pré-requisitos

2. Ativar o Cloud Shell

  1. Acesse o terminal do Cloud Shell: https://shell.cloud.google.com/?show=terminal. Se esta for a primeira vez que você inicia o Cloud Shell, uma tela intermediária vai aparecer com a descrição dele. Se isso acontecer, clique em Continuar. Leva apenas alguns instantes para provisionar e se conectar ao Cloud Shell.
  2. Execute o seguinte comando no Cloud Shell para definir o projeto gcloud:
    gcloud config set project <PROJECT_ID>
    Substitua <PROJECT_ID> 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 exige o uso das seguintes APIs. Para ativar essas APIs, execute 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 a região padrão

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

gcloud config set run/region us-central1

5. Configurar o Git

Algumas bibliotecas esperam que o git seja usado para controle de versão por padrão. Se você já tiver o git configurado na sua máquina (por exemplo, se estiver executando este laboratório localmente), não será 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 do Angular (Angular)

  1. Navegue até o diretório em que você quer criar o aplicativo 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 for solicitada a confirmação das suas preferências, pressione a tecla Enter para aceitar os padrões.
  3. Acesse a pasta do novo projeto que você criou. 
    cd angular-app
  4. Implantar o aplicativo 
    gcloud run deploy --allow-unauthenticated
    Quando for solicitada a confirmação das suas preferências, pressione a tecla Enter para aceitar os padrões.

Acesse seu aplicativo

A implantação leva 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 conferir o aplicativo implantado.

Limpeza opcional

  1. Excluir o projeto do Angular localmente 
    cd ..
rm -rf angular-app
  2. Excluir o serviço do Cloud Run do Angular 
    gcloud run services delete angular-app
    Quando perguntar 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 Angular. 
    cd ~
  2. Criar um aplicativo Nuxt.js 
    npx nuxi init nuxt-app
    Quando for solicitada a confirmação das suas preferências, pressione a tecla Enter para aceitar os padrões.
  3. Acesse a pasta do novo projeto que você criou. 
    cd nuxt-app
  4. Implantar o aplicativo 
    gcloud run deploy --allow-unauthenticated
    Quando for solicitada a confirmação das suas preferências, pressione a tecla Enter para aceitar os padrões.

Acesse seu aplicativo

A implantação leva 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 conferir 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 do Cloud Run do Nuxt.js 
    gcloud run services delete nuxt-app
    Quando perguntar 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 for solicitada a confirmação das suas preferências, pressione a tecla Enter para aceitar os padrões.
  3. Acesse a pasta do novo projeto que você criou. 
    cd next-app
  4. Implantar o aplicativo 
    gcloud run deploy --allow-unauthenticated
    Quando for solicitada a confirmação das suas preferências, pressione a tecla Enter para aceitar os padrões.

Acesse seu aplicativo

A implantação leva 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 conferir 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 do Cloud Run do Next.js 
    gcloud run services delete next-app
    Quando perguntar se você quer continuar, pressione a tecla Enter.

9. Remix (React)

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

Acesse seu aplicativo

A implantação leva 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 conferir o aplicativo implantado.

Captura de tela do aplicativo Remix

Limpeza opcional

  1. Excluir o projeto do Remix localmente 
    cd ..
rm -rf remix-app
  2. Excluir o serviço do Cloud Run do Remix 
    gcloud run services delete remix-app
    Quando perguntar 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 será opcional.

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

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

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

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 for solicitada a confirmação das suas preferências, pressione a tecla Enter para aceitar os padrões.
  3. Acesse a pasta do novo projeto que você criou. 
    cd svelte-app
  4. Implantar o aplicativo 
    gcloud run deploy --allow-unauthenticated
    Quando for solicitada a confirmação das suas preferências, pressione a tecla Enter para aceitar os padrões.

Acesse seu aplicativo

A implantação leva 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 conferir 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 do Cloud Run do SvelteKit 
    gcloud run services delete svelte-app
    Quando perguntar 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 for solicitada a confirmação das suas preferências, pressione a tecla Enter para aceitar os padrões.
  3. Acesse a pasta do novo projeto que você criou. 
    cd solid-app
  4. Implantar o aplicativo 
    gcloud run deploy --allow-unauthenticated
    Quando for solicitada a confirmação das suas preferências, pressione a tecla Enter para aceitar os padrões.

Acesse seu aplicativo

A implantação leva 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 conferir 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 do Cloud Run do SolidStart 
    gcloud run services delete solid-app
    Quando perguntar se você quer continuar, pressione a tecla Enter.

13. Astrofotografia

  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 for solicitada a confirmação das suas preferências, pressione a tecla Enter para aceitar os padrões.
  3. Acesse a pasta do novo projeto que você criou. 
    cd astro-app
  4. Adicione o adaptador do 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 for solicitada a confirmação das suas preferências, pressione a tecla Enter para aceitar os padrões.

Acesse seu aplicativo

A implantação leva 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 conferir o aplicativo implantado.

Captura de tela do aplicativo Astro

Limpeza opcional

  1. Excluir o projeto do Astro localmente 
    cd ..
rm -rf astro-app
  2. Excluir o serviço do Cloud Run do Astro 
    gcloud run services delete astro-app
    Quando perguntar 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 for solicitada a confirmação das suas preferências, pressione a tecla Enter para aceitar os padrões.
  3. Acesse a pasta do novo projeto que você criou. 
    cd qwik-app
  4. Adicionar o adaptador Qwik para o Cloud Run 
    npm run qwik add cloud-run
  5. Implantar o aplicativo 
    gcloud run deploy --allow-unauthenticated
    Quando for solicitada a confirmação das suas preferências, pressione a tecla Enter para aceitar os padrões.

Acesse seu aplicativo

A implantação leva 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 conferir o aplicativo implantado.

Captura de tela do aplicativo Qwik

Limpeza opcional

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

15. Parabéns!

Parabéns por concluir o codelab!

Recomendamos que você revise a documentação em Guia de início rápido: implantação no Cloud Run de um repositório git para que seus builds futuros possam ser implantados automaticamente a cada envio para o controle de versões.

O que discutimos

  • Como implantar automaticamente frameworks JavaScript compatíveis com o Cloud Build
    • SSR do Angular: com base no Angular
    • Nuxt.js: baseado em Vue.js
    • Next.js: baseado em React
    • Remix: com base no React.
    • SvelteKit: com base no Svelte
    • SolidStart: baseado em Solid.js.
  • Como implantar frameworks JavaScript que exigem configuração
    • Astrofotografia
    • 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ções 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 em https://console.cloud.google.com/run/ e exclua os serviços.

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