Running react app with router

Help
1

Hello, i have a react app that will be running on digital ocean droplet ubuntu using docker.

2. How I run Caddy:

Caddy is spin off with the docker images by running docker-compose up --build

a. System environment:

Docker/ubuntu

b. Command:

To run the app i run docker-compose which start docker and caddy

docker-compose up --build

c. Service/unit/compose file:

version: '3.7'
services:
  cityhall_client:
    container_name: cityhall_client
    restart: unless-stopped
    build:
        context: ./ 

  caddy:
    image: caddy/caddy:2.2.1-alpine
    container_name: caddy-service_clients
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
    volumes:
    - $PWD/Caddyfile:/etc/caddy/Caddyfile
    - $PWD/site:/srv
    - caddy_data:/data
    - caddy_config:/config

volumes:
  caddy_data:
  caddy_config:

d. My complete Caddyfile or JSON config:

city-hull.com {
    encode gzip zstd
    try_files {path} {path}/ /index.html. // not sure  
    reverse_proxy cityhall_client:3000 {
        header_down Strict-Transport-Security max-age=31536000;
    }
}

3. The problem I’m having:

the issue am having is that my app is not been serve in the browser when i visit the website. From the logos, i can see that the app is running.

I am not sure why it seems am not providing the right path of the html.
each time i visited the website caddy log error as shown below

4. Error messages and/or full log output:

´´´
{"level":"error","ts":1646382796.0507452,"logger":"http.log.error","msg":"dial tcp 172.18.0.3:3000: connect: connection refused","request":{"remote_addr":"83.243.138.106:53840","proto":"HTTP/2.0","method":"GET","host":"city-hull.com","uri":"/","headers":{"Sec-Fetch-User":["?1"],"Sec-Fetch-Dest":["document"],"Accept-Encoding":["gzip, deflate, br"],"Upgrade-Insecure-Requests":["1"],"Accept":["text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9"],"Sec-Gpc":["1"],"Sec-Fetch-Site":["none"],"User-Agent":["Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36"],"Sec-Fetch-Mode":["navigate"],"Accept-Language":["en-GB,en-US;q=0.9,en;q=0.8"]},"tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","proto_mutual":true,"server_name":"city-hull.com"}},"duration":0.015822865,"status":502,"err_id":"iy4wnkni1","err_trace":"reverseproxy.statusError (reverseproxy.go:886)"}

5. What I already tried:

I have tried changing the Caddyfile based on different source

6. Links to relevant resources:

source 1

source 2

source 3

2

That’s a pretty old version. Please upgrade to v2.4.6.

Also, don’t use caddy/caddy, use the caddy instead. The caddy/caddy image is not the official image, it’s just the CI target we use for testing.

try_files only works if Caddy has access to the static files itself. What it does is look for files on disk (which need to be inside your Caddy container, and you need to define a root for Caddy to know where to look).

But the error you’re getting is a networking problem. Caddy isn’t able to connect to your other container. Are you sure it’s listening on port 3000?

3

Thanks @francislavoie for quick reply.
I have ready upgrade it v2.4.6.

Thanks @francislavoie for quick reply.
I have ready upgrade it v2.4.6.

I will change that.

For a site that uses router for different pages, how does it handle it or how should it set it up ?

I didnt do any newtwork confih except from enable firewall and allowing ssh, http, https, etc but my app was setup to run on localhost:3000.

4

Well, localhost and cityhall_client are not the same thing. Are you sure your cityhall_client container is properly set up and running your nodejs app?

It entirely depends on the app you’re serving. If it’s fully static and you output a build to files, then you wouldn’t be using reverse_proxy but instead use file_server to serve your files.

5

I have to look into then

6

This topic was automatically closed after 30 days. New replies are no longer allowed.