Cloud Build with Docker and Dockerfile using dynamic environment variables

Photo by Kelly Sikkema on Unsplash

For using enviroment variable inside of a build process with cloud build can be challenging. Therefore I provided you with an example how the process can look like. The think you need:

1. Dockerfile on git
2. cloudbuild.yml on git

If you created both add the following:

1. cloudbuild.yml

options:  
 logging: CLOUD_LOGGING_ONLY  
steps:  
 — name: gcr.io/cloud-builders/docker  
 entrypoint: ‘bash’  
 args: [‘-c’, ‘docker build — build-arg=”VUE_APP_STRAPI_URL=https://docvox-app-cms.herokuapp.com/" -t gcr.io/$PROJECT_ID/app-frontend:${SHORT_SHA} -t gcr.io/$PROJECT_ID/app-frontend:latest .’]  
 — name: “gcr.io/cloud-builders/docker”  
 args: [“push”, “gcr.io/$PROJECT_ID/app-frontend”]  
 — name: “gcr.io/cloud-builders/gcloud”  
 args:  
 [  
 “run”,  
 “deploy”,  
 “app-frontend”,  
 “ — image”,  
 “gcr.io/$PROJECT_ID/app-frontend:${SHORT_SHA}”,  
 “ — region”,  
 “europe-west4”,  
 “ — platform”,  
 “managed”,  
 “ — allow-unauthenticated”,  
 “ — memory”,  
 “1Gi”,  
 “ — cpu”,  
 “1”  
 ]  
images:  
 — ‘gcr.io/$PROJECT_ID/app-frontend:$SHORT_SHA’  
 — ‘gcr.io/$PROJECT_ID/app-frontend:latest’  
timeout: 3600s

2. Dockerfile

FROM node:lts-alpine

ARG VUE_APP_STRAPI_URL  
## use the value to set the ENV var default  
ENV VUE_APP_STRAPI_URL=$VUE_APP_STRAPI_URL

RUN printenv  
RUN echo “the ENV is $VUE_APP_STRAPI_URL”

## install simple http server for serving static content  
RUN npm install -g http-server

## make the ‘app’ folder the current working directory  
WORKDIR /app

## copy both ‘package.json’ and ‘package-lock.json’ (if available)  
COPY package*.json ./

## install project dependencies  
RUN npm install

## copy project files and folders to the current working directory (i.e. ‘app’ folder)  
COPY . .

## build app for production with minification  
RUN npm run build

## EXPOSE 8080  
CMD [ “node”, “server.js” ]

I hope it helped. Happy coding.