[docker] react 앱을 컨테이너 이미지로 생성하기

 

 

 

 

 

react 이미지를 생성하는

도커 파일은 위와 같다.

 

 

 

test_frontend 라는 이름으로

이미지 빌드

 

 

 

db와 backend 컨테이너가 실행되고 있는 test network에서

test_frontend 컨테이너를 실행

 

 

실행된 앱에서 브라우저로

로그인시 에러 발생 

 

 

 

 

 

요청을 보내는 주소가 localhost로 되어 있다. 

 

 

 

도커가 생성한 test 네트워크에서 실행 중인 test-db는

 

 

172.18.0.1 네트워크에서 실행되고 있고

ip 주소는 172.18.0.2이다.

 

 

test_backend정보 검색

 

 

 

test_backend는

172.18.0.1네트워크 대역에서 실행중이고

ip 주소는 172.18.0.3이다.

 

 

 

 

test_frontend는

 

 

 

172.18.0.1네트워크에서 실행 중이고

ip 주소는 172.18.0.4 이다.

 

 

 

 

그림으로 나타내면 위와 같다

-> 즉 test_fontend에서

localhost:8888로 요청을 보내면

같은 컨테이너로 요청을 보내게 되는 것인데

같은 컨테이너의 :8888은 요청을 처리해 줄수 없다. 

 

 

 

엔드 포인트 요청을 받을 컨테이너 명인

test_backend로 변경

 

 

바뀐 소스 코드로 이미지를 다시 빌드

 

 

 

test 네트워크 안에서

이미지 실행

 

 

 

또다시 에러 발생

 

 

 

test_frontend의 로그를 확인해보면

 

 

 

에러가 발생하지 않았다.

 

 

 

test_backend의 로그를 확인해 보니

"_" 언더바를 사용하면은 안되는거 같다. 

 

 

 

이번에는 test_backend를

test-backend로 실행

 

 

 

test_frontend에서 요청을 보내는

도메인 명도 수정한다.

 

 

수정한 코드를

다시 빌드한다.

 

 

 

 

test_frontend 이미지로

컨테이너 실행

 

 

웹 화면에서 로그인을 한다.

 

 

 

 

로그인이 정상적으로 되었다.

 

 

결론

컨테이너안의 어플리케이션간의

통신 과정이 문제였다.

 

결론

이미지를 빌드하기 전에

컨테이너안의 어플리케이션의 통신

과정을 간단하게 도식화 하면은

이미지 빌드 및 테스트하는

시간이 조금 줄어들수 있을거 같다.

 

 

https://github.com/shaikahmadnawaz/react-docker?tab=readme-ov-file

GitHub - shaikahmadnawaz/react-docker: Deploying React with Docker: A Complete Guide