1

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

我在反向代理中运行 4 个容器客户端/服务器/mongo/nginx。这可行，但是我认为我将 nginx 设置为开发模式，即。类似于在 ng serve:4200 中实时查看应用程序的任何更改。现在我看不到这一点，看来我必须使用 docker-compose up 再次构建应用程序，这需要很长时间。

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

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 配置

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";
    }        
    }

4

0 回答 0