Olá, pessoal! No post de hoje, vamos aprender uma maneira fácil e eficiente de realizar o deploy de suas aplicações React no GitHub e enviá-las automaticamente para um servidor remoto! Neste tutorial, vou guiá-lo passo a passo para configurar esse processo de forma simples e automatizada.
Passo 1: Crie o arquivo deploy-prod.yml
O primeiro passo é criar um arquivo chamado deploy-prod.yml na pasta .github/workflows do seu repositório. Esse arquivo será responsável por definir as etapas do fluxo de trabalho de implantação.
Passo 2: Configurando o arquivo deploy-prod.yml
No arquivo deploy-prod.yml, você precisa adicionar o seguinte conteúdo:
name: Deploy React Production
on:
push:
branches:
- 'main'
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '14.x'
- name: Install dependencies
run: npm install
- name: Build React
run: npm run build
- name: Deploy to Server
uses: appleboy/[email protected]
with:
host: ${{ secrets.SERVER_IP}}
username: ${{ secrets.SERVER_USER }}
password: ${{ secrets.SERVER_PASSWORD }}
source: build/
target: ${{ secrets.SERVER_DIR}}
Certifique-se de substituir SERVER_IP, SERVER_USER e SERVER_PASSWORD pelas informações corretas do seu servidor remoto.
Passo 3: Mudando as variáveis
No arquivo deploy-prod.yml, você pode personalizar outras variáveis, se necessário. Por exemplo, você pode alterar a ramificação (branch) no evento “push” para que o deploy ocorra em uma ramificação diferente.
Passo 4: Configurando as credenciais no GitHub Secrets
Agora, precisamos configurar a senha do servidor como um segredo no GitHub Secrets do seu repositório.
- Abra o seu repositório no GitHub.
- Clique em “Settings” na parte superior do repositório.
- Na barra lateral esquerda, clique em “Secrets”.
- Clique em “New repository secret”.
- No campo “Name”, o nome da variável.
- No campo “Value”, insira o valor da variável.
- Clique em “Add secret” para salvar.
Agora você está pronto para fazer o deploy automático de suas aplicações React no GitHub para o servidor remoto! A cada push na branch ‘main’, o fluxo de trabalho definido no arquivo deploy-prod.yml será acionado, construindo o React e enviando os arquivos para o servidor configurado.
Espero que este tutorial tenha sido útil para você. Agora você pode automatizar o processo de deploy e concentrar-se no desenvolvimento da sua aplicação React.
