Deploy de uma aplicação Vue.js no S3 da AWS

Este passo a passo mostra como empacotar um projeto Vue 3 com Vite e publicá-lo em um bucket S3 estático protegido por CloudFront e HTTPS.

1. Preparando o build

npm install
npm run build

O comando gera a pasta dist/. Inclua um arquivo dist/_redirects se usa roteamento history do Vue Router (ex.: /* /index.html 200).

2. Criando o bucket S3

1. Abra o console da AWS → S3 → Create bucket.
2. Use um nome global (blog-ennio-vue) e selecione a região mais próxima do público.
3. Desmarque Block all public access e aceite o aviso.
4. Em Properties, ative Static website hosting apontando index.html e error.html.
5. Anote a URL do endpoint (ex.: http://blog-ennio-vue.s3-website-us-east-1.amazonaws.com).

3. Subindo arquivos com AWS CLI

aws s3 sync dist/ s3://blog-ennio-vue --delete --cache-control max-age=31536000,public
aws s3 cp dist/index.html s3://blog-ennio-vue/index.html --cache-control max-age=60,public

A primeira linha publica assets com cache longo, enquanto a segunda força um cache curto para o HTML.

4. Protegendo com CloudFront + HTTPS

1. Crie uma distribuição CloudFront usando o endpoint do bucket como Origin.
2. Marque Redirect HTTP to HTTPS.
3. Em Cache Policy, use CachingOptimized e inclua Accept-Encoding.
4. Vincule um certificado do ACM gerado para o domínio desejado (app.ennio.com.br).
5. Aponte o CNAME no Route 53 (ou DNS preferido) para o domínio da distribuição.

5. Deploy contínuo com GitHub Actions

Adicione .github/workflows/deploy.yml ao repositório:

name: Deploy Vue to S3
on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: jakejarvis/[email protected]
        with:
          args: --delete
        env:
          AWS_S3_BUCKET: blog-ennio-vue
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          SOURCE_DIR: dist

Guarde as credenciais como secrets e restringa-as a um usuário IAM com política AmazonS3FullAccess apenas para o bucket escolhido.

6. Checklist de troubleshooting

• 404 ao atualizar a página? Confirme o arquivo _redirects ou crie uma regra de Custom Error Response no CloudFront apontando para /index.html.
• Assets antigos? Invalide o cache em CloudFront → Invalidations.
• MIME incorreto? Certifique-se de que a CLI esteja enviando com o header correto (--content-type).

Com esse fluxo o deploy leva segundos e você mantém a infraestrutura com custo próximo de zero enquanto entrega um SPA com HTTPS e CDN global.