Dockerfile to deploy Vue.js application in several environments?

Question

I'm trying to create a Dockerfile to deploy a Vue.js app as a docker in Cloud Run (GCP). From the Vue official documentation and get a Dockerfile to deploy the app in a "production mode":

FROM node:lts-alpine
RUN npm install -g http-server
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 8080
CMD [ "http-server", "dist" ]

It works properly but I want to modify the Dockerfile to make it dynamic. I mean, I want that this file is able to deploy either to production or to DEV using a kind of input parameter

I've tried several attempts, one of those was to add these new lines

ENV ENT=production
RUN NODE_ENV=${ENT} npm run build

With the intension to define a default value for the environment variable as "production", and in the Cloud Run service define the same environment variable as "dev". I thought the variable defined on the cloud run service will overwrite the local variable (Dockerfile) at the moment of running the docker. It was not overwritten and again the app is running in production

Do you know if there is a way to overwrite a Dockerfile environment variable or if It is possible to create something as

npm run build:dev
npm run build:prod

dynamically depending on the environment I want to deploy?

This is my package.json

{
  /// ...
  "scripts": {
    "dev": "vue-cli-service serve --mode development",
    "test": "cross-env NODE_ENV=testing vue-cli-service serve --mode testing",
    "prod": "vue-cli-service serve --mode production",
    "build:dev": "vue-cli-service build --mode development",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },
  /// ...
}

user_8390998 · Answer

Based on the Muni Kumar's answer, I found a way to do it because it is a little bit tricky the tools to deploy a container in GCP. Cloud build to create a docker image and Cloud Run to deploy it

in scripts:

"build:dev": "vue-cli-service build --mode development",
"build:prod": "vue-cli-service build --mode production",

in Dockerfile:

ARG ENV
RUN npm run build:${ENV}

new file called: cloudbuild.yaml to add some custom configuration to Cloud Build

steps:
- name: 'gcr.io/cloud-builders/docker'
  args: ['build',
         '--build-arg',
        'ENV=${_ENV}',
         '-t',
         'gcr.io/$PROJECT_ID/landing',
         '.']
substitutions:
    _ENV: test # default value
images: [
    'gcr.io/$PROJECT_ID/landing',
]

and, create run next command

gcloud builds submit --config=cloudbuild.yaml --substitutions=_ENV="prod"

user_3254264 · Answer

1st way:

Pass docker arguments

ARG NODE_ENV 
ENV NODE_ENV $NODE_ENV
RUN /bin/bash -c '[[ "${NODE_ENV}" == "production" ]] && npm run build:prod || npm run build:dev'

2nd way:

pass arguments to the npm scripts

in scripts

  "build": "vue-cli-service build --mode production $npm_config_environment"

In docker file

ARG NODE_ENV 
RUN npm run build --environment "$NODE_ENV"

while building docker

docker build --build-arg NODE_ENV=production

Dockerfile to deploy Vue.js application in several environments?

2 Answers