[SDPA-2703][SDPA-2704][SDPA-2706] Docker file update (#408)

* Docker file update

* Updated storybook docker file

* corrected filename

* Removed auth env var

* Removed site id from env var

* update permission bit for ~/config

* Changed env var to minimal

* Fixed site id type issue

* fixed wrong env setting

* Updated docker file for monorepo

* Fixed command in docker file

Dockerfile.app

@@ -0,0 +1,27 @@
+# This is for reference site.
+FROM amazeeio/node:10-builder as builder
+COPY . /app/
+
+# Remove storybook from reference site
+RUN rm /app/packages/ripple-ui-components/package.json \
+    && mv /app/scripts/jira-post-comment-app.sh /app/scripts/jira-post-comment.sh \
+    && yarn install
+
+FROM amazeeio/node:10
+COPY --from=builder /app/. /app/
+
+ARG LAGOON_GIT_BRANCH
+ENV LAGOON_GIT_BRANCH ${LAGOON_GIT_BRANCH}
+
+WORKDIR /app/examples/vic-gov-au/
+RUN yarn run build \
+    && chmod -R 755 ~/.config \
+    # force it to load the environment variable during build time. Otherwise it cannot read $LAGOON_GIT_BRANCH.
+    && . /home/.bashrc \
+    # For JIRA commit script work.
+    && if [ $LAGOON_GIT_BRANCH != "production" ] ; then apk --update add curl;  fi
+
+ENV HOST 0.0.0.0
+EXPOSE 3000
+
+CMD ["yarn", "run", "start"]

Dockerfile.storybook

@@ -0,0 +1,26 @@
+FROM amazeeio/node:10-builder as builder
+
+COPY packages/ripple-ui-components /app/packages/ripple-ui-components
+COPY package.json yarn.lock .eslintrc.js .babelrc /app/
+RUN yarn install
+WORKDIR /app/packages/ripple-ui-components
+RUN yarn run build-storybook
+
+FROM amazeeio/node:10
+COPY --from=builder /app/packages/ripple-ui-components/public /app
+COPY scripts/jira-post-comment-storybook.sh /app/scripts/jira-post-comment.sh
+
+ARG LAGOON_GIT_BRANCH
+ENV LAGOON_GIT_BRANCH ${LAGOON_GIT_BRANCH}
+
+RUN npm config set unsafe-perm true \
+    && npm install http-server -g \
+    # force it to load the environment variable during build time. Otherwise it cannot read $LAGOON_GIT_BRANCH.
+    && . /home/.bashrc \
+    # For JIRA commit script work.
+    && if [ $LAGOON_GIT_BRANCH != "production" ] ; then apk --update add curl;  fi
+
+ENV HOST 0.0.0.0
+EXPOSE 3000
+
+CMD ["http-server", "-p", "3000"]

README.md

@@ -5,20 +5,22 @@ This is work-in-progress beta version.
 You should check our [alpha](https://github.com/dpc-sdp/ripple/tree/v1.0.0-alpha.84)
 version at this stage.
 
-# Requirements
+## Requirements
 
-- Install (nodejs)[https://nodejs.org/en/]
-- Install (yarn)[https://yarnpkg.com/en/docs/install]
+- Install [nodejs](https://nodejs.org/en/)
+- Install [yarn](https://yarnpkg.com/en/docs/install)
 
-# Install
+## Install
 
 Run `yarn install`
 
-# Running Example
+## Running Example
 
 Ensure a populated `.env` exists within the `/examples/vic-gov-au/` directory.
+You can use `/examples/vic-gov-au/example.env` as a template.
+
 Run `yarn run start:example`
 
-# Running Storybook
+## Running Storybook
 
 Run `yarn run start:storybook`

docker-compose.local.yml

@@ -1,27 +1,18 @@
 version: '2'
 services:
   storybook:
-    build:
-      dockerfile: Dockerfile.local
     networks:
       - amazeeio-network
       - default
-    volumes:
-      - .:/app:delegated
-      - /app/node_modules
     environment:
       LAGOON_ENVIRONMENT_TYPE: 'local'
-  test:
-    build:
-      context: .
-      dockerfile: Dockerfile.test
+  app:
     networks:
       - amazeeio-network
       - default
     environment:
       LAGOON_ENVIRONMENT_TYPE: 'local'
-    ports:
-      - "9002:3000"
+      BASIC_AUTH: 0
 networks:
   amazeeio-network:
     external: true

docker-compose.yml

@@ -1,9 +1,10 @@
 version: '2'
 services:
+  # Storybook site
   storybook:
     build:
       context: .
-      dockerfile: Dockerfile
+      dockerfile: Dockerfile.storybook
       args:
         - LAGOON_GIT_BRANCH=
     networks:
@@ -16,3 +17,21 @@ services:
       - AMAZEEIO_HTTP_PORT=3000
     ports:
       - "9001:3000"
+  # Reference site    
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile.app
+      args:
+        - LAGOON_GIT_BRANCH=
+    networks:
+      - default
+    labels:
+      lagoon.type: node
+    environment:
+      - AMAZEEIO_URL=reference.docker.amazee.io
+      - AMAZEEIO=AMAZEEIO
+      - AMAZEEIO_HTTP_PORT=3000
+      - BASIC_AUTH=0
+    ports:
+      - "3000:3000"

example.env

@@ -0,0 +1,4 @@
+# Copy this .env.example to .env in your local dev environment.
+
+# Use below setting if you need to run this project docker in local.
+# COMPOSE_FILE=docker-compose.yml:docker-compose.local.yml

examples/vic-gov-au/example.env

@@ -0,0 +1,23 @@
+# Copy this .env.example to .env in your local dev environment.
+# Tide API
+CONTENT_API_SERVER=
+CONTENT_API_AUTH_USER=
+CONTENT_API_AUTH_PASS=
+
+# Google Tag Manager ID goes here - Google analytics, etc are managed through GTM
+GTM_ID=
+
+# This will enable Nuxt debug and display error details.
+DISPLAY_ERROR=1
+
+# Search settings
+SEARCH_HASH=
+SEARCH_SERVICE=elasticsearch
+SEARCH_INDEX=
+SEARCH_URL=
+SEARCH_LOG=trace
+SEARCH_AUTH_USERNAME=
+SEARCH_AUTH_PASSWORD=
+
+# Disable basic auth in local env.
+BASIC_AUTH=1

examples/vic-gov-au/middleware/basic-auth.js

@@ -3,7 +3,10 @@ const auth = require('basic-auth')
 
 export default function (req, res, next) {
   const credentials = auth(req)
-  if (!credentials || credentials.name !== process.env.AUTH_USER || credentials.pass !== process.env.AUTH_PASS) {
+  // We need to use same credentials as Content API, as we are using proxy to send API requests.
+  const authUser = process.env.CONTENT_API_AUTH_USER
+  const authPass = process.env.CONTENT_API_AUTH_PASS
+  if (!credentials || credentials.name !== authUser || credentials.pass !== authPass) {
     res.statusCode = 401
     res.setHeader('WWW-Authenticate', 'Basic realm="Access the site"')
     res.end('Access denied')

examples/vic-gov-au/nuxt.config.js

@@ -4,10 +4,7 @@ const resolve = require('path').resolve
 const tideConfig = require('./tide/tide.config')
 const tideFilters = require('./tide/tide.mapping-filters')
 
-// import .env variables in dev (Make sure Env vars are defined in production environment separately).
-if (process.env.NODE_ENV === 'dev' || (process.env.NODE_ENV === 'test' && process.env.CI !== 'true')) {
-  require('dotenv').config()
-}
+require('dotenv').config()
 
 process.env.DEBUG = 'nuxt:*' // display nuxt.js logs
 
@@ -101,7 +98,7 @@ export default {
       username: process.env.CONTENT_API_AUTH_USER,
       password: process.env.CONTENT_API_AUTH_PASS
     },
-    site: process.env.SITE_ID,
+    site: 4,
     customConfig: tideConfig,
     customFilters: tideFilters,
     // Tide submodules, 1 for enable, 0 for disable.

package.json

@@ -25,7 +25,15 @@
     "cy:run": "cypress run",
     "cy:run-smoke": "cypress run -e TAGS='@smoke'",
     "lint": "eslint --ext .js,.vue . && sass-lint -qv --max-warnings 0",
-    "lint:fix": "eslint --ext .js,.vue . --fix"
+    "lint:fix": "eslint --ext .js,.vue . --fix",
+    "bay:start": "docker-compose up -d",
+    "bay:rebuild-full": "docker-compose up -d --build --force-recreate",
+    "bay:restart": "docker-compose restart",
+    "bay:stop": "docker-compose stop",
+    "bay:destroy": "docker-compose down -v",
+    "bay:logs": "docker-compose logs",
+    "bay:cli": "docker exec -i $(docker-compose ps -q app)",
+    "bay:pull": "docker image ls --format \"{{.Repository}}:{{.Tag}}\" | grep amazeeio | grep -v none | xargs -n1 docker pull | cat"
   },
   "devDependencies": {
     "lerna": "^3.0.0",

packages/ripple-nuxt-tide/lib/core/tide.js

@@ -121,11 +121,15 @@ export const tide = (axios, site, config) => ({
     if (sitesData) {
       let siteData = null
       sitesData.map((item) => {
-        if (item.drupal_internal__tid.toString() === siteId) {
+        if (item.drupal_internal__tid.toString() === siteId.toString()) {
           siteData = item
         }
       })
 
+      if (siteData === null) {
+        throw new Error('Couldn\'t get site data. Please check your site id and Tide site setting.')
+      }
+
       try {
         siteData.menus = await this.getSiteMenus(siteData)
       } catch (error) {
@@ -178,6 +182,10 @@ export const tide = (axios, site, config) => ({
   },
 
   getMenu: async function (menuName) {
+    if (!menuName) {
+      throw new Error('no menu id provided.')
+    }
+
     const params = {
       filter: {
         menu_link_content: {