Angular Multistage

readme.MD

Multistage Docker sur un projet Angular

Fichiers utilisés : Dockerfile et docker-entrypoint.sh
Le build docker va injecter ${BASE_URL} en base href dans le index.html

Récupérer valeurs d'environnement dans l'application. Ajout d'un service angular.

Dans le Header du fichier index.html ajouter

    <script type="text/javascript" src="assets/config.js"></script>

config.js.tpl à placer dans assets/config config.js injecte les variables

config.service Récupère les variables injectées

config.js.tpl

(function (window) {
  const config = {
    baseUrl: '${BASE_URL}',
    val1: '${VAL1}',
    val2: '${VAL2}'
  }
  window.config = window.config || config
})(this)

config.service.ts

@Injectable()
export class ConfigService implements Configuration {
  baseUrl: string
  val1: string
  val2: string

  constructor () {
    const browserWindow = window || {}
    const browserWindowConfig = browserWindow['config'] || {}
    for (const key in browserWindowConfig) {
      if (browserWindowConfig.hasOwnProperty(key)) {
        this[key] = browserWindowConfig[key]
      }
    }
  }
}

docker-entrypoint.sh

#!/bin/sh
set -e

INDEX_PATH=/usr/share/nginx/html/index.html
TEMP_INDEX=$(mktemp)
# Remplace les valeurs d'environnements existantes dans index.html et place le résultat dans un fichier temporaire
envsubst < ${INDEX_PATH} > ${TEMP_INDEX}
# Remplace le fichier index.html par le fichier temporaire
mv ${TEMP_INDEX} ${INDEX_PATH}
chmod a+r ${INDEX_PATH}

# Option 2 récuperer les valeurs environnement dans l'appli
CONFIG_PATH=/usr/share/nginx/html/assets/config.js
CONFIG_TEMPLATE_PATH=/usr/share/nginx/html/assets/config.js.tpl
if test -f ${CONFIG_TEMPLATE_PATH}; then
  envsubst < ${CONFIG_TEMPLATE_PATH} > ${CONFIG_PATH}
fi
# -> Fin option 2

exec "$@"

Dockerfile

# BUILD
FROM node:slim AS build

COPY . /app
WORKDIR /app
RUN npm run ng build -- --prod --base-href='\${BASE_URL}'

# RUN
FROM nginx:alpine AS run

COPY ./docker/docker-entrypoint.sh /usr/bin/
COPY ./docker/nginx.front.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist/my-app /usr/share/nginx/html

EXPOSE 80
ENV PORT=80
ENV BASE_URL=/
ENV VAL1=maVal1
ENV VAL2=maVal2

ENTRYPOINT ["/usr/bin/docker-entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]