React Docker and CI

Introduction

Ship React dist/ behind Nginx in a Docker image, optionally with FastAPI in docker compose. Add GitHub Actions for npm run build and npm test—linked to Git CI.

Prerequisites

Build, Preview, and Deploy
Linux Docker introduction

Parallel: Vue Docker and CI.

Multi-Stage Dockerfile

dockerfile

bash

docker build -t hello-react --build-arg VITE_API_URL=/api .
docker run -p 8080:80 hello-react

Nginx SPA Fallback

nginx

docker compose

yaml

Tip

VITE_* vars bake in at build time—rebuild web when API URL changes, or use /api + proxy.

GitHub Actions

yaml

.dockerignore

dockerignore

node_modules/
dist/
.git/
.env
.env.*
coverage/

FAQ

Why nginx not node at runtime?

After npm run build, only static files need serving.

Monorepo path?

Set working-directory in CI to React app folder.

E2E in CI?

Add Playwright job after build—optional.

Next chapter?

React Troubleshooting.