- 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)
-
0
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?
-
0
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
-
0
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.
-
0
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 :(