How to communicate between angular and spring with docker compose - docker

Question

I am trying to get my Spring Boot, Angular and Mysql together making use of docker-compose (locally it is working). Spring Boot Image as well as angular image are working correctly after executing docker-compose up. I can see my angular app in the browser and I can make successfull Rest Call to my Spring API. The main problem ist, that if I make a Request from Angular to the API there is no successful Rest Call anymore...
Problem could be with db... first it says:
/usr/sbin/mysqld: ready for connections. Version: '8.0.21' socket: '/var/run/mysqld/mysqld.sock' port: 3306 MySQL Community Server - GPL.
in the console. But a bit later as last console output for db it says:
mbind: Operation not permitted
I don't know if this is a problem because I can make some Restcalls from browser (not angular) successfully as written earlier.
Another assumption I have is, that ports have to be configured in another way.. but I tried already a lot of different combinations also with spring application + always creating new spring image.
What can also be an issue is, that the db throws some SQL errors like
Error executing DDL "alter table userrole add constraint userIdReference foreign key (`user_id`) references `user` (`user_id`)" via JDBC Statement
But still I can make some RestCalls.. and for instance within MySql workbench I can import the sql file without any problems and start spring boot + angular locally to successfully start the project.
springpart_1 | Hibernate: select * from product where product.current_name = ?
Messages like above do appear on console after starting docker compose-up but does not load anything into angular client.
GET http://localhost:8077/products net::ERR_CONNECTION_REFUSED
Other than that I have no real clue what could be the problem.. probably also because I am new to docker. Thank you in advance for your help.
docker-compose_file
services:
springpart:
image: ce153fc5b589
ports:
- '8077:8077'
environment:
- DATABASE_HOST=db
- DATABASE_PORT=3306:3306
networks:
- backend
- frontend
depends_on:
- db
restart: on-failure
db:
image: mysql:8.0
volumes:
- .src/main/resources/guitarshop/currentGuitarshopData:/docker-entrypoint-initdb.d
environment:
- MYSQL_ROOT_PASSWORD=mypassword
- MYSQL_DATABASE=guitarshop
networks:
- backend
angularpart:
image: b8140c7fedec
ports:
- '4200:80'
networks:
- frontend
networks:
frontend:
backend:
angular-image-creation docker_file
FROM node:alpine As builder
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build --prod
FROM nginx:alpine
COPY --from=builder /usr/src/app/dist/guitarShopAngular/ /usr/share/nginx/html
EXPOSE 80
application.properties_file
spring.datasource.url=jdbc:mysql://db:3306/guitarshop?serverTimezone=UTC&useLegacyDatetimeCode=false?autoReconnect=true&failOverReadOnly=false&maxReconnects=10
spring.datasource.initialization-mode=never
spring.datasource.username = root
spring.datasource.password = mypassword
spring.datasource.platform=mysql
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL8Dialect
spring.jpa.show-sql = true
server.port = 8077
spring.main.banner-mode=off
spring.jackson.serialization.fail-on-empty-beans=false
spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=500KB
spring.servlet.multipart.max-request-size=500KB
spring.servlet.multipart.resolve-lazily=false
If you need any more information just let me know..

Answer 1

Try changing your volume bind mount like so:
"./src/main/resources/guitarshop/currentGuitarshopData:/var/lib/mysql"
Like mentioned in the comments I had no issues with getting the app up and running. In terms of the data it seems like the db files included in the project don't have any data, but I was able to add data manually and then see that data through the app. The only real issue in your compose was the bind mount path, but once I fixed that the data I added persisted after recreating containers.
Here are some suggestions as ideally you should be able to clone the repo and run "docker-compose up -d" and have the app running. Right now that isn't possible since you first have to build your spring app locally, then manually build the spring and angular docker images, then run compose up.
Create a new root folder and move the backend and frontend folders into it.
Move the compose file to the root folder.
Look into building your spring app by using a multi stage build like explained here: https://spring.io/blog/2018/11/08/spring-boot-in-a-container/#multi-stage-build.
Modify your compose file to something like this:
"
version: '3'
services:
springpart:
build: ./GuitarShopBackend
ports:
- '8077:8077'
environment:
- DATABASE_HOST=db
- DATABASE_PORT=3306
networks:
- backend
- frontend
depends_on:
- db
restart: on-failure
db:
image: 'mysql:8.0.17'
volumes:
# This will initialize your database if it doesn't already exist with your provided sql file
- ./GuitarShopBackend/src/main/resources/guitarshop/initialGuitarshopData:/docker-entrypoint-initdb.d
# This will persist your database across container restarts
- ./GuitarShopBackend/src/main/resources/guitarshop/currentGuitarshopData:/var/lib/mysql
ports:
- '3306:3306'
environment:
- MYSQL_ROOT_PASSWORD=mypassword
- MYSQL_DATABASE=guitarshop
networks:
- backend
angularpart:
build: ./GuitarShopAngular
ports:
- '4200:80'
networks:
- frontend
networks:
frontend: null
backend: null