dockerize the apps

.env

@@ -1,14 +1,12 @@
 COMPOSE_PROJECT_NAME=my-weather-app
 
-ENV_MONGO_PORT=27017
-
-ENV_SERVER_API_PORT=30001
+NODE_ENV=production
 ENV_SERVER_API_MONGODB_URI=mongodb://mongo-service:27017
 ENV_SERVER_API_ALLOW_HOSTS=*
+ENV_SERVER_API_PORT=30001
 
-ENV_CLIENT_WEBAPP_PORT=4200
-
-NODE_ENV=production
+ENV_WEBAPP_NODE_ENV=prod
+ENV_WEBAPP_PORT=80
 
-ENV_SERVER_API_DOCKER_IMAGE_TAG=danmgs/myweatherapp-server-api:1.0
-ENV_CLIENT_WEBAPP_DOCKER_IMAGE_TAG=danmgs/myweatherapp-client-webapp:1.0
+ENV_FRONTEND_IMAGE_TAG=danmgs/weather-app-frontend
+ENV_BACKEND_IMAGE_TAG=danmgs/weather-app-backend

docker-compose-release.yml

@@ -0,0 +1,36 @@
+---
+version: '3'
+services:
+
+  mongo-service:
+    image: mongo:latest
+    volumes:
+      - mongodata:/data/db
+    restart: always
+
+  weather-app-backend:
+    container_name: weather-app-backend
+    image: danmgs/weather-app-backend:1.1
+    environment:
+      NODE_ENV: production
+      ENV_SERVER_API_MONGODB_URI: mongodb://mongo-service:27017
+      ENV_SERVER_API_ALLOW_HOSTS: "*"
+      ENV_SERVER_API_PORT: 30001
+    ports:
+      - "30001:30001"
+    depends_on:
+      - mongo-service
+    restart: always
+
+  weather-app-frontend:
+    container_name: weather-app-frontend
+    image: danmgs/weather-app-frontend:1.1
+    working_dir: /usr/src/app
+    ports:
+      - "80:80"
+    depends_on:
+      - weather-app-backend
+    restart: always
+
+volumes:
+  mongodata:

docker-compose.yml

@@ -1,58 +1,45 @@
-version: '3'
-
-services:
-
-  mongo-service:
-
-    container_name: mongo
-    image: mongo
-    restart: always
-    ports:
-      - '$ENV_MONGO_PORT:$ENV_MONGO_PORT'
-    volumes:
-      - ./mongo/data/db:/data/db:ro
-
-  server-api-service:
-
-    build:
-      dockerfile: Dockerfile
-      context: ./server
-    image: $ENV_SERVER_API_DOCKER_IMAGE_TAG
-    working_dir: /usr/src/app
-    # volumes:
-      #- ./server:/usr/src/app
-      #- /usr/src/app/node_modules
-    # command: './node_modules/nodemon/bin/nodemon'
-    command: 'node ./src/app.js'
-    container_name: server-api-service
-    ports:
-      - '$ENV_SERVER_API_PORT:$ENV_SERVER_API_PORT'
-    environment:
-      - ENV_SERVER_API_MONGODB_URI=$ENV_SERVER_API_MONGODB_URI
-      - ENV_SERVER_API_ALLOW_HOSTS=$ENV_SERVER_API_ALLOW_HOSTS
-      - NODE_ENV=$NODE_ENV
-    restart: always
-    depends_on:
-      - mongo-service
-
-  client-webapp-service:
-
-    build:
-      context: ./public
-      dockerfile: Dockerfile
-      # args:
-      #   - NODE_ENV=development # development / staging / production
-    image: $ENV_CLIENT_WEBAPP_DOCKER_IMAGE_TAG
-    working_dir: /usr/src/app
-    # volumes:
-    #   - ./public:/usr/src/app
-    #   - /usr/src/app/node_modules
-    container_name: client-webapp-service
-    ports:
-      - '$ENV_CLIENT_WEBAPP_PORT:$ENV_CLIENT_WEBAPP_PORT'
-    environment:
-      - NODE_ENV=$NODE_ENV # development / staging / production
-    command: "npm start"
-    restart: always
-    depends_on:
-      - server-api-service
+---
+version: '3'
+services:
+
+  mongo-service:
+    image: mongo:latest
+    volumes:
+      - mongodata:/data/db
+    restart: always
+
+  weather-app-backend:
+    build:
+      context: ./server
+      dockerfile: Dockerfile
+    container_name: weather-app-backend
+    image: ${ENV_BACKEND_IMAGE_TAG}
+    environment:
+      NODE_ENV: ${NODE_ENV}
+      ENV_SERVER_API_MONGODB_URI: ${ENV_SERVER_API_MONGODB_URI}
+      ENV_SERVER_API_ALLOW_HOSTS: ${ENV_SERVER_API_ALLOW_HOSTS}
+      ENV_SERVER_API_PORT: ${ENV_SERVER_API_PORT}
+    ports:
+      - ${ENV_SERVER_API_PORT}:${ENV_SERVER_API_PORT}
+    depends_on:
+      - mongo-service
+    restart: always
+
+  weather-app-frontend:
+    build:
+      context: ./public
+      dockerfile: Dockerfile
+      args:
+        - NODE_ENV=${ENV_WEBAPP_NODE_ENV} # development / staging / prod
+    container_name: weather-app-frontend
+    image: ${ENV_FRONTEND_IMAGE_TAG}
+    working_dir: /usr/src/app
+    ports:
+      - ${ENV_WEBAPP_PORT}:${ENV_WEBAPP_PORT}
+    depends_on:
+      - weather-app-backend
+    restart: always
+
+# https://github.com/docker-library/mongo/issues/74#issuecomment-350034758
+volumes:
+  mongodata:

