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

时间:2018-07-12 14:30:38

标签: docker nginx docker-compose dockerfile nginx-reverse-proxy

我真的很希望有人可以为我提供帮助,因为我在这个问题上坚持了一个多星期。我是Docker和Nginx的初学者,似乎无法正确配置我的配置。

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

  • localhost /应该将请求发送到前端容器
  • localhost / api / email应该将请求发送到后端容器(这些请求显然来自前端)
  • 稍后,我们想添加更多网站和api,以供反向代理服务

当我使用Postman通过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

前端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

任何帮助,建议或建议,将不胜感激。

1 个答案:

答案 0 :(得分:1)

如果要从其他容器中访问容器IP,则应使用其实际侦听的端口,因此请在80中使用nginx.conf而不是8080

发布的端口将在接口的docker接口桥接器上起作用。