Скачать или смотреть 15강 Next js UI 도커 배포 및 app db ui 통합 배포

-------------------------15강 까지의 소스 링크 -------------------------
https://naver.me/G02CaGmn
---------------------------------------------------------------------------------------


안녕하세요! 이번 영상은 넥스트JS UI를 도커(Docker) 이미지로 만들어 배포하는 과정을 쉽고 자세하게 설명해 드립니다. 도커를 활용해 UI, 서버, DB를 하나의 네트워크로 묶어 통합 배포하는 방법까지 배워보실 수 있어요.

---

📋 목차
1. 도커 이미지와 포트 설정 이해하기
2. 도커파일(Dockerfile) 작성하기 - UI 이미지 만들기
3. 빌더와 실행용 이미지 분리 및 권한 설정
4. 환경 변수 파일(.env) 만들기와 서버/클라이언트 구분
5. 도커 이미지 빌드 및 실행 테스트
6. 도커 컴포즈(Docker Compose)로 여러 컨테이너 네트워크 묶기
7. 넥스트JS 코드에서 API URL 환경 변수 활용하기
8. 최종 배포 확인 및 테스트
9. 다음 강의 예고 - 도커 허브에 배포하기
---

🐳 도커 이미지와 포트 설정 이해하기 [00:00:13]
넥스트JS UI는 도커 이미지로 만들어집니다.
UI는 내부 3000번 포트를 사용하고, 외부에서는 13000번 포트로 접근합니다.
서버(API)는 내부 8080번, DB는 5432번 포트를 씁니다.
내부 포트와 외부 포트가 다르니 포트포워딩(port forwarding)을 설정해야 합니다.
클라이언트와 서버 환경에 따라 환경변수를 다르게 설정해야 합니다.

📝 도커파일(Dockerfile) 작성하기 - UI 이미지 만들기 [00:01:44]
도커파일은 도커 이미지 만들기 위한 설정 파일입니다.
베이스 이미지는 `node:20-alpine` (가볍고 최신 노드 버전) 사용.
필요한 패키지 설치, 작업 디렉토리 설정, 소스 복사, 의존성 설치 등을 순서대로 작성합니다.
프로덕션 환경용 의존성만 설치해 불필요한 개발용 패키지는 제외합니다.

⚙ 빌더와 실행용 이미지 분리 및 권한 설정 [00:04:18]
빌드용 이미지와 실행용 이미지를 분리해 효율적으로 관리합니다.
빌더 이미지에서 소스 빌드 후 실행 이미지에 결과만 복사.
실행 이미지에서는 권한 문제를 막기 위해 별도의 사용자와 그룹을 생성해 권한을 부여합니다.
최종적으로 3000번 포트를 열고 `npm start` 명령어로 앱을 실행합니다.

🔄 환경 변수 파일(.env) 만들기와 서버/클라이언트 구분 [00:10:21]
서버와 클라이언트가 각각 호출할 API 주소가 다르므로 환경변수를 분리합니다.
`.env.local` 파일에 클라이언트용 API URL을, 서버용 API URL도 별도로 설정합니다.
예를 들어 클라이언트는 `http://localhost:8080`, 서버는 `http://bookmark-api:8080` 같은 식으로 구분합니다.

🚀 도커 이미지 빌드 및 실행 테스트 [00:15:05]
터미널에서 도커 이미지 빌드 명령어(`docker build`)를 실행해 UI 이미지를 만듭니다.
빌드 후 `docker run` 명령어로 컨테이너를 실행하고, 포트포워딩 설정을 확인합니다.
브라우저에서 `localhost:13000`으로 접속해 UI가 정상 작동하는지 테스트합니다.
도커 내부 네트워크 문제로 API 호출이 실패할 수 있으니 네트워크 설정을 꼼꼼히 확인해야 합니다.

🔗 도커 컴포즈(Docker Compose)로 여러 컨테이너 네트워크 묶기 [00:20:30]
여러 컨테이너(UI, API, DB)를 한꺼번에 실행하려면 `docker-compose.yml` 파일을 작성합니다.
각 서비스별 컨테이너 이름, 빌드 경로, 도커파일 위치, 포트, 환경변수 파일, 네트워크를 설정합니다.
네트워크는 `bridge` 드라이버로 묶어 컨테이너 간 통신이 가능하도록 합니다.
이렇게 하면 UI, API, DB가 하나의 네트워크 안에서 서로 연결되어 안정적으로 동작합니다.

🔧 넥스트JS 코드에서 API URL 환경 변수 활용하기 [00:27:02]
넥스트JS 코드 내에서 API 호출 URL을 환경변수로 관리합니다.
서버 사이드와 클라이언트 사이드를 구분해 각각 다른 환경변수를 읽도록 함수로 처리합니다.
예를 들어 `getApiUrl()` 함수를 만들어 상황에 맞는 URL을 반환하도록 구현합니다.
이렇게 하면 도커 환경과 로컬 개발 환경에서 모두 유연하게 API 주소를 사용할 수 있습니다.

✅ 최종 배포 확인 및 테스트 [00:33:08]
도커 컨테이너가 모두 정상적으로 실행 중인지 `docker ps`로 확인합니다.
브라우저에서 UI 접속 후 북마크 추가, 페이지 이동 등 기능 테스트를 진행합니다.
API 호출 로그도 확인해 서버와 UI가 잘 연결되었는지 점검합니다.
모든 기능이 문제없이 동작하면 성공적으로 도커를 통한 UI 배포가 완료된 것입니다.

📢 다음 강의 예고 - 도커 허브에 배포하기 [00:34:55]
다음 시간에는 이렇게 만든 도커 이미지를 도커 허브(Docker Hub)에 올려 배포하는 방법을 배웁니다.
도커 허브에 올리면 쿠버네티스 같은 클라우드 환경에서 쉽게 이미지를 가져다 쓸 수 있습니다.
스프링부트 API와 넥스트JS UI를 함께 도커 허브에 배포하는 실습도 예정되어 있습니다.
---

마무리 요약
이번 영상에서는 넥스트JS UI를 도커 이미지로 만드는 방법부터, 도커 컴포즈를 활용해 UI, API, DB를 하나의 네트워크로 묶어 통합 배포하는 과정을 자세히 다뤘습니다. 환경변수 설정과 권한 관리, 빌더 이미지 분리 같은 실무 팁도 배울 수 있어요. 다음 강의에서는 도커 허브에 이미지를 올려 클라우드 배포까지 이어집니다. 도커 배포가 처음이라면 이번 영상 내용을 천천히 따라 해 보시길 추천드려요!

도움이 필요하면 언제든 문의 주세요. 수고 많으셨습니다! 😊


#NextJS #Docker배포 #도커이미지 #프론트엔드배포
#Dockerfile #도커컴포즈 #DockerCompose #NextJS배포
#포트포워딩 #환경변수설정 #도커네트워크 #UI서버DB통합
#풀스택개발 #클라우드배포 #도커허브