[클라우드컴퓨팅] 4-5. 계산기 프론트엔드 배포(Docker EC2)

1. 프론트엔드 Dockerfile 작성

Visual Studio Code 실행

1. 프로그램 실행 후 frontend 폴더를 선택한 후 'Dockerfile' 파일을 추가함
2. 다음과 같이 Dockerfile 내용을 작성함

 

2. 프론트엔드 프로젝트 EC2 업로드

프론트엔드 프로젝트 EC2 업로드

- 계산기 프론트엔드 프로젝트는 백엔드 IP 주소를 포함하므로 외부에 노출될경우, 백엔드로 DDoS 공격 등보안 위협에 취약해짐

- 민감한 정보를 포함한 프로젝트는 Docker Hub나 Git과 같은 공개 저장소에 등록하지 않도록 주의해야 함

- 계산기 프론트엔드는 Docker Hub에 등록하지 않고, EC2에 직접 업로드하여 Docker 이미지를 생성함

1. 프로젝트 업로드 프로그램 설치
   - https://filezilla-project.org/download.php?platform=win64에서 파일 질라를 다운로드함
   - 기본 옵션으로 설치함
2. EC2 아이피 확인
   - https://aws.amazon.com/ko/console/에접속함
   - 인스턴스를 클릭하여 해당 인스턴스 이름에 해당하는 아이피를 메모함
   - 로그인 후 컴퓨팅-Ec2 클릭함
   

   

   
   

업로드 프로그램 설정

1. 파일질라를 실행 후 파일-사이트 관리자를 선택
   

   

2. 새 사이트를 클릭하고, 아래와 같이 설정함
   - 사이트 이름 : 계산기 프론트엔드
   - 프로토콜 : SFTP
   - 호스트 : EC2의 IP
   - 로그온 유형 : 키 파일
   - 사용자 : ubuntu
   - 키 파일 : 찾아보기 클릭 후 c:\cloud_project01\my_key01.ppk 파일을선택
   

   

3. 연결을 클릭하고 확인을 클릭하여 완료함

계산기 프론트엔드 업로드

-파일질라의 왼쪽이 현재컴퓨터 windows 환경, 파일질라의 오른쪽이 원격 컴퓨터 EC2

- 왼쪽에서 EC2로 전송할 폴더선택 (c:\cloud_project01\calculator_frontend)

- 오른쪽에서 전송한 파일을 EC2에 저장할 폴더 선택 (/home/ubuntu/)

- calculator_frontend를 선택하고 업로드 선택

-업로드가 완료될때까지 기다림 (오래 걸림)

3. Docker Image 생성

Docker Image 생성 

1. AWS 사이트에 로그인 후 컴퓨팅-EC2-인스턴스를 클릭
2. frontend01의 인스턴스 ID를 클릭하고, 연결을 선택
3. calculator_frontend가 업로드 되었는지 확인
   

   

4. chmod 명령을 실행하여 리액트프로젝트 실행 가능하도록 설정
   -  -R옵션은 calculator_frontend의 서브 폴더까지 권한 설정
   -  777은 모든 사용자가 읽기 쓰기 실행이 가능하게 설정
   

   

5. 자바 파이썬등을 설치하는 apt를 최신 버전으로 업데이트하는 명령어를 입력하고 엔터
   

   

6. 도커 설치 명령 입력하고 엔터
   

   

   
   
   • sudo
     • 관리자 권한으로 실행
   • docker build
     • Dockerfile의 지시사항에 따라 Docker 이미지를 생성
   • -t calculator_frontend
     • 생성된 Docker 이미지에 'calculator_frontend'라는 이름을 태그로 지정
   • .(마침표)
     • 현재디렉토리에있는Dockerfile을사용하여이미지를생성설계 스케치인 Dockerfile로 설계도 calculator_frontend를 생성함
       

       

       
       sudo docker build -t calculator_frontend .
7. 성공 메시지가 출력되는지 확인 
   

   

8. 이미지가 생성 되었는지 확인
   

   

5. 컨테이너 생성

컨테이너 생성

- 계산기 프론트엔드가 실행 중인 calculator_frontend 컨테이너를 생성함

- 도커 이미지를 사용해 새로운 컨테이너를 만듦. 이건 3000번 포트를 통해 외부와 연결됨

- 백그라운드로 작동하며,  이 컨테이너에서 백엔드 프로그램이 실행됨

• sudo
  • 관리자 권한이 필요
• docker run
  • 도커 이미지를 사용해 컨테이너를 만들고 시작
• -d
  • 프로그램을 화면에 계속 보여주지 않고, 백그라운드로 실행
• -p 3000:3000
  • 컴퓨터의 3000 포트를 컨테이너의 3000 포트에 연결
  • 컨테이너가 외부와 소통할 수 있게 만들어 줌. 여기서 3000 포트는 컨테이너에서 실행중인 리액트의 포트
• calculator_frontend 
  • calculator_frontend 라는 이미지로 컨테이너 생성

6. 프론트엔드 실행

프론트엔드 실행

- 웹브라우저에 프론트엔드IP:3000 입력하여 계산기 프론트엔드가 실행되는지 확인

- 숫자를 입력하고 버튼을 클릭해서 계산기 계산이 실행되는지 확인

 

*실습 후 인스턴스 삭제하기