{"id":28441,"date":"2021-06-10T20:16:00","date_gmt":"2021-06-10T17:16:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28441"},"modified":"2021-10-18T04:00:57","modified_gmt":"2021-10-18T01:00:57","slug":"implante-site-estatico-no-firebase-hosting-gratuitamente","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/implante-site-estatico-no-firebase-hosting-gratuitamente\/","title":{"rendered":"Implante site est\u00e1tico no Firebase Hosting gratuitamente"},"content":{"rendered":"

A hospedagem Firebase \u00e9 um servi\u00e7o oferecido pelo Google que hospeda sites est\u00e1ticos e din\u00e2micos de forma segura. \u00c9 o melhor servi\u00e7o gratuito para desenvolvedores. Voc\u00ea pode mostrar o design de um site, uma vers\u00e3o de pr\u00e9-produ\u00e7\u00e3o de um site para o cliente, implantando-o no Firebase hosting.<\/p>\n

Um usu\u00e1rio pode usar o plano gratuito do Firebase para hospedar um site. O plano gratuito inclui suporte para dom\u00ednio personalizado e SSL, armazenamento de 1 GB. O armazenamento de 1 GB \u00e9 suficiente para sites menores. Para obter uma lista de todos os recursos inclu\u00eddos nos planos gr\u00e1tis e premium, verifique sua p\u00e1gina de pre\u00e7os<\/a>.<\/p>\n

Embora o Firebase hosting forne\u00e7a suporte para executar o c\u00f3digo Node.js \/ JavaScript, neste artigo nos concentramos apenas na implanta\u00e7\u00e3o do site est\u00e1tico. Para implantar um site din\u00e2mico no Firebase, escreverei outro artigo no futuro.<\/p>\n

Come\u00e7ando<\/h3>\n

Para come\u00e7ar, voc\u00ea deve ter o Node.js instalado em seu sistema. Voc\u00ea pode obter o pacote Node.js para instala\u00e7\u00e3o em seu site oficial<\/a>.<\/p>\n

Depois de instalar o Node.js em seu sistema, acesse o console do Firebase<\/a> e crie um projeto clicando na caixa ‘Adicionar projeto’. Preencha todas as informa\u00e7\u00f5es conforme solicitado.<\/p>\n

Ao criar o projeto Firebase, voc\u00ea redirecionar\u00e1 para o painel do projeto. Clique em ‘Hospedagem’ na barra lateral esquerda e depois em ‘Come\u00e7ar’. Ele abrir\u00e1 uma p\u00e1gina onde voc\u00ea encontrar\u00e1 instru\u00e7\u00f5es para implanta\u00e7\u00e3o. Veremos isso na pr\u00f3xima parte do tutorial.<\/p>\n

Implantar site est\u00e1tico no Firebase Hosting<\/h3>\n

Depois de criar um projeto no Firebase, com a ajuda de alguns comandos, podemos implantar um site est\u00e1tico na hospedagem do Firebase. Ele requer que voc\u00ea primeiro instale o Firebase CLI e, em seguida, configure-o localmente.<\/p>\n

Instale a Firebase CLI<\/h4>\n

Para a implanta\u00e7\u00e3o, a primeira coisa que voc\u00ea precisa fazer \u00e9 instalar o Firebase CLI. Voc\u00ea instalou o Node.js, portanto, use o npm para instalar o CLI. Abra o terminal e instale a Firebase CLI usando npm da seguinte maneira:<\/p>\n

npm install -g firebase-tools<\/code><\/pre>\n
Observe que estamos instalando as ferramentas do Firebase globalmente usando -g<\/code>. Ao fazer isso, voc\u00ea pode executar comandos do Firebase a partir de qualquer diret\u00f3rio em sua m\u00e1quina. Agora, a partir do terminal, execute o pr\u00f3ximo comando:<\/p>\n
firebase login<\/code><\/pre>\n
Ele pode redirecion\u00e1-lo para a p\u00e1gina de login da conta do Google. Basta seguir as etapas conforme sugerido. \u00c9 apenas um processo de autoriza\u00e7\u00e3o com o Firebase, ent\u00e3o o projeto ser\u00e1 implantado apenas na sua conta.<\/p>\n
Inicializar e implantar<\/h4>\n
Depois de autorizar sua conta do Google com Firebase CLI, voc\u00ea precisa inicializar o Firebase no diret\u00f3rio raiz do projeto. Para isso, execute o comando abaixo no diret\u00f3rio raiz do seu projeto.<\/p>\n
firebase init<\/code><\/pre>\n
Ao executar o comando acima, o CLI pede uma op\u00e7\u00e3o diferente para escolher. Voc\u00ea deve selecionar a op\u00e7\u00e3o ‘Hospedagem’ navegando por uma seta e pressionando a tecla de espa\u00e7o. Pressione Enter ap\u00f3s selecionar a op\u00e7\u00e3o ‘Hospedagem’.<\/p>\n
\"Implante<\/a><\/p>\n
Em seguida, selecione o projeto que voc\u00ea criou no Firebase console. Pressione a tecla Enter. A pr\u00f3xima pergunta seria: O que voc\u00ea deseja usar como seu diret\u00f3rio p\u00fablico? (p\u00fablico). N\u00e3o h\u00e1 necessidade de fazer nada aqui. Basta apertar a tecla Enter.<\/p>\n
Para a pr\u00f3xima pergunta Configurar como um aplicativo de p\u00e1gina \u00fanica (reescrever todos os URLs em \/index.html)? (s \/ N), pressione N e pressione Enter, pois n\u00e3o somos um aplicativo de implanta\u00e7\u00e3o de p\u00e1gina \u00fanica.<\/p>\n
Ap\u00f3s este comando, voc\u00ea ver\u00e1 alguns arquivos criados em seu diret\u00f3rio raiz junto com a public<\/code>pasta. Este public<\/code>diret\u00f3rio servir\u00e1 como uma raiz para implanta\u00e7\u00e3o. Neste public<\/code>diret\u00f3rio voc\u00ea precisa manter seus arquivos de projeto.<\/p>\n
Agora, vamos criar p\u00e1ginas HTML est\u00e1ticas. Como este tutorial \u00e9 apenas para fins de demonstra\u00e7\u00e3o, estou criando p\u00e1ginas HTML b\u00e1sicas.<\/p>\n
public \/ index.html<\/strong><\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Document<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<h1>This is Index Page<\/h1>\n\u00a0\u00a0\u00a0\u00a0<a href=\"index.html\">Home<\/a> | <a href=\"about.html\">About<\/a>\n<\/body>\n<\/html><\/code><\/pre>\n
public \/ about.html<\/strong><\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Document<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<h1>This is About Page<\/h1>\n\u00a0\u00a0\u00a0\u00a0<a href=\"index.html\">Home<\/a> | <a href=\"about.html\">About<\/a>\n<\/body>\n<\/html><\/code><\/pre>\n
public \/ style.css<\/strong><\/p>\n
h1 {\n\u00a0\u00a0\u00a0\u00a0color: blueviolet;\n}<\/code><\/pre>\n
Estas s\u00e3o as nossas p\u00e1ginas est\u00e1ticas que iremos implementar no Firebase hosting.<\/p>\n
Se voc\u00ea quiser testar o projeto localmente antes da implanta\u00e7\u00e3o, execute o comando serve da seguinte maneira:<\/p>\n
firebase serve<\/code><\/pre>\n
Ele iniciar\u00e1 seu servidor local em http: \/\/ localhost: 5000<\/a>. Teste seu projeto e se tudo estiver bem, implante-o usando o comando:<\/p>\n
firebase deploy<\/code><\/pre>\n
Ap\u00f3s a conclus\u00e3o da implanta\u00e7\u00e3o, voc\u00ea deve ver o URL de hospedagem no console.<\/p>\n
\"Implante<\/a><\/p>\n
Execute o URL de hospedagem no navegador e voc\u00ea ver\u00e1 que seu site foi implantado com sucesso. Observe que voc\u00ea pode implantar seu projeto quantas vezes. Ap\u00f3s suas altera\u00e7\u00f5es, apenas execute o comando de implanta\u00e7\u00e3o e seu site implantar\u00e1 com a nova vers\u00e3o.<\/p>\n
Reverter sua vers\u00e3o<\/h3>\n
O Firebase mant\u00e9m um hist\u00f3rico de todas as suas vers\u00f5es de implanta\u00e7\u00e3o. Voc\u00ea pode at\u00e9 mesmo reverter para a vers\u00e3o mais antiga. V\u00e1 para a p\u00e1gina Firebase Hosting, onde voc\u00ea encontrar\u00e1 uma op\u00e7\u00e3o de revers\u00e3o (supondo que voc\u00ea tenha implantado mais de uma vers\u00e3o).<\/p>\n
\"Implante<\/a><\/p>\n
Ao fazer uma revers\u00e3o para as vers\u00f5es, voc\u00ea pode alternar entre cada vers\u00e3o do seu site diretamente. \u00c9 simples e \u00fatil durante o est\u00e1gio de design e desenvolvimento.<\/p>\n
Espero que voc\u00ea tenha aprendido o b\u00e1sico sobre o processo de implanta\u00e7\u00e3o da hospedagem Firebase. Por favor, compartilhe seus pensamentos e sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n