docker-push.ps1

@@ -0,0 +1,18 @@
+# Purpose: script to push image into your docker hub. Must be logged in first.
+# Usage: powershell docker-push.ps1 -tag <version>
+Param([parameter(Mandatory=$true,
+   HelpMessage="Enter docker tag version")]
+   $tag)
+
+write-output "Entered tag = $tag"
+
+# Build the images using tag name specify via image attributes in the docker-compose files.
+docker-compose build
+
+# Tags the images
+docker tag danmgs/weather-app-frontend danmgs/weather-app-frontend:$tag
+docker tag danmgs/weather-app-backend danmgs/weather-app-backend:$tag
+
+# Push the images
+docker push danmgs/weather-app-frontend:$tag
+docker push danmgs/weather-app-backend:$tag

launch.bat

@@ -0,0 +1,55 @@
+@ECHO OFF
+TITLE launch.bat - Angular WebApp
+
+SET interactive=1
+IF %ERRORLEVEL% == 0 SET interactive=0
+
+IF "%1"=="logs" (
+    IF "%2"=="" (
+        ECHO Showing logs ^(mongo-service^|^|app-backend^|^|app-frontend^)
+        GOTO End
+    )
+    IF "%2"=="mongo-service" (
+        ECHO Showing logs from the mongo-service container...
+        docker-compose logs -f mongo-service
+        GOTO End
+    )
+    IF "%2"=="app-backend" (
+        ECHO Showing logs from the app-backend container...
+        docker-compose logs -f app-backend
+        GOTO End
+    )
+    IF "%2"=="app-frontend" (
+        ECHO Showing logs from the app-frontend container...
+        docker-compose logs -f app-frontend
+        GOTO End
+    ))
+
+
+IF "%1"=="up" (
+    ECHO Launching...
+    ECHO If this is your first time starting the project this might take a minute...
+
+    docker-compose up -d --build
+    ECHO Opening tabs in browser...
+    timeout /t 10 /nobreak > NUL
+    START "" http://localhost
+    START "" http://localhost:30001/api/serverhealth
+    GOTO End
+)
+
+IF "%1"=="down" (
+    ECHO Stopping and removing running sandbox containers...
+    docker-compose down
+    GOTO End
+)
+
+ECHO commands:
+ECHO   up           -^> spin up the sandbox environment
+ECHO   down         -^> tear down the sandbox environment
+ECHO.
+ECHO   logs  ^(mongo-service^|^|app-backend^|^|app-frontend^) -^> stream logs for the specified container
+
+:End
+IF "%interactive%"=="0" PAUSE
+EXIT /B 0

notes.txt

