DS & II

Capítulo 18 - Star Trek

Leitura de 4 min

🚀 Capítulo 18: Audaciosamente indo onde ninguém jamais esteve (Tema: Star Trek)

NOTE

Este capítulo utiliza a temática de Star Trek para explicar o Deploy na Nuvem. Lance a sua nave (aplicação) para o universo para que qualquer pessoa possa acessá-la!

1. 🎯 Objetivo da Aula

Compreender o que é o processo de Deploy (Implantação), o que é a computação em Nuvem e conhecer serviços gratuitos para colocar o seu Frontend, Backend e Banco de Dados no ar para todo o mundo.

2. 🏢 O Cenário Prático (Seu Desafio)

Na clássica série Star Trek (Jornada nas Estrelas), a tripulação da nave USS Enterprise viaja pelo espaço inexplorado com a missão de “audaciosamente ir onde ninguém jamais esteve”. Eles não ficam trancados na garagem da Terra; eles lançam a nave para o universo para que outras civilizações possam conhecê-los e interagir com eles!

Até agora no curso, o seu projeto Full Stack só roda dentro do seu próprio computador (o famoso localhost).

  • Se você mandar o link http://localhost:3000 para o seu amigo pelo WhatsApp, ele não vai conseguir abrir o seu site!
  • Para que as pessoas do mundo inteiro consigam usar o seu app, nós precisamos fazer o Deploy (Hospedagem).
  • Nós vamos lançar o nosso app para a Nuvem (Cloud)! Seu desafio é fazer o lançamento perfeito!

🧠 Fundamentos: A Teoria Traduzida

☁️ 1. O que é a Nuvem (Cloud)?

A nuvem nada mais é do que o computador de outra pessoa (geralmente uma empresa gigante como Amazon, Google ou Microsoft) que fica ligado horas por dia na internet e que você pode alugar para colocar o seu site.

🚀 2. Onde hospedar cada parte do seu app de graça?

Como somos estudantes, não queremos gastar dinheiro! Existem serviços excelentes que oferecem planos gratuitos para projetos de estudo:

  1. Vercel (Para o Frontend): É o melhor lugar para colocar o seu site React ou HTML/CSS. Basta conectar a sua conta do GitHub e a Vercel publica o seu site e te dá um link seu-app.vercel.app de graça em segundos!
  2. Render (Para o Backend): Um ótimo serviço para hospedar o seu servidor Node.js/Express de graça.
  3. Supabase (Para o Banco de Dados): Te dá um banco de dados PostgreSQL real e poderoso na nuvem com poucos cliques.

4. 📖 Exemplo Guiado: Integração Contínua (CI/CD)

A melhor parte de usar serviços modernos como a Vercel é que você não precisa ficar enviando arquivos manualmente toda vez que atualiza o site!

  1. Você faz uma alteração no código no seu computador.
  2. Você faz o git push para o seu repositório no GitHub.
  3. A Vercel detecta que o código mudou, busca a versão nova e atualiza o seu site automaticamente na internet!

5. 🛠️ Prática Obrigatória 1: Escolhendo o Planeta

Para qual das seguintes plataformas (Vercel, Render ou Supabase) você enviaria cada parte do seu projeto Full Stack?

  1. O seu banco de dados PostgreSQL que guarda os e-mails e senhas dos usuários.
  2. A pasta com os arquivos HTML, CSS e imagens do seu site visual.
  3. O seu arquivo servidor.js feito em Node.js e Express.

6. 🛠️ Prática Obrigatória 2: O Problema do Localhost

  1. Por que o endereço http://localhost:3000 só funciona no seu próprio computador e não pode ser usado para as pessoas acessarem o seu site pela internet?

7. 📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 18 FS_StarTrek) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.

8. 📂 Estrutura de Pastas

proj_aplicacoes_full_stack/
├── capitulos/
│   └── capitulo_18_star_trek.md

💡 Checkpoint de Lógica

Os planos gratuitos desses serviços costumam colocar o seu servidor Backend para “dormir” se ninguém acessar o site por alguns minutos. Por isso, na primeira vez que você acessa o site depois de muito tempo, ele pode demorar um pouco para carregar!

10. 🔥 Desafio de Fixação

Crie uma conta gratuita na plataforma Vercel usando o seu login do GitHub.

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática 1:

  1. Supabase.
  2. Vercel.
  3. Render. Gabarito da Prática 2:
  4. Porque a palavra localhost significa literalmente “máquina local” (ou seja, o seu próprio computador). O navegador tenta buscar o servidor dentro do próprio aparelho em que ele está rodando. Um amigo no celular dele tentaria buscar o servidor dentro do celular dele, onde o app não existe!

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks