Web Dev Productivity

Web Dev Productivity: Automating Builds with GitHub Actions + Docker + Spring Boot + React

This guide shows how to automate your full-stack web app pipeline using GitHub Actions, Docker, Spring Boot, and React. From build and test to deployment—streamline your workflow with CI/CD best practices.

1. Project Structure

• /backend – Spring Boot application
• /frontend – React app
• docker-compose.yml – orchestrates services
• .github/workflows/ci-cd.yml – GitHub Actions pipeline

2. Dockerize Spring Boot & React

Create Dockerfiles in each module:

2.1 Backend: /backend/Dockerfile

FROM openjdk:17-jdk-slim
WORKDIR /app
COPY mvnw ./
COPY .mvn .mvn
COPY pom.xml .
COPY src src
RUN ./mvnw package -DskipTests
ENTRYPOINT ["java","-jar","target/myapp.jar"]

2.2 Frontend: /frontend/Dockerfile

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY src src
RUN npm run build
FROM nginx:alpine
COPY --from=0 /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx","-g","daemon off;"]

3. Define docker-compose.yml

version: "3.8"
services:
  backend:
    build: ./backend
    ports:
      - "8080:8080"
  frontend:
    build: ./frontend
    ports:
      - "3000:80"

Run `docker-compose up --build` to launch both services locally.

4. GitHub Actions CI/CD Pipeline

Create YAML workflow at .github/workflows/ci-cd.yml:

name: CI/CD Pipeline

on:
  push:
    branches: [main]

jobs:
  build_and_test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Set up JDK 17
        uses: actions/setup-java@v3
        with:
          distribution: 'temurin'
          java-version: '17'

      - name: Build & Test Backend
        working-directory: backend
        run: ./mvnw test

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Build Frontend
        working-directory: frontend
        run: npm install && npm run build

  docker_build_and_push:
    needs: build_and_test
    runs-on: ubuntu-latest
    environment: production
    steps:
      - uses: actions/checkout@v3

      - name: Log in to Docker Hub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKERHUB_USER }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Build and Push Backend Image
        working-directory: backend
        uses: docker/build-push-action@v4
        with:
          context: ./backend
          tags: youruser/backend:latest

      - name: Build and Push Frontend Image
        working-directory: frontend
        uses: docker/build-push-action@v4
        with:
          context: ./frontend
          tags: youruser/frontend:latest

5. Configure GitHub Secrets

• DOCKERHUB_USER and DOCKERHUB_TOKEN – for pushing images
• Optional: SSH_KEY or cloud-specific credentials for deployment

6. Deployment Options

Use one of these for production:

• Docker Compose on VPS: Pull latest images and restart.
• Kubernetes: Create manifests/deploy via Helm.
• Managed services: AWS ECS, Google Cloud Run.

7. Best Practices & Tips

• Cache dependencies in CI to speed up builds.
• Add mvn test and linting for frontend.
• Use versioned Docker tags (e.g., `backend:1.0.0`) instead of `latest` in production.
• Set up health checks and monitors.

Summary

You've built a robust CI/CD pipeline that builds, tests, containers, and deploys your full-stack Spring Boot + React application automatically—every time you push to main. Productivity, reliability, and consistency — all achieved with GitHub Actions and Docker.

Coming next: automated database migrations, staging environments, and canary deployments!