6  Do Codespaces para o Mundo

Parabéns! Você chegou ao capítulo final desta jornada prática.

Se olharmos para trás, o caminho percorrido até aqui envolveu etapas importantes:

  1. Você configurou um ambiente profissional de desenvolvimento nas nuvens com o GitHub Codespaces, livre de qualquer dependência ou instalação física nas máquinas do laboratório;
  2. Inicializou o motor do Astro e compreendeu a filosofia de Zero JavaScript por padrão;
  3. Criou as rotas e páginas institucionais da TED System utilizando o roteamento baseado em arquivos;
  4. Modularizou a aplicação eliminando a repetição de código com a criação de componentes reutilizáveis (Header e Footer) e um layout mestre com a tag <slot />;
  5. Estilizou a interface com estilos globais, variáveis CSS e estilos com escopo, e adicionou as imagens em public/images/.

Até este momento, no entanto, o site da TED System existia apenas dentro do ambiente privado de desenvolvimento do Codespaces, visível apenas para você através de um túnel seguro de porta (4321).

Chegou a etapa final: vamos publicar o site na internet pública, com HTTPS gratuito e distribuição global de arquivos.

6.1 O Checklist Final do Git no Codespaces

Antes de decolar um foguete, os engenheiros conferem todos os instrumentos no painel de controle. No desenvolvimento de software, fazemos exatamente o mesmo com o Git.

O serviço de nuvem que utilizaremos para o deploy precisará ler o seu código-fonte diretamente do seu repositório no GitHub. Por isso, a regra número um é: todo o seu trabalho local no Codespaces deve estar salvo e sincronizado na nuvem.

Abra o terminal integrado do GitHub Codespaces e execute o comando de inspeção:

git status

Analise a saída do terminal:

  • Cenário Ideal: Se o terminal exibir nothing to commit, working tree clean (nada a comitar, árvore de trabalho limpa), significa que você realizou os commits corretamente nos capítulos anteriores e está pronto para prosseguir!
  • Se houver arquivos pendentes: Caso apareçam arquivos modificados ou novos em vermelho ou verde, execute imediatamente o ciclo de sincronização:
git add .
git commit -m "fix: inclui alterações pendentes antes do deploy"
git push

