nginx angular 5 反向代理 mongo 图片

Question

我能够让反向代理为我的 angular 5 项目工作。使用以下文件。我对 Angular 和 nginx 很陌生。在我 docker 化客户端和 nginx 等之前，我只是将所有东西都安装在一个路径下。所以我只运行一个 npm 安装，我使用 npm start、ng build --prod 和 ng serve。

我只是对 Angular2 版本 5 有点困惑，我以为我试图将客户端与服务器分开。知道 Angular 2 运行客户端的大多数事情。但是现在看起来我的 app.js 仍在同一个 'client' 容器中被调用。我是否应该将 express 服务器分离并容器化？这样做有什么好处？

我还要从容器中运行 mongo 图像。我将客户端容器链接到 mongo 是否正确？

nginx default.conf

   server {
location / {
        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-Proto $scheme;
        proxy_pass http://client:4200/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
   }
}

docker-compose.yml

   version: '2'

services:
  # Build the container using the client Dockerfile
   client:
   build: ./
  # This line maps the contents of the client folder into the container.
   volumes:
    - ./:/usr/src/app
    links:
     - mongo
    depends_on:
    - mongo
  mongo:      
    image: mongo
    container_name: "mongodb"
    environment:           
    - MONGO_DATA_DIR=/data/db
    - MONGO_LOG_DIR=/dev/null
   volumes:
    - ./data/db:/data/db
   ports:
    - 27017:27017
   command: mongod --smallfiles --logpath=/dev/null # --quiet
  # Build the container using the nginx Dockerfile
 nginx:
  build: ./nginx
   # Map Nginx port 80 to the local machine's port 80
  ports:
    - "80:80"
   # Link the client container so that Nginx will have access to it
  links:
    - client

Docker 文件

  #  Create a new image from the base nodejs 7 image.
 FROM node:8.1.4-alpine as builder
 # Create the target directory in the imahge
 RUN mkdir -p /usr/src/app
 # Set the created directory as the working directory
 WORKDIR /usr/src/app
# Copy the package.json inside the working directory
 COPY package.json /usr/src/app
 # Install required dependencies
 RUN npm install 
 # Copy the client application source files. You can use .dockerignore
 to     exlcude files. Works just as .gitignore does.
 COPY . /usr/src/app
 # Open port 4200. This is the port that our development server uses
 EXPOSE 3000
 # Start the application. This is the same as running ng serve.
 CMD ["npm", "start"]

Answer 1

即使您运行将您的客户端（angular）和服务器（节点）放在同一个容器中，它们仍然是"separate"。它们物理上位于同一台服务器上并提供服务，但运行分开。您在节点上的 api 层运行和客户端上的 angular 应用程序运行。

你所拥有的是有效的。我有几乎相同的设置。我有 2 个容器。运行表示服务于我的 api 层和我的 angular 应用程序的节点容器。然后我将 mongo 容器作为数据库。

nginx angular 5 反向代理 mongo 图片

nginx angular 5 reverse-proxy mongo image

reverse-proxy

mongodb

docker

angular