(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[37],{1858:function(a,e,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/hospedandositeestatico",function(){return o(9073)}])},5201:function(a,e,o){"use strict";var s=o(5893);o(7294),e.Z=()=>(0,s.jsx)("section",{className:"colorlib-blog",style:{paddingBottom:"0px",paddingTop:"1em",textAlign:"center"},children:(0,s.jsx)("div",{className:"colorlib-narrow-content",children:(0,s.jsx)("a",{href:"/",children:"Voltar para a p\xe1gina inicial"})})})},9073:function(a,e,o){"use strict";o.r(e),o.d(e,{default:function(){return b}});var s=o(5893),i=o(2613),r=o(1314),n=o(708),t=o(5716),c=o(8509),d=o(6895),l=o(4643),m=o(3114),p=o(5871);o(7294);var u=()=>(0,s.jsx)("section",{className:"colorlib-blog","data-section":"paralelismo",children:(0,s.jsx)("div",{className:"colorlib-narrow-content",children:(0,s.jsx)("div",{className:"row",children:(0,s.jsxs)("div",{className:"col-md-12 col-md-offset-3 col-md-pull-3 animate-box","data-animate-effect":"fadeInLeft",children:[(0,s.jsx)("span",{className:"heading-meta",children:"Leitura"}),(0,s.jsx)("h2",{className:"colorlib-heading",children:"Hospedando Site Est\xe1tico (Parte: 1)"}),(0,s.jsx)("h5",{children:"Criado em 18/11/2023"}),(0,s.jsx)("p",{children:"Neste guia, vamos explorar como hospedar um site est\xe1tico de forma gratuita usando Amazon S3 e Cloudflare. Antes de come\xe7ar, \xe9 importante atender aos seguintes requisitos:"}),(0,s.jsxs)("ul",{children:[(0,s.jsx)("li",{children:"Dom\xednio registrado para o site: Atualmente, h\xe1 diversas op\xe7\xf5es de provedores para registrar dom\xednios, como Hostinger, Locaweb, HostGator, entre outros. Independente do provedor escolhido, \xe9 poss\xedvel realizar todas as configura\xe7\xf5es descritas neste tutorial. Infelizmente, o registro de dom\xednio \xe9 um dos poucos itens que normalmente n\xe3o s\xe3o gratuitos na maioria dos casos, mas os custos geralmente s\xe3o baixos e anuais."}),(0,s.jsx)("li",{children:"C\xf3digo fonte do site para hospedagem: Certifique-se de ter o c\xf3digo fonte do site que deseja hospedar."}),(0,s.jsxs)("li",{children:["Conta na AWS: Crie gratuitamente uma conta na AWS ",(0,s.jsx)("a",{href:"https://aws.amazon.com/pt/free/",target:"_blank",children:"(clique aqui)"}),". A cria\xe7\xe3o da conta na AWS n\xe3o \xe9 complicada, portanto n\xe3o inclu\xedmos essa etapa neste tutorial. Aproveite para explorar as ferramentas de nuvem oferecidas pela AWS gratuitamente. Consulte a documenta\xe7\xe3o oficial para ver a lista de recursos gratuitos por um ano e outros que s\xe3o gratuitos indefinidamente, com uma margem de uso amig\xe1vel. Para este tutorial, utilizaremos o S3."]}),(0,s.jsxs)("li",{children:["Conta no Cloudflare: Crie uma conta gratuitamente no Cloudflare ",(0,s.jsx)("a",{href:"https://dash.cloudflare.com/sign-up",target:"_blank",children:"(clique aqui)"}),". Tamb\xe9m n\xe3o h\xe1 segredos na cria\xe7\xe3o, por isso n\xe3o inclui nesta tutorial esta etapa, mas basicamente utilizaremos o Cloudflare para gerenciar o dns do nosso website, fazendo ponte entre o provedor de dom\xednio e o site que estar\xe1 hospedado no S3."]})]}),(0,s.jsx)("h4",{children:"1\xb0 Etapa: Publicando o site no S3"}),(0,s.jsx)("p",{children:"Primeiramente acesse a tela inicial do console na aws, clique no campo de pesquisa e busque por S3:"}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/1.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:'Ap\xf3s selecionado, ser\xe1 apresentado a tela inicial do S3, clique em "Criar bucket":'}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/2 - Criar bucket.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:"No campo nome do bucket, escreva o dom\xednio do seu site, no meu caso \xe9 quizfacil.com.br, preencha com o o nome do seu dom\xednio registrado no seu provedor, observa\xe7\xe3o, n\xe3o adicione o subdom\xednio ex (www), coloque somente o dom\xednio raiz como no exemplo:"}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/2.1 - Nomeando o bucket.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:"As demais configura\xe7\xf5es pode mander o padr\xe3o mesmo, ap\xf3s confirmar no bot\xe3o no final da p\xe1gina, o bucket ser\xe1 criado conforme o print a seguir, acesse o bucket clicando em cima do nome:"}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/2.2 - bucket criado.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:'Ap\xf3s clicar no nome, o painel do bucket ser\xe1 apresentado na aba de objetos, ainda n\xe3o h\xe1 nenhum arquivo no bucket, mantenha assim por em quanto, clique na aba de Permiss\xf5es, precisamos liberar o bucket para ser acess\xedvel para todo o p\xfablico, j\xe1 que estamos lidando com um site est\xe1tico e ele precisa estar dispon\xedvel para toda a Web! Ap\xf3s clicar na aba de permiss\xf5es, clique em Editar no painel "Bloquear acesso p\xfablico (configura\xe7\xf5es do bucket)" conforme o print abaixo:'}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/3 - habilitar acesso p\xfablico.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:'Desmarque o checkbox "Bloquear todo o acesso p\xfablico", os demais checkbox ser\xe3o desmarcados automaticamente:'}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/3.1 - habilitar acesso p\xfablico.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:'Mantenha todos desmarcados e confirme no bot\xe3o no final da p\xe1gina, abrir\xe1 um modal, escreva "confirmar" e em seguida clique no bot\xe3o confirmar para concluir essa configura\xe7\xe3o.'}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/3.2 - confirmar acesso publico.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:'Ainda na aba de "Permiss\xf5es", des\xe7a a p\xe1gina at\xe9 "Pol\xedtica do bucket" e clique em "Editar", na caixa de texto, colocaremos nossa pol\xedtica permitindo o acesso de todos os itens, adicione o c\xf3digo abaixo, substitua o "quizfacil.com.br" pelo seu dom\xednio:'}),(0,s.jsxs)("pre",{children:["                ",(0,s.jsxs)("code",{children:["\n","                    ","{","\n","                        ",'"Version": "2012-10-17",',"\n","                        ",'"Statement": [',"\n","                            ","{","\n","                                ",'"Sid": "PublicReadGetObject",',"\n","                                ",'"Effect": "Allow",',"\n","                                ",'"Principal": "*",',"\n","                                ",'"Action": "s3:GetObject",',"\n","                                ",'"Resource": "arn:aws:s3:::quizfacil.com.br/*"',"\n","                            ","}","\n","                        ","]","\n","                    ","}","\n","                "]}),"\n","            "]}),(0,s.jsx)("p",{children:"Ap\xf3s adicionar o c\xf3digo finalize a configura\xe7\xe3o no bot\xe3o no final da p\xe1gina, em seguida ser\xe1 apresentado a confirma\xe7\xe3o de registro salvo: "}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/3.3 - politica adicionada.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:'V\xe1 at\xe9 a aba "Propriedades", vamos sinalizar ao S3 que este bucket se trata de um site est\xe1tico, des\xe7a at\xe9 o painel "Hospedagem de site est\xe1tico" e clique em "Editar":  '}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/4 - selecionar guia propriedades.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:'Clique no radio button "Ativar" na op\xe7\xe3o "Hospedagem de site est\xe1tico", no campo "Documento de \xedndice" coloque o arquivo inicial do site, como esperado o default \xe9 index.html, recomendo manter este mesmo:  '}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/4.1 - habilitando site estatico e definindo index.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:'Agora estamos prontos para subir os arquivos fontes do site para o S3, apenas para ci\xeancia, \xe9 poss\xedvel subir os arquivos do site na aba "Objetos" e clicando em "Carregar", por\xe9m apesar de termos essa op\xe7\xe3o n\xe3o \xe9 a melhor pensando na recorr\xeancia de poss\xedveis atualiza\xe7\xf5es do sites, n\xe3o \xe9 muito amig\xe1vel manusear arquivos por aqui, mas fique a vontade para testar, nas pr\xf3ximas etapas vou mostrar uma forma mais eficiente e ideal de manipular os arquivos:  '}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/5 - subindo arquivos console.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsxs)("p",{children:["A melhor forma para manusear os arquivos no bucket \xe9 atrav\xe9s de comandos no terminal, \xe9 bem simples de fazer a configura\xe7\xe3o, primeiro instale o aws cli no sistema operacional (",(0,s.jsx)("a",{href:"https://docs.aws.amazon.com/pt_br/cli/latest/userguide/getting-started-install.html",children:"siga \xe0s instru\xe7\xf5es da documenta\xe7\xe3o oficial para instalar"}),'), em seguida v\xe1 at\xe9 o painel de credenciais de seguran\xe7a para gerar chaves de acesso que s\xe3o necess\xe1rias para vincular ao aws cli, o que ir\xe1 possibilitar de subir arquivos para o bucket atrav\xe9s do terminal com seguran\xe7a. Para acessar o painel de credenciais clique no seu nome de usu\xe1rio no topo da tela na direita, e selecione "Credenciais de Seguran\xe7a": ']}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/5.1 - acesso para credenciais de seguranca.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:'Des\xe7a at\xe9 "Chaves de acesso" e seguida clique em "Criar chave de acesso": '}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/5.2 - criar chave de acesso.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:'Nesta etapa aparecer\xe1 um aviso, alertando que n\xe3o \xe9 recomendado a libera\xe7\xe3o de chaves para o usu\xe1rio raiz, \xe9 poss\xedvel realizar essa configura\xe7\xe3o utilizando as melhores pr\xe1ticas, por\xe9m para ganharmos tempo vamos seguir com essa configura\xe7\xe3o, basta ter cuidado com as chaves geradas, jamais deixe a chave exposta em um reposit\xf3rio p\xfablico, garanta que somente voc\xea tem acesso \xe1 chave que for gerada, marque o checkbox confirmando a cria\xe7\xe3o, na tela seguinte clique em "Baixar arquivo .csv" e seguida clique em "Conclu\xeddo".'}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/5.3 - criar chave de acesso.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsxs)("p",{children:["V\xe1 at\xe9 o diret\xf3rio ",(0,s.jsx)("b",{children:"pai"})," de onde est\xe1 localizado os arquivos com a pasta dos arquivos do site, no meu caso os arquivos est\xe3o na raiz da pasta S3 conforme o print abaixo, no diret\xf3rio pai da pasta S3 irei criar um arquivo .bat com o comando para subir os arquivos para o S3, copie e cole o c\xf3digo abaixo neste arquivo .bat, basicamente estamos informando a pasta local que cont\xe9m os arquivs e para qual bucket a copia ser\xe1 realizada deixando de fora o diret\xf3rio .git da c\xf3pia para n\xe3o subir arquivos desnecess\xe1riamente providos do github caso a pasta seja um clone de l\xe1."]}),(0,s.jsx)("pre",{children:(0,s.jsx)("code",{children:'aws s3 sync C:\\Users\\Principal\\source\\Quiz-Facil\\S3 s3://quizfacil.com.br --exclude ".git/*"'})}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/5.4 comando terminal bat.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:'Abra o terminal no diret\xf3rio da pasta onde esta localizado o arquivo .bat, somente pela primeira e uma \xfanica vez vez precisamos executar o comando "aws configure" no terminal para adicionarmos as configura\xe7\xf5es necess\xe1rias da aws habilitando assim permiss\xe3o e o direcionamento correto para escrita/leitura do bucket no S3, logo em seguida ser\xe1 solicitado o id da chave de acesso e a chave secreta que est\xe3o no .csv baixados na \xfaltima etapa de cria\xe7\xe3o de chaves na aws, copie e cole diretamente no terminal, em seguida ser\xe1 solicitado a regi\xe3o padr\xe3o, coloque a mesma regi\xe3o do bucket (pode ser consultado na tela inicial de listagem de buckets do S3, normalmente sa-east-1 se tiver sido selecionado S\xe3o Paulo). Ap\xf3s as configura\xe7\xf5es iniciais de aws, podemos executar o .bat para subir os arquivos para o bucket, basta digitar o nome do arquivo .bat, a execu\xe7\xe3o ficar\xe1 conforme o print abaixo, nas pr\xf3ximas vezes que for atualizar os arquivos no bucket, n\xe3o ser\xe1 necess\xe1rio executar aws configure, basta clicar no bat ou cham\xe1-lo via terminal.'}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/5.5 aws configure e executando bat.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:'Ap\xf3s executado os camandos no terminal, podemos visualizar diretamente no bucket os arquivos na aba inicial de "Objetos":'}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/5.6 verificando arquivos no bucket.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:'Agora podemos acessar o nosso site diretamente atrav\xe9s da URL gerada automaticamente pelo S3 para acessar o nosso site est\xe1tico, v\xe1 at\xe9 a aba "Propriedades" e role a p\xe1gina at\xe9 o final at\xe9 chegar em "Hospedagem de site est\xe1tico", na linha final \xe9 poss\xedvel visualizar a URL:'}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/6. validando o site online.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:"Acesse ela para realizarmos o teste, visualizaremos o nosso site j\xe1 publicado:"}),(0,s.jsx)("img",{src:"/images/blog/hospedandoSiteEstatico/6.1 site online.jpg",className:"img-responsive"}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:"Por enquanto \xe9 isso! Em breve, continuaremos o tutorial com a cria\xe7\xe3o de um apontamento do dom\xednio para tornar a URL do S3 mais amig\xe1vel. Fique ligado para a pr\xf3xima parte!"})]})})})}),g=o(5201),b=()=>(0,s.jsx)("div",{id:"colorlib-page",children:(0,s.jsxs)("div",{className:"container-wrap",children:[(0,s.jsx)(i.Z,{}),(0,s.jsxs)("div",{id:"colorlib-main",children:[(0,s.jsx)(g.Z,{}),(0,s.jsx)(u,{}),(0,s.jsx)(r.Z,{}),(0,s.jsx)(n.Z,{}),(0,s.jsx)(t.Z,{}),(0,s.jsx)(c.Z,{}),(0,s.jsx)(d.Z,{}),(0,s.jsx)(l.Z,{}),(0,s.jsx)(m.Z,{}),(0,s.jsx)(p.Z,{})]})]})})}},function(a){a.O(0,[34,774,888,179],function(){return a(a.s=1858)}),_N_E=a.O()}]);