O deploy de uma aplica\u00e7\u00e3o React \u00e9 uma etapa crucial para disponibilizar sua cria\u00e7\u00e3o na web. Neste artigo, vamos explorar como fazer o deploy de uma aplica\u00e7\u00e3o React feita com Vite em uma hospedagem compartilhada, usando as ferramentas Github Actions e FTP. Essa combina\u00e7\u00e3o permitir\u00e1 automatizar o processo de deploy, tornando mais f\u00e1cil para voc\u00ea, como desenvolvedor, disponibilizar sua aplica\u00e7\u00e3o online.<\/p>\n\n\n\n\n\n\n\n
Antes de come\u00e7ar, \u00e9 importante ter conhecimento b\u00e1sico de React e Vite, al\u00e9m de possuir uma conta no Github e ter o Git instalado em sua m\u00e1quina.<\/p>\n\n\n\n
Vamos iniciar criando um novo reposit\u00f3rio no Github para o seu projeto. Acesse o Github e clique no bot\u00e3o “New” para criar um novo reposit\u00f3rio. D\u00ea um nome ao seu reposit\u00f3rio e escolha as configura\u00e7\u00f5es desejadas. Anote o link do reposit\u00f3rio Git, por exemplo, Em seguida, vamos clonar o reposit\u00f3rio em sua m\u00e1quina local. Abra o terminal ou prompt de comando e navegue at\u00e9 o diret\u00f3rio onde deseja clonar o projeto. Execute o seguinte comando para clonar o reposit\u00f3rio Git em sua m\u00e1quina local:<\/p>\n\n\n\n Isso criar\u00e1 uma c\u00f3pia local do reposit\u00f3rio em seu computador.<\/p>\n\n\n\n \u00c9 recomendado ter o Vite instalado em seu ambiente de desenvolvimento. Voc\u00ea pode utilizar o gerenciador de pacotes npm para isso. Navegue at\u00e9 o diret\u00f3rio do projeto clonado e execute o seguinte comando para instalar o Vite:<\/p>\n\n\n\n Agora, crie um novo projeto React utilizando o Vite:<\/p>\n\n\n\n Isso criar\u00e1 uma estrutura b\u00e1sica de um projeto React pronto para ser desenvolvido juntamente com as configura\u00e7\u00f5es b\u00e1sicas do Vite.<\/p>\n\n\n\n Agora, vamos configurar o Github Actions para automatizar o deploy do seu projeto. No diret\u00f3rio raiz do projeto, crie um arquivo chamado Antes de tudo, primeiramente precisamos configurar as vari\u00e1veis de ambiente Como resultado, ao referenciar Fa\u00e7a login no painel de controle da sua conta na Hostgator<\/em> (estou usando Hostgator s\u00f3 para ilustrar, voc\u00ea pode usar qualquer outra) e acesse o Gerenciador de Arquivos. Crie uma pasta chamada Por fim volte para o seu projeto no Github e fa\u00e7a um commit e um push para o reposit\u00f3rio remoto. Isso acionar\u00e1 o Github Actions e iniciar\u00e1 o processo de build e deploy. Por\u00e9m, para nossa Action ser chamada corretamente \u00e9 importante fazer push para a branch main <\/em>pois dessa maneira a configura\u00e7\u00e3o que colocamos nas primeiras linhas do arquivo YAML ir\u00e3o ser contempladas.<\/p>\n\n\n\n O fluxo de trabalho definido no arquivo YAML ir\u00e1:<\/p>\n\n\n\n Ap\u00f3s o processo ser conclu\u00eddo, finalmente sua aplica\u00e7\u00e3o React estar\u00e1 implantada na pasta <\/p>\n\n\n\n Qualquer d\u00favida deixa nos coment\u00e1rios \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":" O deploy de uma aplica\u00e7\u00e3o React \u00e9 uma etapa crucial para disponibilizar sua cria\u00e7\u00e3o na web. Neste artigo, vamos explorar como fazer o deploy de uma aplica\u00e7\u00e3o React feita com Vite em uma hospedagem compartilhada, usando as ferramentas Github Actions e FTP. Essa combina\u00e7\u00e3o permitir\u00e1 automatizar o processo de deploy, tornando mais f\u00e1cil para voc\u00ea, […]<\/p>\n","protected":false},"author":1,"featured_media":2185,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-2179","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnologia"],"yoast_head":"\nhttps:\/\/github.com\/seu-usuario\/nome-do-repositorio.git<\/code>.<\/p>\n\n\n\nClonando o reposit\u00f3rio na m\u00e1quina local<\/h2>\n\n\n\n
git clone https:\/\/github.com\/seu-usuario\/nome-do-repositorio.git<\/code><\/pre>\n\n\n\nPreparando o ambiente<\/h2>\n\n\n\n
npm install create-vite -g<\/code><\/pre>\n\n\n\ncreate-vite nome-do-projeto --template react<\/code><\/pre>\n\n\n\nConfigurando o Github Actions<\/h2>\n\n\n\n
.github\/workflows\/main.yml<\/code> com o seguinte conte\u00fado:<\/p>\n\n\n\non:\n push:\n branches:\n - main\n\nname: \ud83d\ude80 Deploy website on push\njobs:\n web-deploy:\n name: \ud83c\udf89 Deploy\n runs-on: ubuntu-latest\n steps:\n - name: \ud83d\ude9a Get latest code\n uses: actions\/checkout@v3\n\n - name: Use Node.js 16\n uses: actions\/setup-node@v2\n with:\n node-version: '16'\n \n - name: \ud83d\udd28 Build Project\n run: |\n npm install\n npm run build --prod\n \n - name: \ud83d\udcc2 Sync files\n uses: SamKirkland\/FTP-Deploy-Action@v4.3.4\n with:\n server: ${{ secrets.FTP_SERVER }}\n username: ${{ secrets.FTP_USERNAME }}\n password: ${{ secrets.FTP_PASSWORD }}\n local-dir: .\/dist\/<\/code><\/pre>\n\n\n\nFTP_SERVER<\/code>, FTP_USERNAME<\/code> e FTP_PASSWORD<\/code> no reposit\u00f3rio do Github, para que possamos usar essas informa\u00e7\u00f5es de maneira segura durante o deploy.<\/p>\n\n\n\nConfigurando Secrets no Github<\/h2>\n\n\n\n
\n
${{ secrets.NOME_DO_SEGREDO }}<\/code> no arquivo YAML do Github Actions, o valor do segredo ser\u00e1 substitu\u00eddo durante o processo de deploy, garantindo que as informa\u00e7\u00f5es sens\u00edveis (como nome de usu\u00e1rio e senha) n\u00e3o sejam expostas no c\u00f3digo-fonte.<\/p>\n\n\n\nConfigurando a hospagedagem compartilhada<\/h2>\n\n\n\n
public_html<\/code> na raiz do seu diret\u00f3rio de hospedagem compartilhada. \u00c9 nessa pasta que sua aplica\u00e7\u00e3o ser\u00e1 implantada. Normalmente essa pasta j\u00e1 existe, e se seu site j\u00e1 tem algo publicado muito provavelmente ela j\u00e1 existe. Nesse caso voc\u00ea n\u00e3o precisa criar uma nova.<\/p>\n\n\n\nImplementando o deploy<\/h2>\n\n\n\n
\n
public_html<\/code> do seu servidor de hospedagem compartilhada da Hostgator<\/em> ou qualquer outra similar.<\/p>\n\n\n\n