Question

How to deploy React app with Traefik and Spaces CDN

I would typically run a Nginx server and point the root to the output of npm run build. However for my current project, I’m using the Docker image for Traefik to handle requests on port 443 and 80 instead along with docker-compose to bring up my microservices. How do I get the Traefik container to serve my React app? I’m able to get my React app to run with the DigitalOcean Apps feature, but I cannot get Apps to run my docker-compose.

Also how do I use Spaces CDN to serve my npm run build folder?


Submit an answer


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

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/

  1. 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

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel