How to deploy React app with Traefik and Spaces CDN

Hi there,

You are interested in running this setup on a single Droplet rather than the App Platform, is that correct?

If so, deploying a React app with Traefik in a Docker environment involves several steps. Since you also want to integrate it with DigitalOcean Spaces CDN, let’s break this down step by step:

1. Build and Serve the React App with Docker:

You can use a multi-stage Docker build for this. Create a Dockerfile in the root of your React project:

# Stage 1: Build the React application
FROM node:18 AS build

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . ./
RUN npm run build

# Stage 2: Serve the React application with Nginx
FROM nginx:alpine

COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. Configure Traefik to Serve the React App:

You’ll want to configure Traefik using docker-compose. Here’s a simple example of what your docker-compose.yml file might look like, the example is based on the official documentation here:

https://doc.traefik.io/traefik/user-guides/docker-compose/basic-example/

Example:

version: '3'

services:
  reverse-proxy:
    image: traefik:v2.10
    command:
      - "--api.insecure=true"
      - "--providers.docker=true"
      - "--entrypoints.web.address=:80"
    ports:
      - "80:80"
      - "8080:8080" # For Traefik dashboard
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock

  react-app:
    build:
      context: .
      dockerfile: Dockerfile
    labels:
      - "traefik.http.routers.react-app.rule=Host(`yourdomain.com`)"
      - "traefik.http.routers.react-app.entrypoints=web"

3. Using DigitalOcean Spaces CDN to Serve Static Assets:

1. Build and upload your assets: Once you’ve run npm run build, your static assets will be in the build folder. You’ll want to upload this to a Space on DigitalOcean.

2. Set up a CDN: Enable the CDN for your Space. Once enabled, you’ll get a new endpoint for your Space which looks something like https://<space-name>.<region>.cdn.digitaloceanspaces.com.

3. Configure your React app to use the CDN: In your React application, whenever you refer to a static asset, instead of a local path, use the CDN URL. For dynamic imports or asset loading in your JavaScript, you’d need to adjust your code to prefix asset URLs with your Spaces CDN URL.

4. CORS: Make sure CORS is set up correctly on your Space to allow requests from your domain. This is essential if your React app makes direct requests to the Space (e.g., fetching assets or images):

https://docs.digitalocean.com/products/spaces/how-to/configure-cors/

5. Cache-Control Headers: When you upload assets to your Space, consider setting Cache-Control headers to ensure that CDNs and browsers cache your assets for optimal performance.

Also, while Spaces CDN is great for static assets (images, stylesheets, scripts), your React application’s HTML itself will likely be served directly from the Docker container via Traefik.

Hope that this helps!

Best,

Bobby