💠 임의의 프로젝트 생성
깃허브에서 레포지토리 생성한 후, 로컬에서 Vite를 사용하여 React 프로젝트를 생성하고 이를 Git과 연결한다.
# 로컬 터미널
git init
git branch -m main
git remote add origin {레포지토리 주소}
git pull origin main // readme파일 추가한 경우, 충돌 방지💠 Dockerfile & nginx.conf
react 프로젝트의 최상위에 docker 폴더를 만들고, Dockerfile과 nginx.conf 파일을 생성한다.
❗️docker 폴더를 구성하니 구조 에러가 발생하여 일단 제거하였다.
Dockerfile
# nginx 이미지 사용
FROM nginx:latest
# root에 /app 폴더 생성
RUN mkdir /app
# work dir 고정
WORKDIR /app
# work dir에 dist 폴더 생성
RUN mkdir ./dist
# host pc의 현재 경로의 build 폴더를 work dir의 build 폴더로 복사
ADD ./dist ./dist
# nginx의 default.conf 삭제
RUN rm /etc/nginx/conf.d/default.conf
# host pc의 nginx.conf를 아래 경로에 복사
COPY ./nginx.conf /etc/nginx/conf.d
# 80 포트 개방
EXPOSE 80
# container 실행 시 자동으로 실행할 command. nginx 시작함
CMD ["nginx", "-g", "daemon off;"]nginx.conf
server {
# add_header Access-Control-Allow-Origin *; # CORS 허용 설정 주석 처리
listen 80;
listen [::]:80;
location / {
root /app/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
}로컬 테스트
build 된 이미지를 build 하고 정상적으로 실행되는지 로컬에서 아래 명령어를 통해 테스트를 진행한다.
npm run build // dist 폴더를 생성하고 필요한 정적 파일들을 그 안에 넣는다.
// ❗️docker file이 있는 곳에서 입력
docker build -t frontend-image . // Dockerfile이 있는 곳에서 입력
// -t 옵션 : tag 지정. frontend-image라는 이미지 이름 만들어주기
// . : 현재 디렉토리를 빌드 컨텍스트로 지정
// 위에서 빌드한 이미지를 기반으로 컨테이너 생성 및 실행
docker run --name frontend-container -dp 80:80 frontend-image정상 동작 결과화면
컨테이너 실행 확인
포트 확인 : 컨테이너가 포트 매핑을 통해 호스트의 특정 포트와 연결되어 있어야 한다.
http://localhost에서 프론트엔드 애플리케이션이 로드되는 것을 확인할 수 있다.
💠 Docker hub
Docker hub와 연결
docker login -u {username} 명령어 입력 후 passwoard를 입력하면 로그인에 성공한다.
Docker hub에 push & pull
Docker hub에 레포지토리를 생성한다. 나는 backend와 frontend 각각 레포지토리를 만들어줄 예정이다.
// docker hub 레포지토리명에 맞게 이미지명을 다시 태깅해주었다.
docker tag frontend-image jinii915/review-frontend
// docker hub에 push
docker push jinii915/review-frontend💠 EC2에서 이미지 Pull 및 컨테이너 실행
// 로그인
docker login -u {username}
// 원하는 docker 이미지 pull
docker pull jinii915/review-frontend
// Pull한 이미지로 컨테이너 실행
docker run --name frontend-container -dp 80:80 jinii915/review-frontend:latest
❗️docker 명령어 에러 발생
🙆🏻♀️ sudo chmod 666 /var/run/docker.sock 명령어를 입력한다. 해당 파일의 권한을 666으로 변경하여 그룹 내 다른 사용자도 접근 가능하게 변경하는 명령어이다.
❗️EC2의 아키텍처와 이미지의 아키텍처가 맞지 않는 에러 발생
🙆🏻♀️docker build --platform linux/amd64 -t {ImageName} . 명령어를 통해 빌드했던 이미지를 지우고 다시 빌드해줘야 한다.
// 프로젝트의 Dockerfile이 있는 터미널에서
docker build --platform linux/amd64 -t jinii915/review-frontend:latest .
// docker hub에 다시 Push
docker push jinii915/review-frontend// ec2에서
docker pull jinii915/review-frontend:latest
docker run --name frontend-container -dp 80:80 jinii915/review-frontend:latest❗️http://52.79.91.203로 접속 시 계속 로딩만 되는 경우
EC2 보안 그룹을 확인하자. 인바운드 규칙에 80포트가 열려 있는지 확인해야 한다.
결과
http://{EC2-퍼블릭-IP}EC2의 퍼블릭 IP 주소로 접속해 서비스가 정상적으로 실행되는지 확인한다.
참고
[React + Vite + Nginx + Docker + AWS] 를 활용하여 배포 해봅시다!
[(Nginx+React)+SpringBoot] 웹 서비스 배포 - Docker Hub 활용
docker 설치 후 /var/run/docker.sock의 permission denied 발생하는 경우
