Issue
I have one UI application (Angular application) and backend application (Java Spring boot application). I want to deploy them in docker containers, and want to communicate backend and front-end application. without hard-coding URLs and other stuff, everything which is required for communication should be resolved dynamically.
So basically what I want to create is the local development environment which is kind of similar to the production one, not the exact replica but function like production env.
Solution
So the way I chose to resolved this problem is as described following. First of all, need to understand the dir structure.
E:.
│ .gitattributes
│ docker-compose.yml
│ README.md
│
├───beservice
│ Dockerfile
│
├───nginx
│ └───conf
│ ngnix.conf
│
└───ui-app
Dockerfile
Backend application has its own docker file and frontend application have its own. One important file is Nginx file nginx.conf.
Let us have a look at what is inside the files.
└───beservice
Dockerfile
FROM openjdk:11.0.4-jre
LABEL APP_ID="beservice"
VOLUME /app
EXPOSE 8080
ENTRYPOINT java -Xdebug -Xrunjdwp:transport=dt_socket,address=*:8000,server=y,suspend=n -jar /app/$JAR
└───ui-app
Dockerfile
FROM nginx
LABEL APP_ID="ui-app"
RUN rm /etc/nginx/conf.d/default.conf
CMD ["nginx", "-g", "daemon off;"]
E:.
└───docker-compose.yml
version: "3"
services:
beservice:
build:
context: ./beservice # beservice1 -> backend Service 1
image: beservice:latest
container_name: beservice
volumes:
- [ REPLACE this with Backend Service path ]:/app # Like E:\repos\backend-service\build\libs
ports:
- 9002:8080 # App access Port, inside container it is 8080 and mappped with 9002
- 1111:8000 # to remote debug springboot application
environment:
JAR : [ jar file name - locate form build path ] # Just Jar Name like module-backend-0.0.1-SNAPSHOT.jar
uiapp:
build:
context: ./ui-app
image: ui-app:latest
container_name: ui-app
volumes:
- [ path of ui app build ]:/usr/share/nginx/html # We need to Map UI app build path here, Like my angular UI App, E:\repos\ui-app\dist\ui-app
- nginx\conf\ngnix.conf:/etc/nginx/conf.d/
depends_on:
- beservice
ports:
- 80:80
The most important file, ngnix.conf
├───nginx
│ └───conf
│ ngnix.conf
server {
listen 80;
server_name host.docker.internal;
# By default land on localhost:80 to root so in root we copied UI build to the ngnix html dir.
# have a look to docker-compose uiapp service.
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
# after location add filter, from which every endpoint starts with or comes in endpoint
# so that ngnix can capture the URL and reroute it.
# like /backend/getUserInfo/<UserId>
# In above example /backend is that filter which will be captured by Ngnix and reroute the flow.
location /backend {
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#proxy_pass http://<ContainerName>:<PortNumber>;
# In our case Container name is as we setup in docker-compose `beservice` and port 8080
proxy_pass http://beservice:8080;
}
}
Development environment with containers
This repository contains all the required files and configuration which help you to setup a containerized enviournment, which have a UI application in different container and a backend application in different container. Both the applications are communication using Ngnix server.
Ngnix reverse-proxy configuration is described in detail.
Setup Instructions:
- Update repositories backend and repos with the latest code.
- Clean build your backend and UI app.
- Replace placeholder [ ... ] in docker-compose.yml file, as described in comments.
- Open docker-compose.yml, in each and every step I added comments. and suggests changes.
- Like I go through docker-compose in backend service, You just need to map app build path to the
- volume and pass build Jar Name
- In UI App, Just pass the UI build path. Exhibit in case of Angular App "E:\repos\ui-app\dist\ui-app" How to Run:
Open powershell in the root dir of current Repo/localDevEnv and run following command
docker-compose -f "docker-compose.yml" up -d --build
command complete with output:
Creating beservice ... done
Creating uiapp ... done
For more details visit this: https://github.com/dupinder/NgnixDockerizedDevEnv
Answered By - Dupinder Singh Answer Checked By - Gilberto Lyons (PHPFixing Admin)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.