동아리 지원사이트를 만들면서 프론트 배포를 한 과정을 적은 글입니다.
이번에는 nginx를 이용해서 프론트 배포를 진행하였습니다.
이 글과 이어지는 내용입니다!

아래와 같은 순서로 개발을 진행하였습니다.

1. 프로젝트 루트 디렉토리에 Dockerfile을 생성
2. 프론트 애플리케이션을 Nginx를 사용하여 Docker 이미지로 만들기
3. 도커 이미지 빌드 후 dockerhub에 push 후 pull 받기

1. 프론트 엔드 파일에서 Dockerfile 생성

프론트 엔드 파일에서 Dockerfile을 생성합니다. 이 파일은 프론트 엔드 애플리케이션을 Nginx를 사용하여 Docker 이미지로 만들어주는데 사용됩니다!

# Dockerfile

# 베이스 이미지 설정
FROM nginx:latest

# 작업 디렉토리 설정
WORKDIR /usr/share/nginx/html

# 로컬 프로젝트 파일 복사
COPY . .

# 컨테이너 실행 시 실행될 명령
CMD ["nginx", "-g", "daemon off;"]

• FROM nginx:latest : Nginx의 최신 이미지를 베이스로 사용합니다.
• WORKDIR /usr/share/nginx/html : 작업 디렉토리를 지정하여 해당 디렉토리에서 작업을 진행합니다.
• COPY . . : 로컬의 프로젝트 파일을 현재 작업 디렉토리로 복사합니다.
• CMD ["nginx", "-g", "daemon off;"] : 컨테이너가 실행될 때 실행되는 명령으로, Nginx를 데몬 모드로 실행합니다.

저는 아래와 같은 위치에 파일을 만들어 주었습니다.

2. 도커 이미지 빌드 후 Docker Hub에 Push

도커 이미지를 빌드하고, 해당 이미지를 Docker Hub에 푸시합니다.

2-1. 도커 이미지 빌드

위의 Dockerfile이 있는 디렉토리에서 다음 명령어를 실행하여 도커 이미지를 빌드합니다.

# 도커 이미지 빌드
docker build -t your-dockerhub-username/your-image-name .

여기서 your-image-name은 사용자가 지정한 이미지의 이름이며, .은 현재 디렉토리를 의미합니다.

2-2. 도커 허브 푸쉬

# Docker Hub에 로그인
docker login

# 빌드한 이미지를 Docker Hub에 푸시
docker push your-dockerhub-username/your-image-name

여기서 your-dockerhub-username는 여러분의 Docker Hub 계정 이름이고, your-image-name은 원하는 이미지 이름입니다.

저는 아래와 같이 입력하였습니다.

docker build -t mic050r/msg-nginx:v1.2 .
docker push mic050r/msg-nginx:v1.1  

3. Ubuntu에서 이미지 풀 받아 실행

이제 Ubuntu 서버에서 이미지를 풀 받고 실행해보도록 하겠습니다.

# Docker Hub에서 이미지를 풀 받음
docker pull your-dockerhub-username/your-image-name

# 풀 받은 이미지를 실행
docker run -d -p 8080:80 your-dockerhub-username/your-image-name

이제 웹 브라우저에서 http://배포한주소_ip:8080으로 접속하여 배포된 프론트 엔드를 확인할 수 있습니다!

저는 아래와 같이 입력하였습니다.

docker pull mic050r/msg-nginx:v1.2

docker run -p 8082:80 -d --name msg-nginx mic050r/msg-nginx:v1.2

배포된 주소로 잘 실행이 되는것을 확인 했습니다!