使用 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

所以，我的问题是，经过大量的试错，大量的bug搜索，添加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-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