MOBILE-3738 docker: Bundle assets in image

Author: NoelDeMartin

Dockerfile

@@ -1,30 +1,20 @@
-# This image is based on the fat node 11 image.
-# We require fat images as neither alpine, or slim, include git binaries.
-FROM node:11
-
-# Port 8100 for ionic dev server.
-EXPOSE 8100
-
-# Port 35729 is the live-reload server.
-EXPOSE 35729
-
-# Port 53703 is the Chrome dev logger port.
-EXPOSE 53703
+## BUILD STAGE
+FROM node:14 as build-stage
 
 WORKDIR /app
 
-# Install npm libraries.
+# Prepare node dependencies
+RUN apt-get update && apt-get install libsecret-1-0 -y
 COPY package*.json ./
 RUN npm ci
-# Delete caches.
-RUN rm -rf /root/.npm
 
+# Build source
+ARG build_command="npm run build:prod"
 COPY . /app
+RUN ${build_command}
 
-# Run gulp before starting.
-RUN npx gulp
-
-# Provide a Healthcheck command for easier use in CI.
-HEALTHCHECK --interval=10s --timeout=5s --start-period=60s CMD curl -f http://localhost:8100 || exit 1
+## SERVE STAGE
+FROM nginx:alpine as serve-stage
 
-CMD ["npm", "run", "ionic:serve"]
+# Copy assets
+COPY --from=build-stage /app/www /usr/share/nginx/html

angular.json

@@ -69,6 +69,7 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
             "browserTarget": "app:build",
+            "disableHostCheck": true,
             "port": 8100
           },
           "configurations": {

hooks/build

@@ -0,0 +1,13 @@
+#!/bin/bash
+# Override DockerHub build hook in order to create images of different flavors (production & testing).
+# See: https://docs.docker.com/docker-hub/builds/advanced/
+
+if [[ "$IMAGE_NAME" == *-test ]]
+then
+    docker build --build-arg build_command="npm run build:test" -f $DOCKERFILE_PATH -t $IMAGE_NAME .
+elif [[ "$IMAGE_NAME" == *-dev ]]
+then
+    docker build --build-arg build_command="npm run build" -f $DOCKERFILE_PATH -t $IMAGE_NAME .
+else
+    docker build -f $DOCKERFILE_PATH -t $IMAGE_NAME .
+fi

package.json

@@ -21,7 +21,8 @@
     "ng": "ng",
     "start": "ionic serve",
     "build": "ionic build",
-    "build:prod": "ionic build --prod",
+    "build:prod": "NODE_ENV=production ionic build --prod",
+    "build:test": "NODE_ENV=testing ionic build",
     "test": "NODE_ENV=testing gulp && jest --verbose",
     "test:ci": "NODE_ENV=testing gulp && jest -ci --runInBand --verbose",
     "test:watch": "NODE_ENV=testing gulp watch & jest --watch",