[Docker] 1일차 실습 - 프론트엔드(Vue.js), 백엔드(Spring Boot)

🤓도커 첫걸음✏️

도커를 공부한 첫날의 내용을 개념과 실습으로 나누어 정리하는 중이다. 개념편은 🔗링크로...

이번 글은 실습 편이다!!

Windows 11 환경에서 Docker Desktop UI & CLI 병행하며 실습한다.

---

5. [실습] Vue.js 프론트엔드 배포 (w. NGINX)

5-1. Vue.js 프로젝트 빌드

👉 준비된 프론트엔드 프로젝트를 빌드하여 배포 가능한 정적 파일을 만든다.

이전에 만들어둔 것 중 백엔드와 연결된 것이면 좋을 것 같아 그것으로 빌드해줬다.

npm run build

빌드가 끝나면 /dist 폴더가 생성된다. NGINX가 서비스하게 될 웹 리소스가 생겼다!!

C:\projects\front_test
├── dist
│   ├── index.html
│   ├── css/
│   └── js/

 

 

5-2. Docker Hub에서 NGINX 이미지 가져오기

1. Docker Desktop 실행
2. 왼쪽 메뉴에서 Images 클릭
3. 우측 상단 Search Docker Hub에 nginx 검색
   

   

4. nginx (공식 이미지)가 검색되면, Pull 버튼 클릭
   

• Docker Desktop이 자동으로 이미지를 다운로드함
• 다운로드 완료 후, Images 탭에 nginx가 나타남
• nginx 이미지의 ▶️Run 버튼을 누른다.

5-3. Run a new container 창 설정

① Ports 포트포워딩

• Host port: 9999 입력
• Container port: 기본 80/tcp는 자동 입력되어 있음
  → localhost:9999으로 접근 가능하게 만들기 위해 포트포워딩을 설정한다.

② Volumes 볼륨 연결

Host Path (내 로컬 경로)	Container Path (컨테이너 내부 경로)
C:\projects\front_test\dist	/usr/share/nginx/html
C:\projects\front_test\nginx	/etc/nginx/conf.d/default.conf

📌 첫 번째 볼륨은 빌드된 정적 파일 디렉토리, 두 번째는 NGINX 설정 파일 경로다.

/etc/nginx/conf.d/default.conf ⤵️

server {
    listen       80;
    server_name  localhost;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

③ Environment variables

→ 특별히 넣을 게 없다면 비워두면 된다.

👉🏻설정 후   Run 클릭‼️

 

5-4. Run‼️ → 컨테이너 실행 완료!

컨테이너가 실행되면 Containers 탭에 nginx라는 이름으로 컨테이너가 나타난다.

실행중인 nginx를 누르면 Exec 탭에서 명령어 입력도 가능함( apt update 실행한 화면 ⤵️)

 

5-5. 동작 확인

브라우저에서 접속

http://localhost:9999

빌드한 Vue.js 정적 웹사이트가 잘 뜨는지 확인한다!
설정이 안 맞거나 파일이 없으면 403 에러나 기본 NGINX 페이지가 뜬다.

 

---

6. [실습] Spring Boot 백엔드 애플리케이션 Docker 컨테이너로 실행하기

6-1. Spring Boot JAR 빌드

(캡쳐이미지 참고⤵️) IntelliJ IDEA ultimate ver. 에서는 코끼리 버튼의 bootJar를 실행하면 간단히 된다..

build/libs/ 경로에 demo-0.0.1-SNAPSHOT.jar가 생성된다.

 

6-2. 백엔드 컨테이너 실행

이번에는 docker run 명령어로 실행해보기로 한다. 🔗정리 Docker run 명령어와 주요 옵션들

docker run --name backend
	-p 8080:8080
    -d  openjdk:17-ea-slim-buster
    -v {볼륨설정}
    java -jar  test-0.0.1-SNAPSHOT.jar

docker run --name backend
	-p 8080:8080
    -v "C:\projects\backend_test\build\libs\demo-0.0.1-SNAPSHOT.jar":/app.jar
    -d  openjdk:17-ea-slim-buster
    -e	DB_USER: root
    -e	DB_URL: jdbc:mariadb://192.X.X.X/web
    java -jar /app.jar

 

Run a new container (Docker Desktop UI) ⤵️

① Ports

• Host port: 8080
• Container port: 8080 (Spring Boot가 기본적으로 사용하는 포트)

② Volumes

• Host path : C:\demo\build\libs\demo-0.0.1-SNAPSHOT.jar
• Container path : /app.jar

③ Environment variables

• DB_USER: root
• DB_URL: jdbc:mariadb://192.X.X.X/web

④ 명령어(Command)

java -jar /app.jar

 

6-3. 실행 후 접속 테스트

브라우저 또는 Postman에서

http://localhost:8080

정상적으로 API가 동작하는지 확인한다.