Merge pull request #115 from Human-Connection/93-minimize-docker-image-size-with-multi-stage-build

Multistage build docker

.dockerignore

@@ -11,3 +11,8 @@ scripts/
 .env
 
 cypress/
+
+README.md 
+screenshot*.png
+lokalise.png
+.editorconfig

.travis.yml

@@ -18,8 +18,8 @@ before_install:
   - sudo mv docker-compose /usr/local/bin
 
 install:
-  - docker build --build-arg BUILD_COMMIT=$TRAVIS_COMMIT -t humanconnection/nitro-web .
+  - docker build --build-arg BUILD_COMMIT=$TRAVIS_COMMIT --target production -t humanconnection/nitro-web .
-  - docker-compose -f docker-compose.yml up -d
+  - docker-compose -f docker-compose.yml -f docker-compose.travis.yml up -d
   - git clone https://github.com/Human-Connection/Nitro-Backend.git ../Nitro-Backend
   - git -C "../Nitro-Backend" checkout $TRAVIS_BRANCH || echo "Branch \`$TRAVIS_BRANCH\` does not exist, falling back to \`master\`"
   - docker-compose -f ../Nitro-Backend/docker-compose.yml -f ../Nitro-Backend/docker-compose.travis.yml up -d
@@ -27,8 +27,8 @@ install:
   - yarn add cypress-cucumber-preprocessor
 
 script:
-  - docker-compose exec webapp yarn run lint
+  - docker-compose exec -e NODE_ENV=test webapp yarn run lint
-  - docker-compose exec webapp yarn run test
+  - docker-compose exec -e NODE_ENV=test webapp yarn run test
   - docker-compose -f ../Nitro-Backend/docker-compose.yml exec backend yarn run db:seed > /dev/null
   - wait-on http://localhost:3000
   - cypress run --record --key $CYPRESS_TOKEN

Dockerfile

@@ -1,9 +1,9 @@
-FROM node:10-alpine
+FROM node:10-alpine as base
 LABEL Description="Web Frontend of the Social Network Human-Connection.org" Vendor="Human-Connection gGmbH" Version="0.0.1" Maintainer="Human-Connection gGmbH (developer@human-connection.org)"
 
 # Expose the app port
-EXPOSE 3000
+ARG BUILD_COMMIT
-
+ENV BUILD_COMMIT=$BUILD_COMMIT
 ARG WORKDIR=/nitro-web
 RUN mkdir -p $WORKDIR
 WORKDIR $WORKDIR
@@ -11,18 +11,19 @@ WORKDIR $WORKDIR
 # See: https://github.com/nodejs/docker-node/pull/367#issuecomment-430807898
 RUN apk --no-cache add git
 
-# Install Web Application
+COPY . .
-COPY package.json .
-COPY yarn.lock .
-COPY styleguide/ ./styleguide
-RUN yarn install --production=false --frozen-lockfile --non-interactive
 
-# Install and build Styleguide
+FROM base as build-and-test
-COPY styleguide/ ./styleguide
+RUN yarn install --production=false --frozen-lockfile --non-interactive
 RUN cd styleguide && yarn install --production=false --frozen-lockfile --non-interactive \
     && cd .. \
     && yarn run styleguide:build
+RUN yarn run build
 
-COPY . .
+FROM base as production
-RUN ["yarn", "run", "build"]
+ENV NODE_ENV=production
+COPY --from=build-and-test ./nitro-web/node_modules ./node_modules
+COPY --from=build-and-test ./nitro-web/.nuxt ./.nuxt
+
+EXPOSE 3000
 CMD ["yarn", "run", "start"]

cypress/integration/common/steps.js

@@ -1,6 +1,5 @@
 import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 import find from 'lodash/find'
-import { eq } from 'semver';
 
 /* global cy */
 
@@ -73,7 +72,6 @@ Given('my user account has the role {string}', role => {
   // TODO: use db factories instead of seed data
 })
 
-
 When('I log out', logout)
 
 When('I visit the {string} page', page => {

docker-compose.override.yml

@@ -2,6 +2,9 @@ version: '3.7'
 
 services:
   webapp:
+    build:
+      context: .
+      target: build-and-test
     volumes:
       - .:/nitro-web
       - node_modules:/nitro-web/node_modules

docker-compose.travis.yml

@@ -0,0 +1,7 @@
+version: "3.7"
+
+services:
+  webapp:
+    build:
+      context: .
+      target: build-and-test

docker-compose.yml

@@ -3,7 +3,9 @@ version: '3.7'
 services:
   webapp:
     image: humanconnection/nitro-web:latest
-    build: .
+    build:
+      context: .
+      target: production
     ports:
       - 3000:3000
       - 8080:8080

package.json

@@ -51,6 +51,7 @@
     "jsonwebtoken": "^8.3.0",
     "nuxt": "^2.0.0",
     "nuxt-env": "^0.0.4",
+    "nuxt-sass-resources-loader": "^2.0.5",
     "v-tooltip": "^2.0.0-rc.33",
     "vue-count-to": "^1.0.13",
     "vue-izitoast": "1.1.2",
@@ -72,7 +73,6 @@
     "jest": "^23.6.0",
     "node-sass": "^4.11.0",
     "nodemon": "^1.18.9",
-    "nuxt-sass-resources-loader": "^2.0.5",
     "prettier": "1.14.3",
     "sass-loader": "^7.1.0",
     "vue-jest": "^3.0.2",

yarn.lock

@@ -2777,6 +2777,11 @@ big.js@^3.1.3:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
   integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
 
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
 binary-extensions@^1.0.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.12.0.tgz#c2d780f53d45bba8317a8902d4ceeaf3a6385b14"
@@ -7177,6 +7182,13 @@ json5@^0.5.0, json5@^0.5.1:
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
   integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
 
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
 json5@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.0.tgz#e7a0c62c48285c628d20a10b85c89bb807c32850"
@@ -7382,7 +7394,7 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.0.4, loader-utils@^1.1.0:
+loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
   integrity sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=
@@ -7391,6 +7403,15 @@ loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.0.4, loader-utils@^1.1
     emojis-list "^2.0.0"
     json5 "^0.5.0"
 
+loader-utils@^1.0.4:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
+  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^2.0.0"
+    json5 "^1.0.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"