blob: cf675bfe7df8c613ae0eddcfae6292b124b51208 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
# Vite Portfolio (Headless Drupal Frontend)
This project is configured to consume a headless Drupal backend (JSON:API) and deploy as a Docker image served by Nginx.
## Added Drupal libraries
- `axios` for HTTP requests
- `drupal-jsonapi-params` for building Drupal JSON:API query parameters
## Environment variables
Create a local env file from the template:
```bash
cp .env.example .env.local
```
Available variables:
- `VITE_DRUPAL_BASE_URL` (required) – base Drupal URL, for example `https://cms.example.com`
- `VITE_DRUPAL_API_PREFIX` (optional) – defaults to `/jsonapi`
- `VITE_DRUPAL_AUTH_TOKEN` (optional) – bearer token used by the HTTP client
For local development with the included Drupal stack (CORS-safe via Vite proxy), use:
- `VITE_DRUPAL_BASE_URL=http://localhost:5173`
- `VITE_DRUPAL_API_PREFIX=/drupal-api/jsonapi`
## Client utilities
- Typed env config: `src/config/env.ts`
- Reusable Drupal client: `src/lib/drupalClient.ts`
Example usage:
```ts
import { createDrupalParams, fetchDrupalResource } from './lib/drupalClient'
type NodeCollection = {
data: Array<{ id: string; attributes: Record<string, unknown> }>
}
const params = createDrupalParams().addPageLimit(5).addFields('node--article', ['title'])
const articles = await fetchDrupalResource<NodeCollection>('/node/article', { params })
```
## Local development
```bash
bun install
bun run dev
```
## Local Drupal server (for testing)
Start local Drupal + MariaDB:
```bash
docker compose -f docker-compose.local.yml up -d
```
Then open Drupal installer:
- `http://localhost:8081`
After installation:
1. Enable JSON:API module in Drupal (if not already enabled).
2. Create at least one Article content item.
3. Keep frontend env values on proxy mode (`http://localhost:5173` + `/drupal-api/jsonapi`).
Run frontend:
```bash
bun run dev
```
Your React app requests `/drupal-api/...` on the Vite dev server, and Vite proxies to Drupal at `http://localhost:8081`, avoiding browser CORS issues.
## Docker build and run
Pass Drupal variables at build time (Vite injects `VITE_*` during build):
```bash
docker build \
--build-arg VITE_DRUPAL_BASE_URL=https://cms.example.com \
--build-arg VITE_DRUPAL_API_PREFIX=/jsonapi \
--build-arg VITE_DRUPAL_AUTH_TOKEN=your-token \
-t vite-portfolio:latest .
docker run --rm -p 8080:80 vite-portfolio:latest
```
## CI/CD deployment (GitHub Actions + Docker Swarm)
The workflow in `.github/workflows/docker_build.yml` now forwards Drupal settings to Docker build args.
Set these in your GitHub repository before deploying:
- Repository variable: `VITE_DRUPAL_BASE_URL`
- Repository variable: `VITE_DRUPAL_API_PREFIX` (optional)
- Repository variable: `PORTFOLIO_HOST` (domain Traefik should match, for example `portfolio.example.com`)
- Repository variable: `TRAEFIK_NETWORK` (defaults to `traefik-public`)
- Repository variable: `TRAEFIK_ENTRYPOINTS` (defaults to `web`, use `websecure` for TLS entrypoint)
- Repository secret: `DRUPAL_DB_PASSWORD`
- Repository secret: `MARIADB_ROOT_PASSWORD`
Note: `VITE_*` values are embedded into frontend build output. Do not place private credentials in `VITE_*` variables.
The `web` service is routed by Traefik (no direct host port publish on the app service). Your host Nginx can continue acting as the public reverse proxy by forwarding to Traefik's exposed entrypoint(s).
Before first deploy, ensure the external Traefik overlay network exists in Swarm:
```bash
docker network create --driver overlay traefik-public
```
Existing deploy flow:
1. Build and push image to GHCR on `main`
2. SSH to the remote host
3. `docker stack deploy -c docker-stack.yml vite-portfolio`
|
