Automatize o deploy de uma aplicação React com Github Actions e FTP

O deploy de uma aplicação React é uma etapa crucial para disponibilizar sua criação na web. Neste artigo, vamos explorar como fazer o deploy de uma aplicação React feita com Vite em uma hospedagem compartilhada, usando as ferramentas Github Actions e FTP. Essa combinação permitirá automatizar o processo de deploy, tornando mais fácil para você, como desenvolvedor, disponibilizar sua aplicação online.

Antes de começar, é importante ter conhecimento básico de React e Vite, além de possuir uma conta no Github e ter o Git instalado em sua máquina.

Criando um repositório no Github

Vamos iniciar criando um novo repositório no Github para o seu projeto. Acesse o Github e clique no botão “New” para criar um novo repositório. Dê um nome ao seu repositório e escolha as configurações desejadas. Anote o link do repositório Git, por exemplo, https://github.com/seu-usuario/nome-do-repositorio.git.

Clonando o repositório na máquina local

Em seguida, vamos clonar o repositório em sua máquina local. Abra o terminal ou prompt de comando e navegue até o diretório onde deseja clonar o projeto. Execute o seguinte comando para clonar o repositório Git em sua máquina local:

git clone https://github.com/seu-usuario/nome-do-repositorio.git

Isso criará uma cópia local do repositório em seu computador.

Preparando o ambiente

É recomendado ter o Vite instalado em seu ambiente de desenvolvimento. Você pode utilizar o gerenciador de pacotes npm para isso. Navegue até o diretório do projeto clonado e execute o seguinte comando para instalar o Vite:

npm install create-vite -g

Agora, crie um novo projeto React utilizando o Vite:

create-vite nome-do-projeto --template react

Isso criará uma estrutura básica de um projeto React pronto para ser desenvolvido juntamente com as configurações básicas do Vite.

Configurando o Github Actions

Agora, vamos configurar o Github Actions para automatizar o deploy do seu projeto. No diretório raiz do projeto, crie um arquivo chamado .github/workflows/main.yml com o seguinte conteúdo:

on:
    push:
        branches:
            - main

name: 🚀 Deploy website on push
jobs:
  web-deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    steps:
    - name: 🚚 Get latest code
      uses: actions/checkout@v3

    - name: Use Node.js 16
      uses: actions/setup-node@v2
      with:
        node-version: '16'
      
    - name: 🔨 Build Project
      run: |
        npm install
        npm run build --prod
    
    - name: 📂 Sync files
      uses: SamKirkland/FTP-Deploy-Action@v4.3.4
      with:
        server: ${{ secrets.FTP_SERVER }}
        username: ${{ secrets.FTP_USERNAME }}
        password: ${{ secrets.FTP_PASSWORD }}
        local-dir: ./dist/

Antes de tudo, primeiramente precisamos configurar as variáveis de ambiente FTP_SERVER, FTP_USERNAME e FTP_PASSWORD no repositório do Github, para que possamos usar essas informações de maneira segura durante o deploy.

Configurando Secrets no Github

1. Acesse o repositório do seu projeto no Github.
2. Na página do repositório, clique na aba “Settings” (Configurações) no menu superior.
3. Na página de configurações, navegue até a seção “Secrets” (Segredos) no menu lateral esquerdo e clique nela.
4. Em seguida, clique no botão “New repository secret” (Novo segredo do repositório).
5. Será exibido um formulário para adicionar um novo segredo.
6. No campo “Name” (Nome), digite o nome do segredo. Por exemplo, “FTP_USERNAME”.
7. No campo “Value” (Valor), insira o valor do segredo. Neste caso, seria o nome de usuário do FTP.
8. Clique no botão “Add secret” (Adicionar segredo) para salvar o segredo.
9. Repita os passos 4 a 8 para adicionar o segredo “FTP_PASSWORD” e “FTP_SERVER”, inserindo os valores da mesma forma.
10. Após adicionar os segredos, você verá uma lista de segredos na seção “Secrets” da página de configurações do repositório.

Como resultado, ao referenciar ${{ secrets.NOME_DO_SEGREDO }} no arquivo YAML do Github Actions, o valor do segredo será substituído durante o processo de deploy, garantindo que as informações sensíveis (como nome de usuário e senha) não sejam expostas no código-fonte.

Configurando a hospagedagem compartilhada

Faça login no painel de controle da sua conta na Hostgator (estou usando Hostgator só para ilustrar, você pode usar qualquer outra) e acesse o Gerenciador de Arquivos. Crie uma pasta chamada public_html na raiz do seu diretório de hospedagem compartilhada. É nessa pasta que sua aplicação será implantada. Normalmente essa pasta já existe, e se seu site já tem algo publicado muito provavelmente ela já existe. Nesse caso você não precisa criar uma nova.

Implementando o deploy

Por fim volte para o seu projeto no Github e faça um commit e um push para o repositório remoto. Isso acionará o Github Actions e iniciará o processo de build e deploy. Porém, para nossa Action ser chamada corretamente é importante fazer push para a branch main pois dessa maneira a configuração que colocamos nas primeiras linhas do arquivo YAML irão ser contempladas.

O fluxo de trabalho definido no arquivo YAML irá:

1. Fazer o checkout do código-fonte do repositório.
2. Configurar a versão do Node.js.
3. Instalar as dependências do projeto.
4. Construir a aplicação React.
5. Efetuar o deploy para a hospedagem compartilhada através do FTP.

Após o processo ser concluído, finalmente sua aplicação React estará implantada na pasta public_html do seu servidor de hospedagem compartilhada da Hostgator ou qualquer outra similar.

Qualquer dúvida deixa nos comentários 😉