Skip to content

Commit f38a422

Browse files
diraoldiraol
committed
feat: Adiciona github pages para deploy de prod
1 parent bcfcf41 commit f38a422

5 files changed

Lines changed: 348 additions & 1 deletion

File tree

‎.github/workflows/deploy-gh-pages.yml‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
workflow_dispatch:
8+
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
concurrency:
15+
group: "pages"
16+
cancel-in-progress: false
17+
18+
jobs:
19+
build:
20+
runs-on: ubuntu-latest
21+
22+
steps:
23+
- name: Checkout
24+
uses: actions/checkout@v4
25+
26+
- name: Setup Node.js
27+
uses: actions/setup-node@v4
28+
with:
29+
node-version: '14.17.0'
30+
cache: 'npm'
31+
32+
- name: Install dependencies
33+
run: npm ci
34+
35+
- name: Build
36+
run: npm run build
37+
38+
- name: Create CNAME file
39+
run: echo "diariosdoclima.org.br" > dist/CNAME
40+
41+
- name: Upload artifact
42+
uses: actions/upload-pages-artifact@v3
43+
with:
44+
path: ./dist
45+
46+
deploy:
47+
environment:
48+
name: github-pages
49+
url: ${{ steps.deployment.outputs.page_url }}
50+
runs-on: ubuntu-latest
51+
needs: build
52+
53+
steps:
54+
- name: Deploy to GitHub Pages
55+
id: deployment
56+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,6 @@
2222
npm-debug.log*
2323
yarn-debug.log*
2424
yarn-error.log*
25+
26+
# GitHub Pages
27+
.gh-pages

‎CNAME‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
diariosdoclima.org.br

