Aqui vai um guia com o passo a passo de como fazer o deploy de uma aplicação Vue.js no S3 da AWS. Decidi escrever este guia pois, como minha memória não é lá essas coisas, sei que vou esquecer tudo isso no dia seguinte, de quebra também estou disponibilizando este conteúdo para que possa ajudar os amigos Devs que estejam passando pela mesma situação.
Para isso separei os seguintes passos:
- Criando o Bucket no S3
- Criando uma política no IAM
- Adicionando um usuário e anexando a política
- Configurando perfil de acesso via aws-cli
- Enviando a aplicação para o S3
Estou considarando que você já tenha uma aplicação feita em Vue.js e possui o build desse projeto (geralmente a pastinha dist/).
Criando o Bucket no S3
Partindo do AWS Management Console vá até o servico S3 e crie um novo Bucket.
Em configuração geral dê um nome para seu bucket e escolha uma regiao.
Na caixa “Configurações de intervalo para bloquear o acesso público” desmarque todas as opcões e confirme o aviso que aparecerá “Reconheço que as configurações atuais podem resultar nesse depósito e nos objetos se tornarem públicos.“
Feito isso clique em Criar bucket.
Agora clique no Bucket criado e vá até a aba “propriedades” e escolha a opção “Static website hosting”. Nesse ponto você pode definir qual o arquivo de entrada de sua aplicação, que no meu caso é index.html, adicione este nome em “Index document:” e “Error document”.
Logo acima existe um link http, ele é o endpoint que chamará sua aplicação, agora clique em Save.
Agora precisamos criar uma política de bucket que conceda acesso público ao conteúdo do nosso bucket, então vá até a aba “permissions” e clique em “Bucket Policy”, cole aqui o json abaixo substituindo o “BUCKET_NAME” pelo nome que você deu a esse bucket:
{
"Version":"2012-10-17",
"Statement":[{
"Sid":"PublicReadGetObject",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::BUCKET_NAME/*"
]
}
]
}
Clique em Save.
Agora você verá que o Bucket estará exibindo um aviso de que está publico, maravilha, é isso que queremos.
Criando uma política no IAM
Eventualmente precisaremos sincronizar os arquivos do nosso projeto apartir de nosso computador local ou alguma ferramente de automação de deploy, para isso criaremos uma política e um usuário no IAM (Identity and Access Management).
Vá para o console da AWS, navegue para o IAM
No menu do lado esquerdo, navegue para “Policies”. Vamos precisar de uma política de leitura e gravação no bucket S3 que acabamos de criar. Na página de políticas, clique em “Create policy”.
Em seguida, clique na guia JSON, você pode copiar e colar no JSON a seguir substituindo BUCKET_NAME pelo nome do seu Bucket.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "VisualEditor0",
"Effect": "Allow",
"Action": [
"s3:PutObject",
"s3:GetObject",
"s3:ListBucket",
"s3:DeleteObject",
"s3:GetBucketPolicy"
],
"Resource": [
"arn:aws:s3:::BUCKET_NAME",
"arn:aws:s3:::BUCKET_NAME/*"
]
}
]
}Clique em “Review Policy” e então poderá dar um nome para ela, no meu exemplo ficou “S3-sync-projeto-vuejs”, feito isso clique em “Create policy”.
Adicionando um usuário e anexando a política
Em seguida, criaremos um usuário do IAM e anexaremos essa política ao seu conjunto de permissões. Usaremos as credenciais deste usuário em nosso terminal depois através do aws-cli. No menu do lado esquerdo, clique em Usuários. Em seguida, clique em Adicionar usuário.
Escolha um nome para seu usuário e marque a caixa Tipo de acesso para “Programmatic access”. Clique em “Next: Permissions”. Aqui, adicionaremos a política que criamos anteriormente. Clique na opção para “Attach existing policies directly”.
Aqui, você escolhe quais políticas (permissões) que deseja dar ao seu usuário. Você pode filtrar políticas para mostrar apenas políticas gerenciadas pelo cliente, isso facilitará a localização da que acabamos de criar. Encontre essa política na lista e marque a caixa ao lado.
Clique em Next: Tags. Não precisamos fazer nada aqui.
Clique em “Next: Review”
Clique em “Criar usuário” para finalizar.
Você verá o usuário recém-criado, juntamente com um Access key ID e uma Secret access key. Anote esses dados pois você precisará deles para configurar em sua maquina via aws-cli.
Configurando perfil de acesso via aws-cli
Vamos retornar à linha de comando para usar aws-cli e garantir que tenhamos acesso ao nosso bucket S3.
Para esta etapa, você precisará verificar se você tem o aws-cli instalado em sua máquina local, siga esse link pois lá encontrará a forma correta de instalar para cada sistema operacional.
Tendo o aws-cli instalado rode o comando:
aws configure --profile vue-deployer
Nomeamos nosso perfil como vue-deployer, apenas para ser consistente com o usuário do IAM que criamos, mas você pode escolher qualquer nome de perfil que desejar. A propósito, a execução aws configure configura credenciais em um arquivo que pode ser encontrado em ~/.aws/credentials.
Aqui serão solicitados alguns dados, basicamente a access key id e secret access key do usuário que você criou (lembra que pedi para você anotar?) e também a região do seu bucket (por exemplo “us-west-2”).
AWS Access Key ID [************]: ACCESS KEY ID Secret Access Key [************]: SECRET ACCESS KEY
Default region name [None]: us-west-2 REGIÃO DO SEU BUCKET
Default output format [None]: None
Enviando a aplicação para o S3
Com nosso perfil configurado, agora podemos acessar nosso bucket pela linha de comando e então fazer o deploy de nossa aplicação Vue.js no S3 da AWS, (substitua BUCKET-NAME pelo nome do seu bucket):
aws --region us-west-2 --profile vue-deployer s3 ls s3://BUCKET_NAME
No comando acima nós definimos nossa região –region us-west-2 e definimos o perfil com o qual vamos usar –profile vue-deployer. Isso indicará ao aws-cli para fazer referência ao Access key ID e Secret access key do perfil vue-deployer que configuramos mais acima. Em seguida, queremos executar o comando ls em nosso bucket S3, apenas para teste. Os comandos nos buckets S3, são sempre referenciados com o S3Uri, que é basicamente s3:// seguido pelo nome do seu bucket.
Rodando o comando ls nada deve aconter já qua ainda nâo temos nada em nosso S3, isso significa que nosso usuário e política do IAM foram configurados corretamente e nossas credenciais de perfil no aws-cli também.
Agora só precisamos fazer o sync da nossa aplicação Vue.js no S3 da AWS, então rode o seguinte comando:
aws --region us-west-2 --profile vue-deployer s3 sync ./dist s3://BUCKET-NAME --delete
Aqui utilizamos o comando sync e informamos o diretório onde estão os arquivos que no meu caso é dist/, depois passamos o caminho do nosso S3 seguido do camando --delete que por sua vez irá deletar do S3 aqueles arquivos que não estão presentes em nosso build local em dist/.
Desse modo você verá uma lista de arquivos que estão sendo enviados para seu bucket no S3.
Vamos fazer algumas verificações manuais para garantir que tudo funcionou como deveria. Primeiro, acesse o console da AWS e navegue para o S3. Encontre o bucket que você criou e clique nele. Já não deve estar vazio. Em vez disso, deve parecer um espelho do que você tem na sua pasta dist/.
Em seguida, clique na guia Propriedades do bucket S3. Clique no painel para “Static website hostingStatic website hosting”. Na parte superior, há uma URL para o bucket. Ao colar esse URL no seu navegador, você verá seu aplicativo Vue.js exibido por meio do seu bucket S3.
Pronto meu amigo, se tudo foi bem até aqui você conseguiu fazer seu deploy do Vue.js no S3 da AWS
Provelmente sua aplicação seja uma SPA e você logo sentirá falta de um SSL na sua url, e para isso você precisará configurar sua aplicação através do servico da AWS CloudFront já que o S3 não dispõe diretamente dessa funcionalidade de SSL. Vou dividir essa parte do SSL em um novo post para não estender muito por aqui. Assim que eu escrever posto o por link aqui.
Espero ter ajudado.
Fontes.
https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html
https://docs.aws.amazon.com/IAM/latest/UserGuide/introduction.html
https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html
https://levelup.gitconnected.com/deploying-vue-js-to-aws-with-https-and-a-custom-domain-name-3ae1f79fe188