백엔드 Docker 배포 + 프론트 이미지 연동까지

개요

이전 글 ( Docker 입문기: Hub에서 이미지 받아보기부터 ) 어느정도 개념만 잡았고,
본격적으로 프론트랑 백엔드랑 어떻게 연동이 되는지 실험해보도록 하겠다.

---

목표

프론트엔드 실행 환경 구성

• Docker Hub에서 프론트엔드 이미지를 pull 받아오기
• docker run 명령어나 Docker Desktop을 이용해 컨테이너 생성 및 실행
• 프론트 컨테이너 포트 확인 (localhost:3000 등으로 열리는지)

백엔드 프로젝트 이미지화 및 실행

• 인텔리제이에서 백엔드 프로젝트 jar 파일로 build
• Dockerfile 작성
• docker build 로 이미지 생성
• 환경 변수 포함하여 docker run으로 컨테이너 실행

프론트와 백엔드 연결 확인

• 브라우저에서 회원가입 / 로그인 시도하여 네트워크 탭으로 응답 확인

---

프론트엔드

1. Docker Hub 에서 이미지 Pull

( 이미 만들어진 것을 사용한다. )
docker pull dannyseo4284/taskflow-frontend-integration:latest

모든 과정이 성공한다면 이와 같이 Docker Desktop 의 Images 에 다음과 같이 뜬다.

2. docker run 명령어를 사용하여 컨테이너에 생성

• 컨테이너 생성 전
  
• docekr run 실행
  
• 컨테이너 생성 후
  

3. localhost:3000 으로 열리는지 확인

여기까지 했다면 프론트 구성은 종료되었다.

---

백엔드

1. 인텔리제이에서 백엔드 프로젝트 jar 파일로 build

프로젝트 root 에서 ./gradlew clean build 를 하게 되면 /build/libs 에 자신 프로젝트의 jar 파일이 나온다.

여기서 포인트는 반드시 용량이 적은게 아닌 라이브러리까지 전부 포함이 되어 있는 용량이 큰 jar 을 쓸 것 이다.

2. Dockerfile 작성

처음에는 몰랐는데, 이거 txt 파일에서 작성하는 것이였다.

FROM openjdk:17-jdk-slim
COPY build/libs/Outsourcing-project-0.0.1-SNAPSHOT.jar app.jar
ENTRYPOINT ["java", "-jar", "/app.jar"]

만들어주면 끝난다.

3. docker build 로 이미지 생성

docker build -t <생성할 이미지이름> . 을 사용하여 이미지를 생성한다.

4. 환경 변수 포함하여 docker run으로 컨테이너 실행

혹여나 인텔리제이에서 환경변수를 설정해놨다면?

docker run -d -p 8080:8080   
-e DB_NAME=<DB_NAME>
-e DB_USER=<DB_USER>  
-e DB_PASSWORD=<DB_PW>  
--name outsourcing-container outsourcing-backend

도커에 환경변수를 받을 수 있도록 위와 같은 명령어를 입력해줘야 한다.

USER 와 PW 는 안보이게 지웠지만, 본인 로컬 환경에 맞는 걸로 써주면 된다.

확인해보면?

잘되는 걸 확인할 수 있다.

혹여나 잘못된 환경변수 또는 환경변수 설정을 안하고 연다면...
이런 경우가 발생할 수 있으므로 주의해야한다.

---

프론트와 백엔드 연결 확인

브라우저에서 회원가입 / 로그인 시도하여 네트워크 탭으로 응답 확인

응답은 정상적으로 호출이 되나, CORS 문제를 일으켰다.
이부분에 대해서는 다음글에 작성하도록 하겠다.

---

느낀점

• 프론트는 프론트가 만든 컨테이너 환경에서 실행되고,
  백엔드는 백엔드가 만든 컨테이너 환경에서 실행된다.
  각자 자기 환경에 맞게 따로 실행되지만,
  포트만 잘 연결하면 서로 통신할 수 있다는 게 핵심이다.