Starts in:
2 DAYS
1 HR
15 MIN
27 SEC
Starts in:
2 D
1 H
15 M
27 S
Open Closed

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


User avatar
0
buaziz created
  • ABP Framework version: v3.1.0-rc4
  • UI type: Angular
I want to know the steps to dockerize the abp solution with Angular Tiered or non-tiered
  • Dockerfiles required for HttpApi, Angular and database
  • Docker-compose using Tiered and Non-Tierd architecture

4 Answer(s)
  • User Avatar
    0
    buaziz created

    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?

  • User Avatar
    0
    buaziz created

    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
  • User Avatar
    0
    gterdem created
    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.

  • User Avatar
    0
    buaziz created

    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 :(

Made with ❤️ on ABP v9.1.0-preview. Updated on November 20, 2024, 13:06