Question 82311 in Docker Question posted in
The official documentation can be found here.

Build angular project in Dockerfile

i have Angular/Node Project in Gitlab..
I Have Dockerfile

FROM node:12 as builder    
WORKDIR /app
COPY package.json package-lock.json ./
ENV CI=1
RUN npm ci    
COPY . .
RUN npm run build-web --output-path=/dist

this Dockerfile is for Master branch , i want if i push code in develop branch, want to define in Dockerfile how to build , for example if i push in develop , in dockerfile want be

RUN npm run build-dev

How i can do this ? can i use if else statement in dockerfile ? or yaml

Tags:

2

Answers


  1. 0 
    workflow:
  rules:
    - if: $CI_COMMIT_BRANCH == "develop"
      variables:
        SSH_IP: "[email protected]"
        ENVIRONMENT: "develop"
    - if: $CI_COMMIT_BRANCH == "master"
      variables:
        SSH_IP: "[email protected]"
        ENVIRONMENT: "production"

    I achieve this by defining a variable in my CI file that
    checks for which environment i’m trying to build, based on the branch i’m committing from (You could change this to fit your situation).

    A bit unrelated if you specifically require the image locally, but might be
    the solution you’re looking for if you’re trying to then deploy the image somewhere.

    Login or Signup to reply.
  2. 0

    Technically you should use single artefact and have it take the configuration at runtime. We do that using angular & environments with a envsubs script on the launch.

    You could also check this SO question which makes a good example of it.

    We are using:

    Inside index.html you add script source to /assets/env.js , which gets pulled on page load from static files inside container (assets) and in container runtime script (ENTRYPOINT) just execute:

    #!/bin/sh

# window env substitutions
envsubst < /usr/share/nginx/html/de-DE/assets/data/env.template.js > /usr/share/nginx/html/de-DE/assets/data/env.js
envsubst < /usr/share/nginx/html/en-US/assets/data/env.template.js > /usr/share/nginx/html/en-US/assets/data/env.js

exec "$@"

    which then fills env.js with env.template.js (which has $PLACEHOLDER signs, which are overriden by env variables of container).

    and then load it into window object.

    And to even make it type safe we created:

    export interface RuntimeEnvironmentInterface {
  baseUrl: string;
}

    which then gets global override on the Window object:

    declare global {
  interface Window {
    envVariables: RuntimeEnvironmentInterface;
  }
}

    And inside application’s environment settings (environment.prod.ts for angular):

    export const environment: EnvironmentInterface = {
  production: true,
  api: window.envVariables.baseUrl + '/api/v1',
};

    We use it in production for almost two years now and it works as a charm (knocking on the wood)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search