使用Docker Compose在Docker中运行React无法正常工作

Question

I am trying to run a create-react-app application using Docker and Docker Compose. I have the following files:

docker-compose.yml:

version: '3'

services:
    app:
        restart: always
        build: .
        expose:
            - "3000"
        ports:
            - "3000:3000"
        volumes:
            - .:/app
    nginx:
        restart: always
        image: "nginx:latest"
        ports:
            - "3000:80"
        depends_on:
            - app
        volumes:
            - ./:/app
            - ./nginx.conf:/etc/nginx/nginx.conf

Dockerfile:

FROM node:11.2-alpine
#Setting the working directory as /app
WORKDIR /app
#Copying package.json to Docker Image
COPY package.json /app
#Installing all dependencies.
RUN npm install
COPY . /app
RUN npm run build --production

nginx.conf:

upstream client_LB {
    server web:3000;
}
server {
    listen 80;
    location / {
        proxy_pass         http://client_LB;
        proxy_redirect     off;
        proxy_set_header   Host $host;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Host $server_name;
    }
}

Also, I have the following file structure:

my-project
|- .git
|- node_modules
   |- [node modules]
|- public
   |- images
   |- favicon.ico
   |- index.html
   |- manifest.json
|- src
   |- [src files]
|- .dockerignore
|- .editorconfig
|- .env
|- .env.production
|- .gitignore
|- docker-compose.yml
|- Dockerfile
|- gitlab-ci.yml
|- nginx.conf
|- package.json
|- package-lock.json
|- README.md
|- yarn.lock

So, my problem is that after a lot of trial and error, a lot of bug searches, adding nginx, removing nginx and so on, I finally got the containers to start with the above configurations.

My problem now is that when I try to go to either http://localhost or http://localhost:3000 , nothing shows up. I see the "This site can't be reached" page with the "ERR_CONNECTION_REFUSED" error code.

So I check if the containers are running using docker ps -a . I see the following:

3f372bdaff3d        nginx:latest              "nginx -g 'daemon of…"   17 minutes ago      Restarting (1) 1 second ago                                       my-project_nginx_1
3252f7ce0283        my-project_app            "node"                   17 minutes ago      Exited (0) 17 minutes ago                                         my-project_app_1

Obviously I can't reach the page if nginx is stuck in restarting and the app isn't even running.

Does anyone know what I might be doing wrong?

EDIT #1: docker logs 3f372bdaff3d shows a lot of repeated

2019/09/18 09:00:05 [emerg] 1#1: "upstream" directive is not allowed here in /etc/nginx/nginx.conf:1
nginx: [emerg] "upstream" directive is not allowed here in /etc/nginx/nginx.conf:1

which does not mean anything to me, but maybe you can help me.

EDIT #2: After removing ports section from docker-compose.yml (but keeping expose section) and rewriting nginx.conf (I don't need a load balancer) to look like

events { }
http {
  server {
    listen 80;
    root /app/build;
    index index.html;
    location / {
      try_files $uri /index.html;
    }
  }
}

I get the nginx container to run without any errors, but now I'm stuck with the app container restarting instead. docker logs [app_id] doesn't show anything. Any ideas?

Answer 1

My solution was to remove the nginx container and instead run nginx inside the app container (inspired by https://medium.com/@tiangolo/react-in-docker-with-nginx-built-with-multi-stage-docker-builds-including-testing-8cc49d6ec305 )

docker-compose.yml:

version: '3'

services:
    app:
        restart: always
        build: .
        expose:
            - "80"
        ports:
            - "80:80"
        volumes:
            - .:/app

Dockerfile

# Stage 0, "build-stage", based on Node.js, to build and compile the frontend
FROM tiangolo/node-frontend:10 as build-stage

WORKDIR /app

COPY package*.json /app/

RUN npm install

COPY ./ /app/

RUN npm run build

# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
FROM nginx:1.15

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

# Copy the default nginx.conf provided by tiangolo/node-frontend
COPY --from=build-stage /nginx.conf /etc/nginx/conf.d/default.conf