Do desenvolvimento local à produção: deploy de aplicações TypeScript em 2024

Treinador Online de Python para Iniciantes

Aprenda Python facilmente sem sobrecarga teórica. Resolva tarefas práticas com verificação automática e escreva código diretamente no navegador.

Start Course

Seu código TypeScript está pronto para conquistar o mundo? Hora de enviá-lo para produção

\n\n

Você escreveu a aplicação TypeScript perfeita. Localmente tudo voa, os tipos são rigorosos, o código é bonito. Mas quando surge a pergunta "E como faço para rodar isso no servidor?", muitos desenvolvedores ficam perdidos. Familiar?

\n\n

O deploy de aplicações TypeScript não é rocket science, mas também não é "só copiar a pasta". Neste artigo, vamos abordar três abordagens principais: o clássico VPS, o moderno Docker e as plataformas em nuvem. Você aprenderá como compilar corretamente um projeto TypeScript, configurar o ambiente e automatizar a implantação de atualizações. Vamos lá!

\n\n

Passo 1: Preparando a aplicação TypeScript para deploy

\n\n

Antes de pensar em servidores, é preciso garantir que sua aplicação esteja pronta para funcionar fora do ambiente local. TypeScript é uma camada adicional que é compilada para JavaScript. No servidor, o Node.js não entende arquivos .ts diretamente (a menos que você use ts-node, o que não é recomendado para produção).

\n\n

Compilação do projeto

\n\n

Certifique-se de que os scripts corretos estão definidos no seu package.json:

\n\n
{\n  "scripts": {\n    "build": "tsc",\n    "start": "node dist/index.js",\n    "dev": "ts-node-dev --respawn src/index.ts"\n  },\n  "main": "dist/index.js"\n}
\n\n

O comando npm run build criará a pasta dist com o código JS pronto. É essa pasta que faremos o deploy.

\n\n

Dica: adicione "outDir": "./dist" no tsconfig.json e configure o exclude para node_modules:

\n\n
{\n  "compilerOptions": {\n    "outDir": "./dist",\n    "rootDir": "./src",\n    "target": "ES2020",\n    "module": "commonjs",\n    "strict": true,\n    "esModuleInterop": true\n  },\n  "include": ["src/**/*"],\n  "exclude": ["node_modules", "dist"]\n}
\n\n

Método 1: VPS clássico — controle total

\n\n

VPS (Virtual Private Server) é um servidor alugado onde você é o rei e o senhor. Adequado para projetos que exigem controle total sobre o ambiente. Vamos abordar o deploy no Ubuntu 22.04.

\n\n

Configuração do servidor

\n\n
    \n
  • Conecte-se via SSH: ssh root@seu_IP
  • \n
  • Atualize os pacotes: apt update && apt upgrade -y
  • \n
  • Instale o Node.js 20.x: \n curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && apt install -y nodejs\n
  • \n
  • Instale o PM2 — gerenciador de processos para Node.js:\n npm install -g pm2\n
  • \n
\n\n

Deploy da aplicação

\n\n

A maneira mais simples é copiar os arquivos via SCP ou Git. Recomendo Git:

\n\n
git clone https://github.com/seu-repositorio/projeto.git /var/www/myapp\ncd /var/www/myapp\nnpm install\nnpm run build\npm2 start dist/index.js --name "myapp"\npm2 save\npm2 startup
\n\n

Importante: configure o Nginx como reverse proxy para que a aplicação fique acessível na porta 80:

\n\n
server {\n    listen 80;\n    server_name seu-dominio.com.br;\n\n    location / {\n        proxy_pass http://localhost:3000;\n        proxy_http_version 1.1;\n        proxy_set_header Upgrade $http_upgrade;\n        proxy_set_header Connection 'upgrade';\n        proxy_set_header Host $host;\n        proxy_cache_bypass $http_upgrade;\n    }\n}
\n\n

Não se esqueça de configurar o SSL via Certbot — é gratuito e obrigatório para a web moderna.

\n\n

Método 2: Docker — conteinerização para reprodutibilidade

\n\n

O Docker resolve o principal problema do VPS: "Na minha máquina funciona!". O contêiner contém tudo o que é necessário — Node.js, dependências, código compilado. O ambiente é idêntico em qualquer SO.

\n\n

Dockerfile para TypeScript

\n\n

Criamos uma compilação em múltiplos estágios (multi-stage build) — isso reduz a imagem final:

\n\n
# Estágio 1: compilação do TypeScript\nFROM node:20-alpine AS builder\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci\nCOPY . .\nRUN npm run build\n\n# Estágio 2: imagem de produção                

Blogs

Book Recommendations