able to build angular docker image successfully

Author: justmohan

README.md

@@ -18,7 +18,7 @@ Build image:
 `$ docker build --tag image_name .`
 
 Docker run the image on container
-`$ docker run --detach -p HOST_PORT:Container_PORT image_name`
+`$ docker run --name container_name --detach -p HOST_PORT:Container_PORT image_name`
 
 Docker run image and ssh to the container and remove container on terminal Exit 
 `$ docker run -it --rm image_name /bin/bash`

api/.dockerignore

@@ -1 +1,2 @@
-__pycache__
+__pycache__/
+models/

api/.gitignore

@@ -2,6 +2,7 @@
 __pycache__/
 *.py[cod]
 *$py.class
+models/
 
 # C extensions
 *.so

api/requirements.txt

@@ -3,7 +3,7 @@ attrs==19.3.0
 certifi==2019.9.11
 Click==7.0
 Flask==1.1.1
-flask-restplus==0.13.0
+flask-restplus==0.10.1
 gunicorn==20.0.4
 importlib-metadata==0.23
 itsdangerous==1.1.0

docker-compose.yml

@@ -2,24 +2,55 @@ version: '3.7'
 
 services:
 
- flask-api:
- shm_size: '1000000000'
- image: api_img
- container_name: ai_api
- build:
- context: api
- tty: true
+ # flask-api:
+ # image: api_img
+ # container_name: ai_api
+ # build:
+ # context: api
+ # tty: true
+ # volumes:
+ # - ~/docker_app/api/logs:/app/logs
+ # - ./api/models:/app/models
+ # environment:
+ # MONGODB_DATABASE: ai_evaluator 
+ # MONGODB_USERNAME: admin
+ # MONGODB_PASSWORD: mohan
+ # MONGODB_HOSTNAME: mongodb
+ # AUTH_DB: admin
+ 
+ web_app:
+ image: web_app_img
+ container_name: web_app
+ build: 
+ context: web
  volumes:
- - ~/docker_app/api:/app/logs
- expose: 
- - 5000
-
- nginx:
- build: nginx
- image: nginx_img
- container_name: ai_nginx
- tty: true
+ - ./web/dist/web/:/usr/share/nginx/html:ro
  ports:
  - '80:80'
- volumes:
- - ~/docker_app/nginx:/var/log/nginx/
+ 
+ # mongodb:
+ # image: mongo:4.0.8
+ # container_name: mongodb
+ # restart: unless-stopped
+ # command: mongod --auth
+ # environment:
+ # MONGO_INITDB_ROOT_USERNAME: admin
+ # MONGO_INITDB_ROOT_PASSWORD: mohan
+ # MONGO_INITDB_DATABASE: ai_evaluator
+ # MONGODB_DATA_DIR: /data/db
+ # MONDODB_LOG_DIR: /dev/null
+ # volumes:
+ # - ~/docker_app/mongodb:/data/db
+
+ # nginx:
+ # build: nginx
+ # image: nginx_img
+ # container_name: ai_nginx
+ # depends_on:
+ # - flask-api
+ # tty: true
+ # ports:
+ # - '80:80'
+ # - '443:443'
+ # volumes:
+ # - ~/docker_app/nginx/logs:/var/log/nginx

nginx/Dockerfile

@@ -0,0 +1,43 @@
+### STAGE 1: Build ###
+
+ARG APP_NAME=ng-app
+## We label our stage as ‘builder’ and we will be using 'builder' in the next stage
+FROM node:10-alpine as builder
+
+ARG APP_NAME
+ENV APP $APP_NAME
+
+RUN mkdir $APP
+WORKDIR $APP
+
+COPY package.json package-lock.json ./
+
+## Storing node modules on a separate layer will prevent unnecessary npm installs at each build
+## RUN npm ci && mkdir /ng-app && mv ./node_modules ./ng-app
+RUN npm ci
+
+# Copying the code to APP directory
+COPY . .
+
+## Build the angular app in production mode and store the artifacts in dist folder
+RUN npm run ng build -- --prod --output-path=dist
+
+
+
+### STAGE 2: Setup ###
+
+FROM nginx:1.14.1-alpine
+RUN apk add --no-cache bash
+ARG APP_NAME
+ENV APP $APP_NAME
+
+## Copy our default nginx config which will replace the existing default.conf
+COPY nginx/default.conf /etc/nginx/conf.d/
+
+## Remove default nginx website
+RUN rm -rf /usr/share/nginx/html/*
+
+## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder
+COPY --from=builder $APP/dist /usr/share/nginx/html
+
+CMD ["nginx", "-g", "daemon off;"]

nginx/nginx.conf

@@ -0,0 +1,27 @@
+server {
+
+ listen 80;
+
+ sendfile on;
+
+ default_type application/octet-stream;
+
+
+ gzip on;
+ gzip_http_version 1.1;
+ gzip_disable "MSIE [1-6]\.";
+ gzip_min_length 1100;
+ gzip_vary on;
+ gzip_proxied expired no-cache no-store private auth;
+ gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+ gzip_comp_level 9;
+
+
+ root /usr/share/nginx/html;
+
+
+ location / {
+ try_files $uri $uri/ /index.html =404;
+ }
+
+}

web/Dockerfile

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
  <meta charset="utf-8">
- <title>Web</title>
+ <title>Web 1</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">