docker - 如何将 Nginx 容器连接到我的 React 容器？

Question

我已尝试阅读此处的其他 stackoverflow 问题，但我要么遗漏了某些东西，要么没有一个对我有用。
语境
我在运行 Ubuntu 的 DigitalOcean 服务器上设置了两个 docker 容器。root_frontend_1 running on ports 0.0.0.0:3000->3000/tcp
root_nginxcustom_1 running on ports 0.0.0.0:80->80/tcp如果我连接到 http://127.0.0.1 , 我得到默认的 Nginx index.html主页。如果我 http://127.0.0.1:3000我正在获取我的 react 应用程序。
我想要完成的是在我访问 http://127.0.0.1 时获取我的 react 应用程序.按照 StackOverflow 上的文档和建议，我有以下内容:docker-compose.yml在我的 DigitalOcean 服务器的根目录中。

version: "3"
services:
  nginxcustom:
    image: nginx
    hostname: nginxcustom
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/root/nginxcustom/conf/custom.conf
    tty: true

  backend:
    build: https://github.com/Twitter-Clone/twitter-clone-api.git
    ports:
      - "8000:8000"
    tty: true

  frontend:
    build: https://github.com/dougmellon/react-api.git
    ports:
      - "3000:3000"
    stdin_open: true
    tty: true

nginxcustom/conf/custom.conf :

server {
 listen 80;
 server_name http://127.0.0.1;

  location / {
    proxy_pass http://root_frontend_1:3000; # this one here
    proxy_redirect off;
  }
}

当我运行 docker-compose up ，它构建但是当我访问我的服务器的 ip 时，它仍然显示默认的 nginx html 文件。
问题
我在这里做错了什么，我怎样才能让主 URL 指向我的 react 容器？
感谢您抽出宝贵时间，如果有什么我可以添加的内容，请随时提出。

Answer 1

TL;博士;nginx服务应该 proxy_pass 服务名称 ( customnginx )，而不是容器名称 ( root_frontend_1 ) 和 nginx config 应该安装到容器内的正确位置。
提示 :容器名称可以在docker-compose.yml中设置用于设置 container_name 的服务然而当心你不能 --scale 固定服务container_name .
提示 : 容器名称 ( root_frontend_1 ) 使用 compose project name which defaults to using the current directory name if not set 生成.
提示 : nginx 图片默认打包/etc/nginx/nginx.conf那将include /etc/nginx/conf.d/default.conf 中的默认服务器配置.您可以 docker cp 容器中的默认配置文件，如果您想检查它们或将它们用作您自己配置的基础:

docker create --name nginx nginx
docker cp nginx:/etc/nginx/conf.d/default.conf default.conf
docker cp nginx:/etc/nginx/nginx.conf nginx.conf
docker container rm nginx

与 nginx frontend 的代理连接服务 we don't need to bind the hosts port to the container , 服务 ports定义可以替换为 expose防止直接连接到 http://159.89.135.61:3000 的定义(取决于 backend 您可能还想阻止直接连接):

version: "3"
services:
  ...
  frontend:
    build: https://github.com/dougmellon/react-api.git
    expose:
      - "3000"
    stdin_open: true
    tty: true

更进一步，我们可以配置 upstream 为了 frontend服务然后配置 proxy_pass对于 upstream :

upstream frontend {
  server frontend:3000 max_fails=3;
}
server {
  listen 80;
  server_name http://159.89.135.61;

  location / {
    proxy_pass http://frontend/;
  }
}

... 然后 bind-mount定制 default.conf在 default.conf 之上容器内:

version: "3"
services:
  nginxcustom:
    image: nginx
    hostname: nginxcustom
    ports:
      - "80:80"
    volumes:
      - ./default.conf:/etc/nginx/conf.d/default.conf
    tty: true

... 最后是 --scale我们的 frontend服务(反弹删除容器的服务以确保对配置的更改生效):

docker-compose stop nginxcustom \
&& docker-compose rm -f \
&& docker-compose up -d --scale frontend=3

docker将服务名称解析为 3 个 frontend 的 IP nginx 的容器将以(默认)循环方式代理连接。
提示 : 你不能 --scale具有 ports 的服务映射，只有单个容器可以绑定(bind)到端口。
提示 :如果您已经更新了配置并且可以连接到负载平衡服务，那么您就可以创建一个 DNS 记录来将主机名解析为您的公共(public) IP 地址，然后更新您的 default.conf的 server_name .
提示 :为了安全 I maintain specs for building a nginx docker image 与 Modsecurity和 Modsecurity-nginx使用 OWASP Core Rule Set 预烘焙.