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"
  },
  /// ...
}

can you please share package json

Muni Kumar Gundu
– Muni Kumar Gundu

2020-06-05 17:58:47 +00:00
Commented Jun 5, 2020 at 17:58 — Muni Kumar Gundu
– Muni Kumar Gundu, Commented Jun 5, 2020 at 17:58
shared. I think scripts part is enough

Stiben
– Stiben

2020-06-05 18:12:17 +00:00
Commented Jun 5, 2020 at 18:12 — Stiben
– Stiben, Commented Jun 5, 2020 at 18:12

Stiben · Accepted Answer · 2020-06-08 16:23:24Z

1

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"

answered Jun 8, 2020 at 16:23

Stiben

1041 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muni Kumar Gundu · Accepted Answer · 2020-06-05 19:00:39Z

0

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

answered Jun 5, 2020 at 19:00

Muni Kumar Gundu

5326 silver badges12 bronze badges

6 Comments

Stiben Over a year ago

Neither both worked but I think it is due to the hosting provider. In the first case, the Cloud Run service always run "npm run build:dev" no matter if I set "production" as a env variable. In the second case, variable "npm_config_environment" is like was not recognized

Stiben Over a year ago

There were no errors. Condition "${NODE_ENV}" == "production" were never True. I set this env variable in Cloud Run but it did not work.

Muni Kumar Gundu Over a year ago

I asked about this npm_config_environment. this is a args for node scripts. It should work. If not we need to replace that with process.env.npm_config_environment

Stiben Over a year ago

The error was: The command '/bin/sh -c npm run build --environment $NODE_ENV' returned a non-zero code: 1 ERROR due to vue-cli-service build --mode production $npm_config_environment "production". It just works modifying the Dockerfile RUN npm run build --environment $NODE_ENV, the package "build": "vue-cli-service build --mode", and creating the file cloudbuild.yaml

Muni Kumar Gundu Over a year ago

I got your point friend, but my question is why it is failing? I used the above two methods to build vue docker with dynamic environment 1 year back. These are primitives. I can understand you are using yaml to build docker. passing arguments may be different but core concept is same. If you have npm log please share. That might be useful for others.

|

Collectives™ on Stack Overflow

Dockerfile to deploy Vue.js application in several environments?

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related