Dockerized React app is unreachable

Questions / Help
1

My dockerized React app is unreachable on fly.dev. It has HTTPS enabled, and is running on port 5000. My Dockerfile looks like this:
FROM node:18-alpine
WORKDIR /app
COPY public/ /app/public
COPY src/ /app/src
COPY package.json /app
COPY package-lock.json /app
COPY .env /app
RUN npm install
EXPOSE 5000
CMD [“npm”, “start”]

I have the [env] set to
PORT = 5000
HTTPS = true
HOST = “0.0.0.0”

My fly.toml file has https enabled:
[http_service]
internal_port = 5000
force_https = true
auto_stop_machines = ‘stop’
auto_start_machines = true
min_machines_running = 1
processes = [‘app’]

When running the docker image locally it accepts https connections, and works fine. On fly.dev, it is not reachable.
curl -v output:

  • Request completely sent off
    < HTTP/2 502
    < server: Fly/d5165e6e2 (2024-12-18)
    < via: 2 fly.io
    < fly-request-id: 01JGT5CZKPYBSQR6E54XM7ETFX-den
    < date: Sun, 05 Jan 2025 02:41:11 GMT
    <
  • Connection #0 to host pcrgen.fly.dev left intact

I have no idea what to try next.
Anybody has any ideas?

Thanks.

2

Try turning off https, that gets terminated before it reaches your app anyways.

3

After a lot of research, I found a working solution, and I’ll post it here for when somebody else needs it. The trick was to use nginx, but that doesn’t work with React unless you add a nginx.conf file.

Dockerfile:
FROM node:18-alpine AS build

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

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD [“nginx”, “-g”, “daemon off;”]

nginx.conf:
http {

include mime.types;

set_real_ip_from 0.0.0.0/0;
real_ip_recursive on;
real_ip_header X-Forward-For;
limit_req_zone $binary_remote_addr zone=mylimit:10m rate=10r/s;

server {
listen 80;
server_name localhost;
root /proxy;
limit_req zone=mylimit burst=70 nodelay;

location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri /index.html;   
    }

error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}

}
}

events {}

4

I think you’re overcomplicating it. Just turn off https, there’s no need to do it on react layer.

5

I tried turning of HTTS and it didn’t work for me. Maybe I’ll try it again at some point in time because the simpler the solution the better, but for now, this is a working solution as well.

6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.