Vuejs: hospedando um aplicativo SPA na AWS S3

É natural que em algum momento no desenvolvimento do nosso software, seja necessário publica-lo online, seja para alguns tipos de testes ou até mesmo para apresentação.

Um recurso que muitos desenvolvedores front end's não aproveitam é a capacidade de hospedar sites estáticos de forma gratuita usando o serviço S3 da Amazon Web Services.

Supondo que já construímos nosso aplicativo e geramos o build, acesse o console na aws e crie um novo bucket para o serviço S3.

Clique em criar bucket e siga o modelo abaixo:

Configuração geral

• Nome do bucket: Escolha um nome pro seu bucket. Ex.: meu-primeiro-bucket. Você também pode referenciar um domínio para esse bucket através do serviço Route 53 usando o próprio domínio como nome do bucket. Ex.: meudominio.com.br
• Região: Aqui como exemplo, vou manter Lest dos EUA (Ohio) us-east-2

Configurações de bucket para Bloquear acesso público

Atenção! Para que o conteúdo fique aberto aos nossos visitantes, DESMARQUE a primeira opção "Bloquear todo o acesso público" e em seguida, MARQUE a opção "Reconheço que as configurações atuais podem fazer com que este bucket e os objetos dentro dele se tornem públicos."

Nas demais configurações solicitadas, mantenha o padrão sugerido.

Após criar, você será redirecionado para a listagem de buckets existente. Clique no link do bucket recém criado e no menu de opções do bucket, clique em Propriedades.

Ao final da página, procure pela opção Hospedagem de site estático e clique no botão Editar. Siga as seguintes configurações abaixo e depois salve as alterações.

OBS.: Estamos enviando um aplicativo SPA. Nesse caso, recomendo definir o Documento de erro como index.html também.

Agora na opção Hospedagem de site estático você tem o link de acesso público ao seu bucket.

Precisamos ainda definir a política de bucket na aba de Permissões.

Encontre a opção Política do bucket e clique em Editar. Será necessário adicionar um JSON para definir as regras.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::dev-to-bucket-example/*"
            ]
        }
    ]
}

Lembre-se de alterar o nome do bucket de exemplo dev-to-bucket-example para o seu.

Tudo quase pronto até agora! Vamos enviar os arquivos gerados no nosso build para dentro do bucket. Na listagem dos buckets, entre no recém criado, clique em carregar e depois Adicionar arquivos.

Depois que enviar todos arquivos necessários, acesse seu bucket através do endereço fornecido. No meu exemplo: http://dev-to-bucket-example.s3-website.us-east-2.amazonaws.com/