Reactjs Nginx、Docker和Docker组合

我正试图为个人博客建立一个微服务架构

其想法是让一个NGINX容器为静态gatsby站点提供服务，并重定向到其他服务。例如，我希望在/todos上有一个react应用程序，在/todos_api上有一个用于该todo应用程序的api

我当前的文件夹结构如下所示：

version: "3"

services:
  gatsby:
    restart: always
    build:
      dockerfile: Dockerfile
      context: ./gatsby_blog
    ports:
      - "80:80"
  todoclient:
    build:
      dockerfile: Dockerfile
      context: ./portfolio/todos/todo_client

upstream todoclient {
  server todoclient:3000;
}

server {
  listen 80;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
  }

  location /todos {
      rewrite /todos/(.*) /$1 break;
      proxy_pass http://todoclient;
  }
}

server {
  listen 3000;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
  }
}

• docker-compose.yml
• 盖茨比博客
  • （包含生成文件夹）
  • nginx
    • default.conf（这是我的主要nginx条目）
• 投资组合
  • 待办事项
    • 待办事项客户
      • nginx
        • default.conf（这仅用于提供react应用程序）
    • todo_api

我的docker compose文件如下所示：

version: "3"

services:
  gatsby:
    restart: always
    build:
      dockerfile: Dockerfile
      context: ./gatsby_blog
    ports:
      - "80:80"
  todoclient:
    build:
      dockerfile: Dockerfile
      context: ./portfolio/todos/todo_client

upstream todoclient {
  server todoclient:3000;
}

server {
  listen 80;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
  }

  location /todos {
      rewrite /todos/(.*) /$1 break;
      proxy_pass http://todoclient;
  }
}

server {
  listen 3000;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
  }
}

我的主要Gatsby nginx文件如下所示：

version: "3"

services:
  gatsby:
    restart: always
    build:
      dockerfile: Dockerfile
      context: ./gatsby_blog
    ports:
      - "80:80"
  todoclient:
    build:
      dockerfile: Dockerfile
      context: ./portfolio/todos/todo_client

upstream todoclient {
  server todoclient:3000;
}

server {
  listen 80;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
  }

  location /todos {
      rewrite /todos/(.*) /$1 break;
      proxy_pass http://todoclient;
  }
}

server {
  listen 3000;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
  }
}

我的React nginx配置如下：

version: "3"

services:
  gatsby:
    restart: always
    build:
      dockerfile: Dockerfile
      context: ./gatsby_blog
    ports:
      - "80:80"
  todoclient:
    build:
      dockerfile: Dockerfile
      context: ./portfolio/todos/todo_client

upstream todoclient {
  server todoclient:3000;
}

server {
  listen 80;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
  }

  location /todos {
      rewrite /todos/(.*) /$1 break;
      proxy_pass http://todoclient;
  }
}

server {
  listen 3000;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
  }
}

我非常确定的问题是我的nginx配置。当我转到localhost时，会遇到gatsby应用程序，但如果我转到/todos，就会出现nginx错误。我可以看到请求已正确传递到todoclient容器，但返回的错误是：

open（）“/usr/share/nginx/html/todos”失败（2：没有这样的文件或目录

如果有人能看到我在nginx配置上的错误，我会非常感激。如果需要，我也可以发布我的DockerFile。 谢谢

编辑

---

我现在已经设法让代理工作，但问题是todos应用程序找不到它的静态文件。它们在容器中的正确位置，容器独立工作，因此问题在于docker compose和nginx代理。

为angular完成了此操作。nginx文件应替换/etc/nginx/nginx.c中的文件并将todos文件夹（假设有静态页面）放在/usr/share/nginx/html中

http {


    server {
        listen 80;
        server_name  localhost;

        root   /usr/share/nginx/html;
        include /etc/nginx/mime.types;


        location /todos {
            alias /usr/share/nginx/html/todos/;
            absolute_redirect off;
            rewrite ^(.+)/todos/+$ $1 permanent;
            rewrite ^(.+)/todos/index.html$ $1 permanent;    


            try_files $uri$args $uri$args/ $uri/ /todos/index.html;

        }

    }
}

---

谢谢-我发现我的问题是后面的斜杠…但是现在我的Javascript得到了404，尽管它在正确的位置。我会试试你的配置，谢谢