Angular 5 docker nginx reverse proxy trying to be in development mode : ng serve

问题

I have a very basic understanding of nginx and docker.

I run 4 containers client/server/mongo/nginx in reverse proxy. This works, however I thought I set the nginx up in development mode, Ie. similar as being in ng serve:4200 to see any changes on the app live. Right now I don't see that, it seems I have to build the app again with docker-compose up, which takes ages.

I exposed the port: 4200 in the client Dockerfile and 3000 in the server Dockerfile. Is there a way to work with NGINX in ng serve mode (in my package.json client I start with ng serve) but when I just open the website with http://localhost I am not seeing live changes. When I open the app through port 4200 my website doesn't work properly as it tries to reach my server container on port 4200 which is on port 3000. What would be the normal setup to work in ng serve mode using nginx reverse proxy. Is there a way that I can delete the exposing ports:4200/3000 (which I think avoid the nginx) so that ng serve runs on port 80 through nginx.

Dockerfile Server

#  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 server

 "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 client

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

Dockerfile client

#  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"]

docker-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)

On my component 'register' I can do a post using the following which works:

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

来源：https://stackoverflow.com/questions/48227043/angular-5-docker-nginx-reverse-proxy-trying-to-be-in-development-mode-ng-serve

标签

Docker

nginx

mode

serve