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

Question

我真的希望有人能帮助我，因为我在这个问题上已经坚持了一个多星期了。我是一个码头和Nginx初学者，只是似乎不能正确的配置。

基本上，我有3个码头容器运行- Nginx反向代理，节点JS后端和Vue JS前端。我对3集装箱系统有以下设想：

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

目前，当我使用邮递员通过localhost/api/email/send向后端发送请求时，它工作100%，电子邮件按预期发送，但我无法通过本地主机在浏览器中到达前端。

该错误如下：

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

前端文档：

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接口桥接器上工作。