@@ -0,0 +1,58 @@
+# Manual steps notes
+# Follow instructions in order:
+
+# Create the network
+docker network create mynetwork
+docker network ls
+
+# Build and run frontend webapp
+cd public
+docker build -t weather-frontend-app --build-arg NODE_ENV=prod .
+docker run --rm -d -p 80:80 --name weather-frontend-app weather-frontend-app
+
+# Build and run mongo
+# https://github.com/docker-library/mongo/issues/74
+docker volume create --name=mongodata
+cd server
+docker run -d --name mongo-service -v mongodata:/data/db --network=mynetwork mongo
+
+# Build and run backend server with environment variables settings.
+docker build -t weather-backend-app .
+docker run -d -p 30001:30001 --name weather-backend-app --network=mynetwork -e NODE_ENV=production -e ENV_SERVER_API_MONGODB_URI=mongodb://mongo-service:27017 -e ENV_SERVER_API_ALLOW_HOSTS=* -e ENV_SERVER_API_PORT=30001 weather-backend-app
+
+# check network -> shows 2 containers are linked: backend app container can reach mongo container.
+docker inspect mynetwork
+
+# inspect volume and where it lives.
+docker inspect mongodata
+
+# check backend url
+http://localhost:30001/api/serverhealth
+
+# check frontend url
+http://localhost
+
+
+# check logs
+docker logs <containerId>
+
+# other commands
+
+docker kill mongo-service
+docker rm mongo-service
+
+docker kill weather-frontend-app
+docker kill mongo-service
+docker kill weather-backend-app
+
+docker rm weather-frontend-app
+docker rm mongo-service
+docker rm weather-backend-app
+
+docker ps
+
+# show environment variables injected
+docker-compose config
+
+# docker compose
+docker-compose -f docker-compose-release.yml up

public/Dockerfile

@@ -1,13 +1,27 @@
-FROM node:alpine
+FROM node:alpine as build
 
-ARG NODE_ENV=development
-ENV NODE_ENV $NODE_ENV
-
-RUN echo $NODE_ENV
+# arg with default value if not set.
+ARG NODE_ENV=prod
 
 WORKDIR /usr/src/app
 COPY ./package*.json ./
 RUN npm install
 COPY . .
 
-CMD ["npm", "run", "start"]
+# generate build
+RUN npm run build:$NODE_ENV
+
+# base image
+FROM nginx:1.16.0-alpine
+
+# copy artifact build from the 'build environment'
+COPY --from=build /usr/src/app/dist /usr/share/nginx/html
+
+# nginx routes config
+COPY ./default.conf /etc/nginx/conf.d
+
+# expose port 80
+EXPOSE 80
+
+# run nginx
+CMD ["nginx", "-g", "daemon off;"]

public/default.conf

@@ -0,0 +1,9 @@
+server {
+    listen       80;
+    server_name  localhost;
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html =404;
+    }
+}

public/package.json

@@ -6,6 +6,8 @@
     "ng": "ng",
     "start": "ng serve --host 0.0.0.0 --configuration $NODE_ENV",
     "build": "ng build",
+    "build:prod": "ng build --configuration=production --output-path=dist",
+    "build:development": "ng build --configuration=development --output-path=dist",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"

server/.env

@@ -1,7 +1,7 @@
 # https://newsapi.org
 # https://npm.runkit.com/node-news
 
-SERVER_API_PORT=30001
+ENV_SERVER_API_PORT=30001
 ENV_SERVER_API_MONGODB_URI=mongodb://localhost:27017
 API_KEY_DARKSKY=3ef106162ed142fc3dc78e058263e0e8
 NEWS_ARTICLES=

server/Dockerfile

@@ -1,18 +1,11 @@
 FROM node:alpine
 
-ARG NODE_ENV=development
-ENV NODE_ENV $NODE_ENV
-
-ARG ENV_SERVER_API_ALLOW_HOSTS=*
-ENV ENV_SERVER_API_ALLOW_HOSTS $ENV_SERVER_API_ALLOW_HOSTS
-
-RUN echo $NODE_ENV
-RUN echo $ENV_SERVER_API_ALLOW_HOSTS
-
 WORKDIR /usr/src/app
 COPY ./package*.json ./
 RUN npm install
-# RUN npm install -g nodemon
 COPY . .
 
-CMD ["npm", "run", "start"]
+# expose port 30001
+EXPOSE 30001
+
+CMD ["npm", "run", "start:docker"]

server/package.json

@@ -8,6 +8,9 @@
     "jshint": "jshint src || ECHO.",
     "lint": "npm run eslint",
     "start": "nodemon --watch app.js --watch **/*",
+    "start:prod": "SET NODE_ENV=production && SET ENV_SERVER_API_ALLOW_HOSTS=* && SET ENV_SERVER_API_MONGODB_URI=mongodb://localhost:27017 && SET ENV_SERVER_API_PORT=30001 && node src/app.js",
+    "start:test": "SET NODE_ENV=test && SET ENV_SERVER_API_ALLOW_HOSTS=* && SET ENV_SERVER_API_MONGODB_URI=mongodb://localhost:27017 && SET ENV_SERVER_API_PORT=30001 && node src/app.js",
+    "start:docker": "node src/app.js",
     "test": "cross-env NODE_ENV=test nodemon --exec \"mocha --timeout 20000 \"src/test/**/*\" \"",
     "test:noverbose": "cross-env NODE_ENV=test nodemon --exec \"mocha --timeout 20000 \"src/test/**/*\" \" -R min"
   },