Para conferir, abra uma nova aba no seu navegador, acesse o endereço do seu repositório no GitHub (https://github.com/seu-usuario/ted-system-site) e confira se todas as pastas (src/, public/images/ contendo os quatro arquivos) e os arquivos mais recentes estão visíveis lá.

6.2 O que é Deploy e Deploy Contínuo (CI/CD sem mistérios)?

No vocabulário da tecnologia, a palavra Deploy (ou implantação) significa o ato de pegar o código que você escreveu e colocá-lo para rodar em um servidor web real, tornando-o acessível a qualquer pessoa através de uma URL pública.

Mas como isso funciona com o Astro?

6.2.1 O processo de Build

Durante o desenvolvimento no Codespaces, o comando npm run dev mantém um servidor local rápido para você visualizar suas alterações em tempo real. No entanto, para colocar o site em produção, não rodamos esse servidor de desenvolvimento.

Em vez disso, nós executamos o processo de compilação (Build):

npm run build

Quando esse comando roda, o compilador do Astro analisa cada componente .astro, resolve as importações, processa os layouts com a tag <slot /> e transforma tudo em uma pasta de puro HTML estático, CSS otimizado e imagens (por padrão, gerados dentro da pasta dist/).

6.2.2 O que é Deploy Contínuo (Continuous Deployment)?

Antigamente, para publicar um site na internet, os desenvolvedores precisavam gerar os arquivos no seu computador e transferi-los manualmente, arquivo por arquivo, através de programas de FTP lentos e suscetíveis a falhas.

Hoje, nós utilizamos o conceito de Deploy Contínuo (parte das práticas modernas de CI/CD — Continuous Integration / Continuous Deployment):

┌─────────────────┐       git push       ┌──────────────────┐
│ GitHub          │ ───────────────────> │ Repositório no   │
│ Codespaces      │                      │ GitHub           │
└─────────────────┘                      └──────────────────┘
                                                   │
                                                   │ Notificação automática
                                                   ▼
┌─────────────────┐   Distribuição CDN   ┌──────────────────┐
│ Visitante no    │ <─────────────────── │ Cloudflare       │
│ Mundo Real      │  (URL .pages.dev)    │ Pages (Build)    │
└─────────────────┘                      └──────────────────┘

Você conecta o seu repositório do GitHub ao provedor de nuvem. Toda vez que você executar um git push no Codespaces, a nuvem detecta o envio, baixa seu código, executa o npm run build nos servidores dela e substitui a versão antiga pela nova em menos de um minuto, de forma automática!

6.3 Por que a Cloudflare Pages?

Para hospedar o site da TED System, escolhemos a Cloudflare Pages.

A Cloudflare mantém uma rede de servidores espalhados pelo mundo, chamada CDN (rede de distribuição de conteúdo), que entrega os arquivos de cada site a partir do servidor mais próximo de quem o acessa.

O serviço Cloudflare Pages oferece as seguintes vantagens para a hospedagem do nosso site:

  • Plano gratuito: não exige cartão de crédito para começar; os limites do plano, como o número de builds por mês, estão na página de limites;
  • Entrega pela rede da Cloudflare: os arquivos do site são copiados para servidores em vários países, e cada visitante recebe as páginas do servidor mais próximo;
  • Segurança com Certificado SSL (HTTPS): Seu site ganha automaticamente o cadeado de segurança verde no navegador;
  • Integração Nativa com o Astro: O Cloudflare reconhece projetos Astro e configura quase tudo sozinho.

6.4 Conectando o Repositório no Cloudflare Pages

Vamos dar o passo a passo para conectar o seu repositório do GitHub à Cloudflare.

6.4.1 Criando ou acessando sua conta

  1. No seu navegador, acesse o site oficial: cloudflare.com/products/pages.
  2. Se você ainda não possui uma conta, clique em Sign Up (Cadastre-se) e crie sua conta gratuita informando seu e-mail e uma senha segura.
  3. Se já possui conta, clique em Log In e entre no seu painel de controle.

6.4.3 Autorizando o acesso ao GitHub

  1. A Cloudflare solicitará autorização para se conectar à sua conta do GitHub. Clique no botão Connect GitHub.
  2. Uma janela pop-up do GitHub será aberta. Você pode conceder acesso a todos os seus repositórios ou apenas ao repositório específico da TED System (ted-system-site).
  3. Após confirmar a autorização no GitHub, retorne à tela da Cloudflare.
  4. Na lista de repositórios disponíveis, selecione o repositório ted-system-site e clique no botão Begin setup (Iniciar configuração) no rodapé da página.
Interface Deploy a site from your account com a conta do GitHub conectada e o repositório ted-system-site marcado.
Figura 6.4: Lista de repositórios com o projeto selecionado para deploy.

6.5 Configuração do Build do Astro

Agora estamos na tela mais importante do processo: a tela Set up builds and deployments (Configurar builds e deploys).

Observe os campos apresentados na tela:

  • Project name (Nome do projeto): apague o texto original e digite um nome com o seu nome no fim, como tedsystem-seunome. Esse nome forma o endereço do site (tedsystem-seunome.pages.dev) e não pode ser mudado depois. Se ele já estiver em uso, a Cloudflare acrescenta alguns caracteres ao endereço; o endereço final aparece na tela de confirmação, ao fim do deploy.
  • Production branch (Branch de produção): Mantenha main (a branch principal onde enviamos nossos commits via Git).
  • Framework preset (Predefinição de framework): Este é o campo mais importante: clique na lista suspensa e selecione Astro.
Tela Set up builds and deployments mostrando os campos Project name, Production branch e as configurações de build para o Astro.
Figura 6.5: Configuração final informando o framework Astro e os comandos automáticos.

Ao selecionar Astro, a Cloudflare preenche automaticamente os campos de comando e diretório de saída:

Campo Valor Automático O que significa?
Build command npm run build O comando que a Cloudflare executará na nuvem para compilar o projeto Astro.
Build output directory dist A pasta onde o Astro deposita os arquivos finais gerados (HTML, CSS e imagens).

Os campos desta tela estão descritos no guia de publicação do Astro na Cloudflare Pages e na documentação do Astro.

Clique no botão azul Save and Deploy (Salvar e implantar).

6.6 O Primeiro Deploy

Assim que você clica em salvar, a Cloudflare inicia a construção da sua aplicação em tempo real. Uma tela de terminal com logs ao vivo será exibida.

Acompanhe as etapas que a Cloudflare executa:

  1. Cloning repository: A Cloudflare baixa uma cópia exata do seu repositório do GitHub;
  2. Installing dependencies: O gerenciador de pacotes executa npm install para preparar o Astro;
  3. Building application: O comando npm run build é disparado. O Astro gera as páginas estáticas;
  4. Deploying to Cloudflare’s global network: Os arquivos da pasta dist/ são copiados para a rede da Cloudflare.

Quando o processo terminar, a tela mostra a mensagem Success! Your project is deployed to Region: Earth e o endereço do site:

Mensagem de sucesso indicando que o projeto foi hospedado globalmente e está pronto para visualização.
Figura 6.6: Confirmação do primeiro deploy com a URL pública gerada.

6.7 Testando e Compartilhando

Clique no link público que a Cloudflare acabou de gerar.

O site está publicado.

Navegue por cada página:

  • Acesse a Home e confira o cabeçalho com o logotipo da TED System;
  • Clique em Sobre e confira se a página abre;
  • Acesse a página Equipe e verifique os cartões com as fotos oficiais de Wanderson, Sheldon e Amy alinhadas e com recorte circular, confirmando que os arquivos estáticos de public/images/ foram publicados;
  • Acesse Contato e visualize as informações de endereço e telefone da empresa;
  • Repare no cadeado de segurança na barra de endereços do seu navegador (https:// com SSL ativo).
Quatro capturas de tela das páginas inicial, sobre, equipe e contato da TED System visualizadas em um desktop.
Figura 6.7: O site publicado sendo testado nas telas de um navegador de computador.

6.7.1 O teste no smartphone

Abra o navegador do celular e digite o endereço do seu site (terminado em pages.dev).

Repare que o menu fica abaixo do logo e que o conteúdo se ajusta à largura da tela, como definido no capítulo 5.

As quatro páginas do site publicado na tela de um celular.
Figura 6.8: As quatro páginas do site publicado na tela de um celular.
DicaCompartilhe o endereço

Copie o endereço público do seu site e envie ao professor ou à turma. Se quiser, coloque-o no seu perfil do GitHub ou do LinkedIn.

6.8 A Automação em Ação: O Ciclo do Deploy Contínuo

Com o repositório conectado, as próximas publicações acontecem sozinhas.

ImportanteA partir de agora, o deploy é automático!

Para publicar as próximas atualizações deste site, você não precisa voltar ao painel da Cloudflare. Quando um git push termina, o GitHub avisa a Cloudflare, que faz um novo build e publica a nova versão em poucos minutos.

Para ver o processo funcionando, faça um pequeno teste: acrescente uma frase de boas-vindas à página inicial e envie a alteração para o GitHub.

Abra o arquivo src/pages/index.astro no Codespaces e substitua todo o conteúdo por:

src/pages/index.astro
---
import LayoutBase from '../layouts/LayoutBase.astro';
import Cartao from '../components/Cartao.astro';
import { empresa } from '../data/empresa.js';
---

<LayoutBase 
	titulo="Início" 
	descricao={`Bem-vindo à ${empresa.nome}. ${empresa.slogan}`}
>
	<section class="hero">
		<div class="container">
			<h1>{empresa.slogan}</h1>
			<p class="hero-descricao">Boas-vindas ao site da {empresa.nome}.</p>
			<p class="hero-descricao">{empresa.missao}</p>
			<a href="/contato" class="btn">Fale Conosco</a>
		</div>
	</section>

	<section class="publico secao secao-alt">
		<div class="container">
			<h2>Quem Atendemos</h2>
			<Cartao>
				<p class="texto-publico">{empresa.publicoAlvo}</p>
			</Cartao>
		</div>
	</section>
</LayoutBase>

<style>
	.hero {
		background: var(--degrade-hero);
		color: var(--cor-texto-invertido);
		padding: 6rem 0;
	}

	.hero h1 {
		color: var(--cor-texto-invertido);
		font-size: 3rem;
		margin-bottom: 1.5rem;
		line-height: 1.1;
		max-width: 800px;
	}

	.hero-descricao {
		font-size: 1.25rem;
		max-width: 700px;
		margin-bottom: 2rem;
		color: var(--cor-texto-invertido-suave);
	}

	.publico h2 {
		margin-bottom: 2rem;
	}

	.texto-publico {
		margin-bottom: 0;
		font-size: 1.125rem;
		color: var(--cor-texto-secundario);
	}
</style>

Pressione Ctrl+S (ou Cmd+S no Mac) para salvar.

A única mudança é a linha <p class="hero-descricao">Boas-vindas ao site da {empresa.nome}.</p>, logo abaixo do título. Ela usa a classe hero-descricao, que já tem estilo, e a expressão {empresa.nome}, que insere o nome da empresa guardado no empresa.js (expressões no Astro).

No terminal do Codespaces, envie a alteração para o GitHub:

git add .
git commit -m "feat: adiciona frase de boas-vindas na página inicial"
git push

Aguarde o fim do novo deploy, recarregue a página pública no navegador (Ctrl + F5) e confira a frase de boas-vindas logo abaixo do título da página inicial.

6.9 Desafio de Fixação: Adaptando para a Sua Própria Empresa

Agora que seu site está publicado e os deploys são automáticos, que tal transformar este projeto no site da SUA empresa ou do seu próprio portfólio?

Graças à arquitetura de dados centralizada e uso de variáveis CSS globais que implementamos, adaptar o site não exige alterar as páginas: basta mudar três lugares.

Siga este roteiro de personalização:

  1. Dados da Empresa (src/data/empresa.js): Altere o nome, o slogan e as informações de contato. O cabeçalho, rodapé e as páginas se atualizarão automaticamente para refletir as novas informações.
  2. Identidade Visual (src/styles/global.css): Mude os valores hexadecimais em :root. Troque a --cor-secundaria para a cor da sua nova marca e observe os botões, links e destaques mudarem de cor. Escolha uma cor escura o bastante para que o texto continue legível sobre o fundo branco.
  3. Imagens (public/images/): Exclua as imagens antigas e coloque as suas próprias imagens em public/images/ (para as fotos da equipe, dê preferência a fotos quadradas, por exemplo, de 280x280 pixels). Se você usar nomes de arquivo diferentes, basta atualizar os caminhos indicados no seu src/data/empresa.js. Atenção: o servidor diferencia maiúsculas de minúsculas. Se o arquivo se chama foto.PNG, o caminho no empresa.js precisa ser foto.PNG, e não foto.png.

Após finalizar a customização, faça o git add ., git commit e git push e confira as mudanças no endereço do seu site.

6.10 Parabéns pela Jornada!

Chegamos ao final deste livro.

Partindo de um laboratório de informática comum, você praticou um fluxo de trabalho usado no mercado:

  • Programou inteiramente na nuvem com o GitHub Codespaces;
  • Construiu um site estático com o Astro;
  • Criou as páginas do site com as rotas por arquivo da pasta src/pages/;
  • Aplicou boas práticas de engenharia de software eliminando a repetição de código, criando componentes modulares e layouts reaproveitáveis com <slot />;
  • Estilizou o site com estilos globais e estilos com escopo e organizou as imagens em public/images/;
  • Integrou controle de versão com Git e GitHub;
  • Publicou o site na Cloudflare Pages com deploy contínuo.

O site da TED System está publicado, com código simples e sem dependências além do Astro.

Utilize esse mesmo método para criar os sites dos seus próximos projetos acadêmicos, os sistemas das empresas da sua região e o seu próprio portfólio de desenvolvedor.

O desenvolvimento web muda rápido: consulte sempre a documentação oficial das ferramentas que usar. Bons estudos!