Unable to deploy create-react-app in Docker -- caddy reverse_proxy and auto https

Question

I have a very easy task of setting up reverse_proxy for services defined in docker-composse.yml with Caddy v2. Everything is working as expected, except for some reason I cannot seem to serve the build assets from create-react-app from any kind of Docker container.

I've tried both the following in the Dockerfile:

FROM nginx:alpine
COPY ./build /usr/share/nginx/html

FROM node:14-alpine

COPY ./build /app
COPY ./npm-shrinkwrap.json /app/.
COPY ./package.json /app/.

WORKDIR /app
RUN npm install -g serve && npm ci
CMD [ "serve", "-s", "/app", "-l", "80" ]

Note that in both cases I am able to connect through SSL without any issues at the network level. In both cases, I get a blank white screen with the error Manifest: Line: 1, column: 1, Syntax error. showing in the console. This error is reported on manifest.json, which is completely blank. I have verified the same file in the container has the expected content at the right location, so something must be preventing it from loading.

I have no idea where to even start. There seems to be something fishy going on down there I'm not privy to, which is never a good sign. Caddy simply reports 200 for the successful GET on index.html. The file is actually loading in the browser, it just has no content.

https://my-app.watheia.dev/

If this isn't just some obvious thing I'm missing than I will post up a fully working example project, but for debugging I started with the default output from create-react-app and just added the Dockerfile, docker-compose.yml, and Cadyfile.

{
    # Global options block. Entirely optional, https is on by default
    # Optional email key for lets encrypt
    email [email protected]
    # Optional staging lets encrypt for testing. Comment out for production.
    # acme_ca https://acme-staging-v02.api.letsencrypt.org/directory
}

my-app.watheia.dev {
  reverse_proxy / my-app:80
}

version: "3.1"

services:
  caddy:
    image: caddy/caddy:2.2.1-alpine
    container_name: caddy-service
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
    volumes:
      # from project root
      - cady/Caddyfile:/etc/caddy/Caddyfile
      # These start out empty and fil with cache data
      - caddy/data:/data
      - caddy/config:/config

  my-app:
    build: .
    hostname: my-app.watheia.dev
    container_name: my-app
    depends_on:
      - caddy

PS: Running serve -s ./build -l 8080 from host system works as expected, only without SSL support.

PPS: My knowledge gap here is mostly on create-react-app. This is the first time I've attempted to deploy one beyond localhost.

Answer 1

Whoops, silly me!

I was only proxying the / path. Duh! I must have overlooked it a thousand times. It should be:

my-app.watheia.dev {
  reverse_proxy my-app:80
}