‎DEPLOY.md‎

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
# Deploy no GitHub Pages
2+
3+
Este projeto está configurado para fazer deploy automático no GitHub Pages usando GitHub Actions com domínio customizado.
4+
5+
## 🌐 Domínio Customizado
6+
7+
**Domínios configurados:**
8+
- `diariosdoclima.org.br` (principal)
9+
- `www.diariosdoclima.org.br` (redirecionamento)
10+
11+
## 🚀 Configuração Inicial
12+
13+
### 1. Configurar DNS do Domínio
14+
15+
Configure os seguintes registros DNS no seu provedor:
16+
17+
#### Registro A (apex domain)
18+
```
19+
Type: A
20+
Name: @
21+
Value: 185.199.108.153
22+
TTL: 3600
23+
```
24+
25+
```
26+
Type: A
27+
Name: @
28+
Value: 185.199.109.153
29+
TTL: 3600
30+
```
31+
32+
```
33+
Type: A
34+
Name: @
35+
Value: 185.199.110.153
36+
TTL: 3600
37+
```
38+
39+
```
40+
Type: A
41+
Name: @
42+
Value: 185.199.111.153
43+
TTL: 3600
44+
```
45+
46+
#### Registro CNAME (www subdomain)
47+
```
48+
Type: CNAME
49+
Name: www
50+
Value: diariosdoclima.org.br
51+
TTL: 3600
52+
```
53+
54+
**Nota**: O registro CNAME do `www` deve apontar para o domínio apex (`diariosdoclima.org.br`), que por sua vez aponta para os IPs do GitHub Pages através dos registros A.
55+
56+
### 2. Habilitar GitHub Pages no Repositório
57+
58+
1. Acesse o repositório no GitHub: https://github.com/okfn-brasil/diarios-do-clima-frontend
59+
2. Vá em **Settings** → **Pages**
60+
3. Em **Source**, selecione: **GitHub Actions**
61+
4. Em **Custom domain**, digite: `diariosdoclima.org.br`
62+
5. Aguarde a verificação do DNS (pode levar alguns minutos)
63+
6. Marque a opção: ✅ **Enforce HTTPS** (após verificação do DNS)
64+
7. Salve as configurações
65+
66+
### 3. Configurar Permissões do Workflow
67+
68+
1. Em **Settings** → **Actions** → **General**
69+
2. Em **Workflow permissions**, certifique-se de que está selecionado:
70+
- ✅ **Read and write permissions**
71+
3. Salve se precisar alterar
72+
73+
## 📦 Como Funciona
74+
75+
### Deploy Automático
76+
77+
O deploy acontece automaticamente quando você:
78+
- Faz push na branch `main`
79+
- Ou dispara manualmente via **Actions** → **Deploy to GitHub Pages** → **Run workflow**
80+
81+
### Processo de Build
82+
83+
1. **Checkout** do código
84+
2. **Instalação** das dependências (Node.js 14.17.0)
85+
3. **Build** da aplicação (gera pasta `dist/`)
86+
4. **Criação do arquivo CNAME** com o domínio customizado
87+
5. **Upload** dos arquivos estáticos
88+
6. **Deploy** no GitHub Pages
89+
90+
### URLs de Acesso
91+
92+
Após o deploy e configuração do DNS:
93+
- **Produção**: https://diariosdoclima.org.br
94+
- **WWW**: https://www.diariosdoclima.org.br (redirecionamento automático)
95+
- **Fallback**: https://okfn-brasil.github.io/diarios-do-clima-frontend/
96+
97+
## 🔧 Estrutura do Workflow
98+
99+
```
100+
.github/
101+
└── workflows/
102+
└── deploy-gh-pages.yml # Workflow de CI/CD
103+
```
104+
105+
### Jobs do Workflow
106+
107+
- **build**: Compila a aplicação React e cria o arquivo CNAME
108+
- **deploy**: Publica no GitHub Pages
109+
110+
## 📝 Arquivo CNAME
111+
112+
O arquivo `CNAME` na raiz do projeto contém o domínio customizado:
113+
```
114+
diariosdoclima.org.br
115+
```
116+
117+
O workflow copia este arquivo para a pasta `dist/` durante o build, garantindo que o domínio customizado seja preservado após cada deploy.
118+
119+
## 🔍 Monitoramento
120+
121+
### Ver Status do Deploy
122+
123+
1. Acesse a aba **Actions** no repositório
124+
2. Veja o status do workflow **Deploy to GitHub Pages**
125+
3. Clique no workflow para ver logs detalhados
126+
127+
### Verificar DNS
128+
129+
```bash
130+
# Verificar registro A
131+
dig diariosdoclima.org.br +short
132+
133+
# Verificar registro CNAME
134+
dig www.diariosdoclima.org.br +short
135+
136+
# Verificar HTTPS
137+
curl -I https://diariosdoclima.org.br
138+
```
139+
140+
### Verificar Deploy
141+
142+
Após conclusão bem-sucedida:
143+
- ✅ Badge verde no workflow
144+
- 🌐 Acesse: https://diariosdoclima.org.br
145+
- 🌐 Teste: https://www.diariosdoclima.org.br
146+
147+
## 🛠️ Build Local
148+
149+
Para testar o build localmente:
150+
151+
```bash
152+
# Instalar dependências
153+
npm ci
154+
155+
# Build
156+
npm run build
157+
158+
# Servir localmente
159+
npx serve -s dist
160+
```
161+
162+
## ⚙️ Customização
163+
164+
### Mudar Branch de Deploy
165+
166+
Edite `.github/workflows/deploy-gh-pages.yml`:
167+
168+
```yaml
169+
on:
170+
push:
171+
branches:
172+
- main # Altere para sua branch
173+
```
174+
175+
### Mudar Domínio
176+
177+
1. Edite o arquivo `CNAME`:
178+
```
179+
seunovodominio.com.br
180+
```
181+
182+
2. Configure os registros DNS conforme acima
183+
184+
3. Atualize no GitHub Settings → Pages → Custom domain
185+
186+
### Deploy Manual
187+
188+
No GitHub:
189+
1. **Actions** → **Deploy to GitHub Pages**
190+
2. **Run workflow** → Selecione a branch
191+
3. **Run workflow**
192+
193+
## 🐛 Troubleshooting
194+
195+
### DNS não propaga
196+
197+
- Aguarde até 48 horas (geralmente 10-30 minutos)
198+
- Use `dig` ou https://dnschecker.org para verificar
199+
- Limpe o cache DNS local: `sudo systemd-resolve --flush-caches`
200+
201+
### HTTPS não disponível
202+
203+
1. Aguarde a verificação do DNS completar
204+
2. Em Settings → Pages, desmarque e marque novamente "Enforce HTTPS"
205+
3. Aguarde o certificado SSL ser emitido (pode levar até 24h)
206+
207+
### Domínio não funciona após deploy
208+
209+
1. Verifique se o arquivo CNAME está presente em `dist/` após o build
210+
2. Confirme que o workflow criou o CNAME corretamente (veja logs)
211+
3. Redefina o domínio em Settings → Pages
212+
213+
### Erro "Domain's DNS record could not be retrieved"
214+
215+
- Confirme que os registros A estão apontando para os IPs corretos do GitHub
216+
- Use `dig diariosdoclima.org.br` para verificar
217+
218+
### Deploy falhou
219+
220+
1. Verifique os logs em **Actions**
221+
2. Confirme que as permissões estão corretas
222+
3. Verifique se o GitHub Pages está habilitado
223+
224+
## 📚 Recursos
225+
226+
- [GitHub Pages Custom Domain](https://docs.github.com/pages/configuring-a-custom-domain-for-your-github-pages-site)
227+
- [GitHub Pages Documentation](https://docs.github.com/pages)
228+
- [GitHub Actions Documentation](https://docs.github.com/actions)
229+
- [DNS Checker](https://dnschecker.org)
230+
231+
## 🔄 Alterações Realizadas
232+
233+
### Arquivos Criados/Modificados
234+
235+
1. **`.github/workflows/deploy-gh-pages.yml`** - Workflow com suporte a domínio customizado
236+
2. **`webpack.config.js`** - publicPath em `/` (raiz)
237+
3. **`CNAME`** - Arquivo com domínio customizado
238+
4. **`DEPLOY.md`** - Esta documentação
239+
5. **`.gitignore`** - Adicionado .gh-pages
240+
241+
## ✅ Checklist de Configuração
242+
243+
- [ ] Registros DNS configurados (4x A + 1x CNAME)
244+
- [ ] GitHub Pages habilitado (Source: GitHub Actions)
245+
- [ ] Domínio customizado adicionado no GitHub
246+
- [ ] DNS verificado (pode levar alguns minutos)
247+
- [ ] HTTPS habilitado (Enforce HTTPS marcado)
248+
- [ ] Primeiro deploy realizado com sucesso
249+
- [ ] Domínio acessível via HTTPS
250+
- [ ] WWW redirecionando corretamente
251+
252+
## 🔐 Segurança
253+
254+
### HTTPS/SSL
255+
256+
O GitHub Pages fornece certificado SSL gratuito via Let's Encrypt automaticamente após:
257+
1. DNS verificado
258+
2. "Enforce HTTPS" habilitado
259+
260+
### HSTS
261+
262+
O GitHub Pages já inclui headers de segurança. Para verificar:
263+
```bash
264+
curl -I https://diariosdoclima.org.br | grep -i strict
265+
```
266+
267+
---
268+
269+
**Nota**:
270+
- A propagação DNS pode levar de 10 minutos a 48 horas
271+
- O certificado SSL é emitido automaticamente pelo GitHub após verificação do DNS
272+
- O primeiro deploy pode levar alguns minutos
273+

‎README.md‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,18 @@
1-
# Getting Started with Create React App
1+
# Diários do Clima - Frontend
2+
3+
[![Deploy to GitHub Pages](https://github.com/okfn-brasil/diarios-do-clima-frontend/actions/workflows/deploy-gh-pages.yml/badge.svg)](https://github.com/okfn-brasil/diarios-do-clima-frontend/actions/workflows/deploy-gh-pages.yml)
4+
5+
Frontend da aplicação Diários do Clima, desenvolvido com React e TypeScript.
6+
7+
## 🌐 Deploy
8+
9+
A aplicação está configurada para deploy automático no GitHub Pages com domínio customizado.
10+
11+
**URL de produção**: https://diariosdoclima.org.br
12+
13+
📖 **Documentação completa de deploy**: Ver [DEPLOY.md](./DEPLOY.md)
14+
15+
## 🚀 Getting Started
216

317
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
418

0 commit comments

Comments
 (0)