2025.05.23

Docker Desktop/ Docker Hub 로컬 배포

CI/CD 파이프라인을 구성할 때 갖아 중요한 전제는 CI 단계에서 실행될 테스트 코드가 사전에 준비가 되어있어야 한다.
테스트 코드 없이 CI/CD 파이프라인을 구축하는 것은 자동화된 흐름만 존재할 뿐 품질을 검증하지 못하는 형식적인 파이프라인을 만드는 것과 다르지 않다.
CI 는 코드가 통합될 때마다 자동으로 테스트를 실행해 변경 사항의 안정성을 검증하고, 모든 테스트가 통과한 경우에만 빌드 단계로 넘어가도록 설계된다.

Docker Desktop 를 설치한다.

설치 후 회원가입을 하고 닉네임은 소문자로 작성하며 기억해야 한다.

프론트와 백엔드 연결하기

react 와 springboot 을 한 파일 안에 작성한다.

로컬에서 백엔드의 포트 번호는 8080, 프론트는 5173 이지만 docker container 에 올리게 되면 포트번호가 변경되어 사용된다. yml 파일에서 포트번호를 변경할 수 있다.

frontend 서버에서 넘어오는 num1, num2 를 받기 위한 메서드를 작성한다.

위 메서드에서 테스트 코드를 작성해야 CI/CD 의 의미를 찾을 수 있다.

• control + shift + t : 해당 클래스와 동일한 레이어에 테스트 코드 작성 단축키

이제 react 폴더를 만든다.

• npm create vite@latest (생성할 폴더명)
• npm i
• npm run dev
  서버와 연결을 해야 계산이 가능하다. fetch 구문으로 연결을 시도해도 원하는 결과를 가져올 수 없다.

SOP : Same-Origin Policy
보안을 위해 브라우저는 기본적으로 같은 출처(프로토콜, 도메인, 포트)의 리소스만 허용

SOP 정책으로 인해 CORS 설정을 해줘야 서버와 프로트가 연결이 가능하다.

CORS : Cross Origin Resource Sharing
교차 출처 리소스 공유

CORS 설정은 프론트, 백엔드 둘 다 가능하지만 백엔드에서 설정하는 것을 추천한다.

• 프론트엔드에서 CORS를 설정하는 방식은 개발 단계에서는 임시적인 우회책으로 사용할 수 있지만, 브라우저 단에서만 적용되기 때문에 실제 서버의 접근 제어 정책을 보장하지 못한다는 한계가 있다.
• 반면 백엔드에서 CORS를 설정하면 허용할 출처(origin), HTTP 메서드, 요청 헤더, 인증 정보 포함 여부 등을 서버 기준으로 중앙에서 일관되게 관리할 수 있어 보안성과 유지보수성이 높아진다.
• 또한 백엔드 CORS 설정은 특정 프론트엔드에 종속되지 않고 모든 클라이언트에 동일하게 적용할 수 있으며, dev·staging·prod와 같은 환경별 설정 분리나 보안 정책 변경에도 유연하게 대응할 수 있다.

config 파일을 만들어서 환경 설정을 해준다

• alt + intert

오버라이딩 설정을 한다.
config 파일에서 해당 포트를 허용해준다.fetch 의 결과물이 response 안에 담기는데 json 파일로 변환을 한다.설정을 완료하면 프론트와 백엔드가 연결된 것을 확인할 수 있다.

이 상태에서는 React 와 IntelliJ 어플리케이션을 실행 시켜야만 연결이 가능하다.

Docker 로 배포해보기

Docker 명령어

Windows PowerShell 을 관리자 권한으로 실행

• 도커 버전확인
• 도커 허브에서 pull 해보기도커이미지에 들어가게 되면 pull 된 것을 확인할 수 있다.
• 다운 받은 도커 이미지 확인
• 도커 컨테이너 확인
• 과거 컨테이너 확인
• 도커 삭제현재 컨테이너를 삭제하지 않고 이미지를 삭제하게 되면 에러가 나게 된다. 컨테이너를 먼저 종료 후 삭제를 해야한다.

Docker file 만들기

Gradle > build > build

bootJar : 테스트를 거치지 않고도 실행 가능한 JAR 생성 가능
build : 테스트를 반드시 실행한 뒤 빌드

빌드를 하게 되면 build > libs 안에 저장된다.프로젝트 > new > Dockerfile 도커파일을 만든다.

jdk 로 베이스 이미지 만들기,
.jar 로 끝나는 파일을 app.jar 라는 이름으로 복사,
이미지 실행터미널 열기
프로젝트 내에서 도커파일을 찾고 해당 이름으로 이미지를 만든다.

이미지 컨테이너에 올리기

백그라운드에 포트번호 지정해서 컨테이너 이름을 정하고 해당 이미지를 컨테이너에 올린다.애플리케이션을 실행 시키지 않아도 동작하는 것을 확인할 수 있다.프론트에서도 바뀐 포트번호로 변경해주기

이제 프론트도 이미지 만들어서 컨테이너에 올린다. 프로젝트 루트 파일에 Dockerfile 을 올린다.Java 에서 From 절에 JDK 를 작성했던 것처럼 Javascript 에서는 node.js 로 작성한다.
컨테이너 내에서 사용할 임시 폴더를 생성한다.
애플리케이션 복제한다.
모듈을 다운 받고 실행 명령어를 작성한다.프로젝트 내에서 도커파일을 해당 이름으로 이미지를 만든다.백그라운드에 포트번호 지정해서 컨테이너 이름을 정하고 해당 이미지를 컨테이너에 올린다.컨테이너에 올라가서 동작하는 것을 알 수 있다. 하지만 아직 cors 정책으로 인해 아직 정상 동작을 하지 않는다.

CORS 정책 해결하기

config 파일에서 바뀐 프론트 이미지 포트 번호로 변경한다.코드를 변경했으니 다시 build 를 진행한다. 기존 build > libs 안에 있던 파일을 삭제한다.
기존에 있던 containers 를 멈추고 삭제한다.해당 이미지도 삭제한다.build 를 다시 진행한다.이미지를 다시 생성하고 컨테이너도 돌린다. 정상적으로 동작하는 것을 확인할 수 있다.

Docker file 명령어

• FROM : 베이스 이미지를 설정하는 명령어
• COPY : 파일이나 디렉토리를 이미지로 복사하는 명령어
• RUN : 이미지를 만드는 과정에서 이미지에서 사용해야 하는 명령어를 실행해주는 명령어
• CMD : 컨테이너가 실행되었을 때 실행되는 명령어를 정의하는 명령어
• ENTRYPOINT : 컨테이너가 run 으로 실행되었을 때 실행되는 명령어를 정의하는 명령어
• WORKDIR : COPY, ADD, RUN, CMD 등이 수행될 기본 디렉토리를 설정해주는 명령어

이뿐만 아니라 Docker file 명령어는 다양하게 있다.

Docker Compose

같은 상위 폴더 안에 프론트, 백엔드 위치시키고 같은 레이어에 compose 파일을 생성한다. 같이 묶을 서비스를 정의한다.두 서비스를 같이 실행시킨다.정상 작동하는 것을 확인할 수 있다.