Faça Deploy do seu Site Astro na AWS

AWS é uma plataforma de hospedagem de aplicações web completa que pode ser utilizada para fazer o deploy de um site Astro.

Para fazer deploy do seu projeto na AWS será necessário a utilização do console AWS. (A maioria dessas ações também pode ser feitas usando o AWS CLI). Este guia irá lhe mostrar o passo a passo para fazer deploy do seu site na AWS utilizando o AWS Amplify, hospedagem de websites estáticos com S3, e CloudFront.

AWS Amplify

AWS Amplify é um conjunto de ferramentas e funcionalidades especialmente concebidas para que programadores front-end web e mobile construam aplicações completas na AWS de forma rápida e fácil.

Crie um novo projeto na Amplify Hosting.
Conecte seu repositório ao Amplify.

Modifique as configurações de compilação para corresponder ao processo de compilação do seu projeto.

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: /dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm i -g pnpm
        - pnpm config set store-dir .pnpm-store
        - pnpm i
    build:
      commands:
        - pnpm run build
  artifacts:
    baseDirectory: /dist
    files:
      - '**/*'
  cache:
    paths:
      - .pnpm-store/**/*

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn build
  artifacts:
    baseDirectory: /dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

O Amplify irá fazer deploy do seu site automaticamente e o atualizará quando você enviar um commit no seu repositório.

Hospedagem de websites estáticos com S3

S3 é o ponto de partida para qualquer aplicação. É onde os arquivos do seu projeto e outros assets são armazenados. O S3 cobra por arquivos armazenados e por número de requisições. Você pode encontrar mais informações sobre o S3 na documentação da AWS.

Crie um S3 bucket com o nome do seu projeto.

O nome do bucket deve ser único globalmente. Nós recomendamos uma combinação do nome do seu projeto e o nome do domínio do seu site.
Desabilite “Bloquear todo o acesso público”. Por padrão, a AWS define todos os buckets como privados. Para torná-lo público, você deve desmarcar a opção “Bloquear todo o acesso público” nas propriedades do seu bucket.
Faça upload dos arquivos gerados na build localizados em dist para o S3. Você pode fazer isso manualmente no console ou usando o AWS CLI. Se você usar o AWS CLI, você pode usar o seguinte comando após autenticar-se com suas credenciais da AWS:
```
aws s3 cp dist/ s3://<BUCKET_NAME>/ --recursive
```

Atualize a política do seu bucket para permitir o acesso público. Você pode encontrar esta configuração em Permissões > Política do bucket.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::<BUCKET_NAME>/*"
    }
  ]
}

Habilite a hospedagem de websites para o seu bucket. Você pode encontrar esta configuração em Propriedades > Hospedagem de site estático. Defina seu documento de índice para index.html e seu documento de erro para 404.html. Por fim, você pode encontrar a URL do seu site em Propriedades > Hospedagem de site estático.

Se você estiver fazendo deploy de uma aplicação de página única (Single-Page application - SPA), defina seu documento de erro para index.html.

S3 com CloudFront

CloudFront é um serviço web que oferece capacidades de uma rede de distribuição de conteúdo (Content Delivery Network - CDN). Ele é utilizado para armazenar o conteúdo de um servidor web e distribuí-lo aos usuários finais. O CloudFront cobra por quantidade de dados transferidos. Adicionar o CloudFront ao seu S3 bucket é mais econômico e proporciona uma entrega mais rápida.

Para conectar o S3 ao CloudFront, crie uma distribuição do CloudFront com os seguintes valores:

Origin domain: O endpoint do site estático do seu bucket S3. Você pode encontrar seu endpoint em Propriedades > Hospedagem de site estático. Alternativamente, você pode selecionar seu bucket S3 e clicar no balão de chamada para substituir o endereço do seu bucket pelo endpoint estático do seu bucket.
Viewer protocol policy: “Redirect HTTP to HTTPS”

Essa configuração servirá seu site usando a rede CDN do CloudFront. Você pode encontrar a URL da distribuição do CloudFront em Distributions > Domain name no bucket.

Entrega contínua com GitHub Actions

Existem várias maneiras de configurar a Entrega contínua para a AWS. Uma possibilidade para o código hospedado no GitHub é usar GitHub Actions para fazer deploy de seu site toda vez que você enviar um commit.

Crie uma nova política em sua conta da AWS usando IAM com as seguintes permissões. Essa política permitirá que você faça upload de arquivos compilados para o seu bucket S3 e invalide os arquivos de distribuição do CloudFront quando enviar um commit.

{
  "Version": "2012-10-17",
  "Statement": [
      {
          "Sid": "VisualEditor0",
          "Effect": "Allow",
          "Action": [
              "s3:PutObject",
              "s3:ListBucket",
              "s3:DeleteObject",
              "cloudfront:CreateInvalidation"
          ],
          "Resource": [
              "<DISTRIBUTION_ARN>",
              "arn:aws:s3:::<BUCKET_NAME>/*",
              "arn:aws:s3:::<BUCKET_NAME>"
          ]
      }
  ]
}

Crie um novo usuário IAM e anexe a política ao usuário. Isso fornecerá sua AWS_SECRET_ACCESS_KEY e AWS_ACCESS_KEY_ID.

Adicione este modelo de workflow ao seu repositório em .github/workflows/deploy.yml e envie-o para o GitHub. Você precisará adicionar AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, BUCKET_ID, e DISTRIBUTION_ID como “secrets” em seu repositório no GitHub em Settings > Secrets > Actions. Clique em New repository secret para adicioná-los.

name: Deploy Website

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1
      - name: Instalar módulos
        run: npm ci
      - name: Gerar build da aplicação
        run: npm run build
      - name: Deploy para o S3
        run: aws s3 sync --delete ./dist/ s3://${{ secrets.BUCKET_ID }}
      - name: Criar invalidação no Cloudfront
        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"