使用Docker Compose在Docker中運行React無法正常工作

Question

我正在嘗試使用Docker和Docker Compose運行create-react-app應用程序。 我有以下文件：

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;
    }
}

另外，我具有以下文件結構：

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

因此，我的問題是，經過大量的試驗和錯誤，大量的錯誤搜索，添加了nginx，刪除了nginx等之后，我終於得到了從上述配置開始的容器。

我現在的問題是，當我嘗試訪問http：// localhost或http：// localhost：3000時 ，什么都沒有顯示。 我看到“無法訪問此站點”頁面，顯示錯誤代碼“ ERR_CONNECTION_REFUSED”。

所以我檢查容器是否正在使用docker ps -a運行。 我看到以下內容：

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

顯然，如果nginx停留在重新啟動過程中並且應用程序甚至沒有運行，我將無法到達頁面。

有人知道我可能做錯了嗎？

編輯＃1： docker logs 3f372bdaff3d顯示了很多重復

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

這對我沒有任何意義，但是也許您可以幫助我。

編輯＃2：從docker-compose.yml刪除ports部分（但保持expose部分）並重寫nginx.conf （我不需要負載平衡器）后看起來像

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

我讓nginx容器運行時沒有任何錯誤，但是現在我陷入了重啟應用容器的困境。 docker logs [app_id]沒有顯示任何內容。 有任何想法嗎？

Answer 1

我的解決方案是刪除nginx容器，而是在應用程序容器內運行nginx（靈感來自https://medium.com/@tiangolo/react-in-docker-with-nginx-built-with-multi-stage-docker-構建包括測試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