我正在尝试使用 docker-compose 来运行 2 个容器 - 一个示例 react 应用程序和一个 nginx 作为反向代理。
我跑了npx create-react-app react-app
创建第一个容器,并将以下 Dockerfile 添加到文件夹中 -
FROM node
RUN yarn global add serve
WORKDIR /usr/src/app
COPY package.json yarn.lock ./
RUN yarn
COPY . ./
RUN yarn build
CMD serve -s build
然后我继续在
./nginx
下创建以下 nginx 配置文件——server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
location /react {
proxy_pass http://react:5000;
}
}
最后,我创建了这个
docker-compose.yaml
项目根目录中的文件 -version: '3'
services:
nginx:
image: nginx:latest
container_name: production_nginx
volumes:
- ./nginx/default.conf:/etc/nginx/conf.d/default.conf
ports:
- 80:80
- 443:443
react:
build: ./react-app
container_name: react-app
expose:
- "5000"
ports:
- 5000:5000
然后我使用
docker-compose up --build
启动我的堆栈,但是当我使用 http://localhost/react
时路径 我在 nginx 访问日志中收到以下错误 -eact-app | INFO: Accepting connections at http://localhost:5000
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /react HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 2020/01/29 18:24:29 [error] 7#7: *1 open() "/usr/share/nginx/html/static/css/main.d1b05096.chunk.css" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/css/main.d1b05096.chunk.css HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /static/css/main.d1b05096.chunk.css HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /static/js/2.250dc4af.chunk.js HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /static/js/main.de4c6317.chunk.js HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 2020/01/29 18:24:29 [error] 7#7: *4 open() "/usr/share/nginx/html/static/js/2.250dc4af.chunk.js" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/js/2.250dc4af.chunk.js HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
production_nginx | 2020/01/29 18:24:29 [error] 7#7: *3 open() "/usr/share/nginx/html/static/js/main.de4c6317.chunk.js" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/js/main.de4c6317.chunk.js HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
production_nginx | 2020/01/29 18:24:29 [error] 7#7: *5 open() "/usr/share/nginx/html/manifest.json" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /manifest.json HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /manifest.json HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 2020/01/29 18:24:34 [error] 7#7: *3 open() "/usr/share/nginx/html/static/js/2.250dc4af.chunk.js" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/js/2.250dc4af.chunk.js HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:34 +0000] "GET /static/js/2.250dc4af.chunk.js HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:34 +0000] "GET /static/js/main.de4c6317.chunk.js HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
production_nginx | 2020/01/29 18:24:34 [error] 7#7: *4 open() "/usr/share/nginx/html/static/js/main.de4c6317.chunk.js" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/js/main.de4c6317.chunk.js HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
在我看来,nginx 正在 nginx 容器中寻找 Reacts 静态 Assets ,但我不确定它为什么不将这些请求代理到 react 容器。知道如何解决这个问题吗?
最佳答案
我没有使用 nginx 反向代理到我的前端。仅用于将来自我的前端的请求连接到我的服务器。相反,您可以尝试托管您的 react-app
直接通过nginx。这是我这样做的一种方法。
我没有运行两个容器,而是设置了一个 Dockerfile
在我的 react-app
的根目录中. Dockerfile
对 react 应用程序进行生产构建,然后将其复制到 nginx 中以托管在 /
nginx 配置中的路由。这就是那个文件的样子。
# Frontend build based on Node.js
FROM node:11.12.0-alpine as build-stage
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install
RUN npm install react-scripts@latest -g
COPY . /usr/src/app
#RUN CI=true npm test
RUN npm run build
# Stage 1
# Production build based on Nginx with artifacts from Stage 0
FROM nginx:1.15.9-alpine
COPY config/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
在
react-app
的根我也有 config
目录。在该目录中,我有 nginx.conf
看起来像这样的文件。server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri /index.html;
}
# redirect server error pages
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
由于在第一步中将前端构建复制到 nginx 中,因此它现在可以在自己的文件系统中找到构建目录。之后,您可以在容器中构建和运行镜像,一切都应该正确构建。我认为此时您所要做的就是移动您的
docker-compose.yml
文件放入 react-app
root,去掉 react
服务,更改 image: nginx:latest
至 build: .
并运行 docker-compose up -d
.您也可以放弃 compose
并通过运行 docker build -t react-app
来使用 docker在构建之后,运行 docker run -d -p 80:80 react-app
在 react-app
的根目录。这是一种非常简单的入门方法,可能不是您想要的。希望它有帮助。
关于reactjs - 在 docker-compose 上使用 nginx 代理 React 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59973882/