Vuejs: AWS S3에서 SPA를 사용할 수 있음

É 자연적인 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 a presentação.

Um recurso que muitos desenvolvedores front end's não aproveitam é a capacidade de hospedar sites estáticos de forma gratuita Amazon Web Services에서 S3 서비스를 사용합니다.

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:

일반 구성

Nome do 버킷: Escolha um nome pro seu 버킷. 예: 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. 예: meudominio.com.br

위치: Aqui como exemplo, vou manter Lest dos EUA(Ohio) us-east-2

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

아텐상! 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.

그러나 목록이 존재하는 버킷 목록을 다시 수정해야 합니다. Clique no link do bucket recém criado e no menu de opções do bucket, clique em Propriedades.


Ao 최종 페이지, procur 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는 정치권을 정의할 수 있습니다.

Encontre a opção Política do bucket e clique em Editar. 추가로 JSON을 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 example dev-to-bucket-example para o seu.

Tudo quase pronto até agora! Vamos enviar os arquivos gerados no nosso build para dentro do 버킷. 목록에 있는 목록은 양동이에 없고, 정국이 없으며, 파벌과 관리와 보증금이 있습니다.

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