Docker를 이용하여 프론트엔드에게 백엔드 환경 제공하기

김민우·2022년 8월 21일
0

Docker

목록 보기
2/4

사이드 프로젝트에서 프론트엔드분과 협업할때, EC2(moamoadev.shop/api)를 이용하여 API를 제공했지만, JWT간 리프레시 토큰을 쿠키로 제공할때, 다른 도메인간 쿠키가 전달되지 않는 이슈가 있었다.

그래서 jar 파일을 받아 프론트엔드쪽에서 로컬로 서버를 돌리는 방법밖에 없었다. 하지만 redis 설치 등 동일한 개발 환경을 제공하기에는 힘들었다.
그래서 Docker를 이용해서 공통된 환경을 구성 했다.😊

참고자료1
참고자료2

➡️ 본 실습은 윈도우10 OS에서 진행되었습니다.


🏷 1. Dockerfile 생성

사이드 프로젝트에서 java를 띄울 jdk11을 구성하고, jar 파일을 실행하기 위한 구성 조건을 만든다.

  • 경로는 프로젝트 최상위 상단에 만들어준다. (backend/Dockerfile)
FROM openjdk:11-jdk

# JAR_FILE 변수 정의 -> 기본적으로 jar file이 2개이기 때문에 이름을 특정해야함
ARG JAR_FILE=./build/libs/moamoa-0.0.1-SNAPSHOT.jar

# JAR 파일 메인 디렉토리에 복사
COPY ${JAR_FILE} app.jar

# 시스템 진입점 정의
ENTRYPOINT ["java","-jar","/app.jar"]
  • Dockerfile
$ docker build -t spring .

(docker build -t {이미지명} .) 으로 터미널에 입력하면, 도커 이미지가 로컬에 빌드 된다.
이미지 명은 아무렇게나 해도 상관 없다.

$ docker images

위 명령어를 입력하여 도커 이미지가 잘 생성 되었는지 확인해보자!

🏷 2. 컨테이너 실행하기

$ docker run -d -p 8080:8080 spring
  • docker run -d -p 명령어로 8080 포트로 접속하도록 설정했다. Docker와 터미널에 컨테이너가 잘 실행됨을 알 수 있다.

이제는 도커 컨테이너를 내 리포지토리에 push할 차례이다.

$ docker ps

  • 우선, docker ps 명령어를 이용하여 컨테이너 ID를 알아내야 한다.
$ docker login
  • docker commit&push 하기 전에 docker login을 통해 Dockerhub에 접속하자.
$ docker commit $CONTAINER_ID $IMAGE_NAME:{버전ID}

CONTAINER_ID는 컨테이너 ID, IMAGE_NAME은 배포할 이미지 이름을 설정해야 한다.

$docker push $IMAGE_NAME:{버전ID}

docker push를 통해 public으로 리포지토리에 푸쉬해보자!

✔️ 푸쉬가 완료되면 이렇게 REMOTE REPOSITORIESIMAGE_NAME이 뜬다!


[프론트엔드 관점에서 도커 푸쉬한 이미지 사용하기]

내 프로젝트에서 개발환경(redis)와 동일한 환경을 제공하기 위해 프론트엔드에서 해야 할 일을 정리하려 한다.😊

윈도우 10에 도커 설치/회원가입

우선 도커 허브를 설치 및 회원가입이 필요하다. 위 링크를 통해 가입하자!

1. redis 컨테이너 구성하기

$ docker pull {이미지ID}

우선, 터미널에서 redis를 pull 해야 한다.

$ docker pull redis
$ docker run -p 6379:6379 redis

위 명령어를 통해 redis 이미지를 pull 해보자.
사이드 프로젝트에서 redis를 6379포트로 사용하고 있으므로, -p 명령어로 redis 이미지를 컨테이너에 실행해보자.

2. jar 파일 이미지 실행하기

jar 파일을 푸쉬한 이미지를 똑같은 방식으로 pull하여 실행시키면 된다.

$ docker pull ${imagename}:버전ID

$ docker run -d -p 8080:8080 ${imagename}:버전ID

  • 위 명령어를 입력하여 컨테이너를 실행해주자.

  • redis, jar 파일이 컨테이너에 실행되고 있는 모습

localhost:8080 스웨거 화면이 정상적으로 뜨는것을 볼 수 있다!😊

profile
Backend Developer

0개의 댓글