无法访问包含 Vue JS 前端应用程序的 Docker 容器

Question

我真的希望有人可以帮助我，因为我已经被这个问题困扰了一个多星期。我是 Docker 和 Nginx 初学者，但似乎无法正确配置。

基本上我有 3 个 Docker 容器在运行——Nginx 反向代理、Node JS 后端和 Vue JS 前端。我对 3 容器系统有以下愿景：

• localhost/ 应该向前端容器发送请求
• localhost/api/email 应该向后端容器发送请求（这些请求显然来自前端）
• 在稍后阶段，我们希望添加更多网站和 api 由反向代理提供服务

当我使用 Postman 通过 localhost/api/email/send 向后端发送请求时，它可以 100% 工作，并且电子邮件按预期发送，但我无法到达我的前面- 通过 localhost 在浏览器中结束。

错误显示：

reverse-proxy         | 2018/07/12 14:35:55 [error] 5#5: *4 connect() failed (111: Connection refused) while connecting to upstream, client: 172.18.0.1, server: localhost,
request: "GET / HTTP/1.1", upstream: "http://172.18.0.2:8080/", host: "localhost"
reverse-proxy         | 172.18.0.1 - - [12/Jul/2018:14:35:55 +0000] "GET / HTTP/1.1" 502 575 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like
Gecko) Chrome/67.0.3396.99 Safari/537.36"

在这个阶段我非常绝望和渴望学习。有关详细信息，请参阅附件和配置。

反向代理 Dockerfile：

FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf

后端 Dockerfile：

FROM node:7
WORKDIR /email-api
COPY package.json /e-mail-api
RUN npm install
COPY . .
CMD node server.js
EXPOSE 8082

前端 Dockerfile：

FROM alpine:3.7
RUN apk add --update nodejs
RUN mkdir -p /var/www/html
WORKDIR /those-devs-website
COPY . .
RUN npm install
RUN npm run build
RUN cp -r dist/* /var/www/html
EXPOSE 8080

nginx.conf：

worker_processes 1;

events { worker_connections 1024; }

http {

    sendfile on;

    upstream email-api {
        server email-api:8082;
    }

    upstream those-devs-website {
        server those-devs-website:8080;
    }

    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;

    server {
        listen 80;
        server_name localhost;

        location / {
            proxy_pass         http://those-devs-website;
        }

        location /api/email/ {
            proxy_pass         http://email-api;
        }
    }
}

docker-compose.yml

version: '3'
services:

  email-api:
    container_name: email-api
    ports:
      - '8082:80'
    image: email-api

  those-devs-website:
    container_name: those-devs-website
    ports:
      - '8080:80'
    image: those-devs-website

  reverse-proxy: 
    container_name: reverse-proxy
    image: reverse-proxy
    ports:
      - '80:80'
    restart: always

我们将不胜感激任何帮助、建议或意见。

Answer 1

如果您从其他容器中访问容器 IP，那么您应该使用它实际侦听的端口，因此请在您的 nginx.conf 中使用 80 而不是 8080。

已发布的端口将适用于接口\s docker 接口桥接。