Question

我对nginx和docker有一个非常基本的了解。

我在反向代理中运行4个容器client / server / mongo / nginx。这有效，但我认为我在开发模式下设置了nginx， IE浏览器。类似于在服务中：4200以查看应用直播的任何更改。现在我没有看到，似乎我必须用docker-compose再次构建应用程序，这需要很长时间。

我在客户端Dockerfile中暴露了端口：4200，在服务器Dockerfile中暴露了3000。有没有办法在ng服务模式下使用NGINX（在我的package.json客户端，我从ng服务开始）但是当我用http://localhost打开网站时，我没有看到实时更改。当我通过端口4200打开应用程序时，我的网站无法正常工作，因为它试图通过端口3000上的端口4200到达我的服务器容器。使用nginx反向代理在ng服务模式下工作的正常设置是什么。有没有办法可以删除暴露端口：4200/3000（我认为避免使用nginx），以便ng服务在端口80到nginx上运行。

Dockerfile服务器

#  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/server
# Set the created directory as the working directory
WORKDIR /usr/src/server
# Copy the package.json inside the working directory
COPY package.json /usr/src/server
# 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/server
# Open port 3000. 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"]

Package.json服务器

 "scripts": {
    "start": "node bin/www.js",
    "ng": "ng",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "main": "bin/www.js",

Package.json客户端

"scripts": {
    "ng": "ng",
    "start": "ng serve -H 0.0.0.0",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

Dockerfile客户端

#  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 4200

# Start the application. This is the same as running ng serve.
CMD ["npm", "start"]

搬运工-compose.yml

version: '3'
 
services:

  nginx:
      build: ./nginx
    # Map Nginx port 80 to the local machine's port 80
      volumes:
        - ./dist:/usr/share/nginx/html
      ports:
        - "80:80"
        - "443:443"
      depends_on: 
        - client
 
   # 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
      ports:
        - "4200:4200"
     

  myserver:
      build: ./express-server
      volumes:
        - ./express-server:/usr/src/server
      environment:
        - NODE_ENV=development
      ports:
        - "3000:3000"
     
    
    # Link the client container so that Nginx will have access to it
  mongo:
      environment:
        - AUTH=yes
        - MONGO_INITDB_ROOT_USERNAME=superAdmin
        - MONGO_INITDB_ROOT_PASSWORD=admin123
      
      image: mongo
      volumes:
        - /var/mongodata/data:/data/db
      depends_on:
        - myserver
      ports:
        - "27017:27017"

readonly ROOT_URL = '/api/findCoinData';

 const params = new HttpParams().set('_id', this.coinid);
 this.http.get(this.ROOT_URL, { params})
       .takeWhile(() => this.alive)
       .catch(err => {
        console.log(err)
        return Observable.of(err)

在我的组件'注册'上我可以使用以下工具发帖：

  let url = '/api/registerCoin';
  this.http.post(url, {},{ params: new HttpParams().set('username', username)})

nginx config

http {
    upstream my-server {
    server myserver:3000;
    }

    upstream client {
    server client:4200;
    }

    server {
        listen 80;
        
        location / {
            proxy_pass http://client;
            proxy_http_version 1.1;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
        }
        location  ^~ /api/ {
            proxy_pass http://my-server;
            proxy_http_version 1.1;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
    }        
    }

尝试处于开发模式的Angular 5 docker nginx反向代理：ng serve

0 个答案: