AWS EC2에 포트 별 docker run 하고 웹에서 확인하기 #25

이전까지 국회도서관 자료검색을 위해 만들었던

Front-End의 vue cli 프로젝트와 Back-End의 django 프로젝트를 docker로 만들어서 AWS EC2에 옮겨놨다.

이제는 이 docker 를 실행해 보도록 한다.

 

참고로 docker compose 는 이번에 작업하지 않았다.

실제로도 front-end 와 back-end는 동시에 배포될 일도 적어서 각각 docker file을 배포하고 실행하는 것으로 진행한다.

 

몇 가지 docker 주요 명령어를 소개한다.

• docker ps
  • docker 컨테이너의 상태를 모니터링하기 위한 기본 명령어.
  • 컨테이너의 현재 상태, 이미지, 포트 정보 등을 확인할 수 있다.
• docker stop {container id}
  • 선택한 docker container 중지
• docker run [OPTIONS] IMAGE [COMMAND] [ARG...]
  • docker 이미지를 기반으로 컨테이너를 생성하고 실행한다.
• docker images
  • 로컬에 docker pull 받은 목록 확인

보다 자세한 docker 명령어는 아래 공식 사이트 방문

☞ https://docs.docker.com/reference/cli/docker/

 

선행작업

docker를 실행하기 전에 로컬에서 작업할 때 vue cli는 8080 포트, django 프로젝트는 4000 포트로 실행했다.

이를 위해 EC2 의 포트도 8080, 4000 포트를 열어줘야 한다.

• EC2 > 보안그룹 > {해당 인스턴스 클릭}
• 인바운드 규칙 버튼 클릭
• 8080, 4000 추가

AWS EC2 인바운드 규칙 : 포트 추가

docker 실행

• AWS EC2 콘솔에 접속한다.
• docker images 로 pull 받은 목록을 확인한다.
• docker run -d -p 8080:80 {dockerhub_account}/docker_pubdweb:pw0.1
• docker run -d -p 4000:4000 {dockerhub_account}/docker_pubdapi:pa0.1

브라우저에서 확인

EC2 인스턴스의 퍼블릭 IPv4 DNS를 복사하여 8080 포트 추가

국회도서관 자료검색

추가 작업

웹에서 실행하면 API 조회가 되지 않는다.

그 이유는 API 서버 접근을 localhost 로만 허용했기 때문인데,

django API 서버를 호출하는 부분과 cors 크로스도메인 허용 설정 부분을 EC2 인스턴스의 퍼블릭 IPv4 DNS로 수정해야 한다.

 

• django API 서버를 호출하는 부분은 지난 글의 .env 부분을 찾아서 수정한다.

☞ .env 작성 부분은 이전 글 참고

vue axios 로 외부 API 호출 응답 받기, vue cli 환경변수 env 세팅 #16

• django cors 크로스도메인 허용 설정은 지난 글 참조한다.
  • CORS_ALLOWED_ORIGINS 부분에 추가

django cors 크로스 도메인 오류 해결 #6

• django ALLOWED_HOSTS 수정
  • settings.py

ALLOWED_HOSTS = [
    '.amazonaws.com',
]

 

이렇게 수정한 후 아래 단계를 다시 반복한다.

1. docker build
2. tag 설정
3. docker hub로 push 하고
4. AWS EC2 에서 다시 pull 하고 run 하여 확인
5. 정상작동

위 과정은 vue js 배포 파일 dist 생성하기 #19에서 확인하면 된다.

☞ https://yuneenelife.tistory.com/entry/vue-js-배포-파일-dist-생성하기-19

vue js 배포 파일 dist 생성하기 #19

마무리

이로써, 국회도서관 자료검색을 Front-End 는 vue cli, Back-End는 django 프레임워크로 개발하고,

이를 각각 docker 를 이용하여 AWS EC2에 배포하는 것까지 기획 개발 배포 One Cycle 돌려봤다.