Vuejs: hospedando um aplicativo SPA na AWS S3
Published: 2021-03-01 18:32:58

![Vuejs + AWS S3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngsof20d6kdhpiyitxh9.png)

É 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](https://aws.amazon.com/pt/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc) 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](https://aws.amazon.com/pt/console/) e crie um novo bucket para o serviço S3.

![Criar Bucket S3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dp3theuwhsvfn47waet0.JPG)
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**.
![AWS S3 Configuração do Bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tiw2ce2n9h1ygttiilcs.JPG)

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.
![AWS S3 Site estático](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bazefemoo4kdsdxa068.JPG)

**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.
![AWS S3 Site estático url](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eaoiywvdwzyhfyv05rps.JPG)

Precisamos ainda definir a política de bucket na aba de **Permissões**.
![AWS S3 Site estático permissões](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ju0k7v55gap8maav6z2c.JPG)
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/](http://dev-to-bucket-example.s3-website.us-east-2.amazonaws.com/)