Running Angular App Tiered/Non-Tiered on Docker #397

4 Answer(s)

• 

  0

  buaziz created 3 years ago

  Imagine you created a abp Angular startup template tiered or non teired and you want to run it immediatly on Docker

  what Dockerfiles and docker-compose files you would need?

  Save Cancel
• 

  0

  buaziz created 3 years ago

  Suggestions for Adding Docker to startup templates.

  • ABP Suite : add check box in create solution "Add Docker support"
  • Docs : Add article on how to add docker to Angular/MVC startup templates Teired/Non-tiered

  Save Cancel
• 

  0

  gterdem created 3 years ago

  Support Team Senior .NET Developer

  Hello @buaziz,

  Thanks for the suggestion.

  For all the apps, its good to have DbMigrator project dockerized. (Either let visual studio create a dockerfile for you or you can write your own)

  For angular, there are 2 ways to dockerize. One of them is using caching and restoring npm packages inside container. Other one is building the dist outiside the container and only copy the dist in the dockerfile.

  For non-tiered backend, you need to dockerize HttpApi.Host project. For tiered backend, you need to dockerize both HttpApi.Host and IdentityServer projects.

  I hope it was helpful.

  Save Cancel
• 

  0

  buaziz created 3 years ago

  Thanks @gterdem for your help.

  the next problem is to have a dynamic environment for angular for docker-compose.

  I solved this by using the below

  change environment.prod to this

  import { Config } from '@abp/ng.core';
  
  const clientbaseUrl = 'ANGULAR_CLIENT_URL_BASE';
  const hostbaseUrl = 'API_HOST_URL_BASE';
  
  export const environment = {
    production: true,
    application: {
      clientbaseUrl,
      name: 'demo',
    },
    oAuthConfig: {
      issuer: hostbaseUrl,
      redirectUri: clientbaseUrl,
      clientId: 'Demo_App',
      responseType: 'code',
      scope: 'offline_access Demo',
    },
    apis: {
      default: {
        url: hostbaseUrl,
        rootNamespace: 'MYPROJECT.Demo',
      },
    },
  } as Config.Environment;
  
  

  add Dockerfile to angular with this

  ### STAGE 1: Build ###
  FROM node:12.18.3-alpine AS build
  
  WORKDIR /app
  
  COPY package.json yarn.lock replace_env-variables.sh ./
  ARG ANGULAR_CLIENT_URL_BASE
  ARG API_HOST_URL_BASE
  ENV ANGULAR_CLIENT_URL_BASE "$ANGULAR_CLIENT_URL_BASE"
  ENV API_HOST_URL_BASE "$API_HOST_URL_BASE"
  
  
  RUN yarn install
  COPY . .
  RUN yarn build --prod
  
  
  ### STAGE 2: Run ###
  FROM nginx as final
  
  
  ## Remove default nginx website
  RUN rm -rf /usr/share/nginx/html/*
  
  COPY --from=build /app/dist/myproject /usr/share/nginx/html
  COPY --from=build /app/replace_env-variables.sh /
  
  CMD ["sh", "replace_env-variables.sh"]
  
  

  add replace_env-variables.sh file to angular root

  
  #!/usr/bin/env sh
  
  find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,ANGULAR_CLIENT_URL_BASE,'"$ANGULAR_CLIENT_URL_BASE"',g' {} \;
  find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,API_HOST_URL_BASE,'"$API_HOST_URL_BASE"',g' {} \;
  nginx -g "daemon off;"
  
  

  and now I can use these in my docker-compose file

    myproject-demo-angular:
      # restart: always
      environment:
        - ANGULAR_CLIENT_URL_BASE=http://localhost:4200
        - API_HOST_URL_BASE=https://localhost:44366
  

  this took many hours to solve :(

  Save Cancel