Cloud - AWS 실습 - 클라이언트 배포

1. 클라이언트 배포를 위한 환경 설정

• 실습에 적용한  repository의 클라이언트는 JavaScript, React를 이용해 작성되었다
• 배포를 실습하기 전에 로컬 환경에서 Build 과정에 필요한 환경을 준비한다
• EC2 인스턴스가 아닌 개인 PC, 로컬에서 진행해야 한다

 1) nvm 설치

https://github.com/nvm-sh/nvm#install--update-script

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

• 버전이 최신 버전으로 바뀌어 있을 수 있으니 확인한다

---

• 아래 명령어를 터미널에 입력하여 wget 명령어로 nvm 설치를 시도한다

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

• Command 'wget' not found 메세지와 함께 설치가 진행되지 않는 경우에는 Package Manager를 이용해 wget을 설치한다

# Ubuntu
sudo apt update
sudo apt install wget

# macOS
brew update
brew install wget

 

2) nvm 설치 확인

•  콘솔 화면에 'Close and reopen your terminal to start using nvm'이 출력되면 설치가 정상적으로 된 것이다

• Close and reopen your terminal to start using nvm or run the following to use it now(터미널을 닫았다가 다시 열어 nvm 사용을 시작하거나 다음을 실행하여 지금 사용하십시오.)
  - 터미널을 닫았다가 다시 시작하는게 편한다

• 터미널을 다시 시작한 후 다음 명령어를 이용하여 nvm 패키지 버전을 확인한다

nvm --version

• 버전이 확인되면 NVM 설치가 성공한 것이다
  - nvm을 찾을 수 없다는 에러가 발생하여 다시 설치한 후 아래 명령어를 실행했다
  - 정상적으로 버전이 확인된다

 

 

 3) node.js 설치

• nvm은 node.js의 다양한 버전을 쉽게 설치할 수 있다
• nvm을 이용해 node.js를 설치한다
• 아래 명령어와 같이 설치하려는 node 버전을 적어 준다
  - LTS(Long-Term Support)는 node.js에서 지원하는 기간이 길다는 의미이다

nvm install --lts

• 설치된 node의 버전을 확인한다

node -v

 

2. S3 호스팅

 1) S3 버킷을 이용한 정적 웹 사이트 호스팅 과정

• 정적 웹 사이트를 호스팅하는 과정은 4 단계로 요약된다
  - 첫 번째로 구현이 완성된 정적 웹 페이지를 빌드한다
  - 빌드 후 S3 대시보드에 접속하여 버킷을 생성한다
  - 생성한 버킷을 정적 웹 사이트 호스팅 용으로 구성한다
  - 빌드된 정적 웹 페이지를 버킷에 업로드한다
• 업로드가 완료되면 퍼블릭 액세스 차단 설정을 해제하고, 다른 사용자의 접근 권한을 부여하는 버킷 정책을 생성한다
• 모든 과정이 끝나면 사용자들이 버킷에 업로드된 정적 웹 페이지에 접속할 수 있다

 

 2) 정적 웹 페이지 빌드

• 빌드(build)는 작성한 코드의 불필요한 데이터를 없애고, 통합 및 압축하여 배포에 적합한 상태를 만드는 과정이다
• 빌드 과정을 통해 코드를 담고 있는 데이터의 용량은 줄어들고, 웹 사이트의 로딩 속도는 빨라진다
• 클라이언트 프로젝트를 빌드하기 전에 터미널(WSL)을 이용하여 client 디렉토리로 이동한 후 클라이언트의 의존성 모듈을 설치한다
  - client 디렉토리는 실습용 프로젝트 코드를 clone한 폴더에서 진행한다

$ cd client
$ npm install

• npm install 이 정상적으로 진행되지 않는다면 이전의 nvm, node 환경설정을 다시 확인해 본다

 

  2-1) 환경 변수 설정

• 클라이언트의 경우 환경변수는 .env 파일에 선언한다
• 실습 Repository에서  .env.example 파일을 찾아서 예시에 있는 주소를 입력한다
  - 요청을 보내는 서버의 주소를 환경 변수치에 담을 때는 필히 'http://' 나 'https://'를 포함해야 하며, 특정 포트에서 작동하는 경우 포트 번호까지 꼭 작성한다
  - 아래 이미지는 미리 .env로 변경한 다음 이미지이다
• 최종적으로 이 파일의 이름은 .env.example이 아닌 .env여야 한다
  - 슬라이드의 명령어를 통해 파일의 이름을 변경할 수 있다

• 해당 파일(.env 혹은 .env.example) client 디렉토리 내부에 위치하며, CLI에서 ls -a 혹은 ls -al 명령어로 확인할 수 있다
  - 파일을 수정할 수 있는 에디터(nano, vi 등)를 이용해 서버의 주소를 작성 후 저장한다
  - 파일 수정 명령어는 mv .env.example .env 이다

•  환경 변수를 제대로 설정하지 않으면 서버에 요청을 제대로 보내지 못하게 되고, 그 결과로 정상적인 응답을 받아올 수 없다

 

   2-2) 빌드 진행

•  터미널에 'npm run build' 명령어를 입력하여 빌드 과정을 진행한다

npm run build

• 터미널 화면에 'Compiled Successfully'라는 문구가 보이며 빌드 과정이 마무리된다

• 빌드 과정이 끝나면 client 디렉터리에 'build' 폴더가 생성된 것을 확인할 수 있다

• 터미널에서 ls 명령어를 통해서도 확인할 수 있고, 파일탐색기(파인더) 혹은 IDE로도 확인할 수 있다

 

 

3) 버킷 생성

• AWS 홈페이지에 로그인을 한다
• 메인 콘솔 창에서 S3를 검색하여 S3 메인 화면에 접속한다

 

• S3 메인 화면으로 이동하여 '버킷 만들기' 버튼을 클릭한다 

 

• 버킷 만들기에서는 여러 옵션을 지정할 수 있다
• '일반 구성' 옵션에 있는 내용만 완성한다
  - 버킷 이름을 작성한다
    : 버킷 이름은 각 리전에서 중복되지 않는 고유한 이름이어야 한다
    : 원하는 이름으로 버킷 이름을 작성한다

 

• 버킷 이름 작성이 완료되면, 화면의 가장 아래에 있는 '버킷 만들기'라는 버튼을 클릭한다

• 버킷이 성공적으로 생성되었다는 메시지와 아래 화면으로 이동된다

 3) 정적 구성

• 생성한 버킷을 클릭한다

• 속성 메뉴를 눌러 이동한다

 

• 속성 메뉴 화면에서 페이지의 스크롤을 가장 아래로 내린다
• '정적 웹 사이트 호스팅' 옵션이 보이면 '편집' 버튼을 클릭한다

• 정적 웹 사이트 호스팅의 활성화/비활성화 여부를 묻는 창이 나온다
• '활성화' 옵션을 선택한다

 

• 활성화를 선택하면 여러 옵션을 추가로 변경할 수 있다
• 인덱스 문서를 작성한다
  - 인덱스 문서 부분에는 웹 사이트 주소에 처음 접속했을 때 보일 기본 페이지를 지정한다
  - '인덱스 문서' 기입란에 'index.html'을 작성한다
• '오류 문서' 부분은 공란으로 비워놔도 된다
  - 오류 발생 시 메인 페이지를 반환하기 위해서 'error.index.html'을 기입한다

• '변경 사항 저장' 버튼을 클릭한다

 

• 변경 사항이 저장되면, '정적 웹 사이트 호스팅을 편집했습니다'는 메시지와 함께 속성 메뉴 페이지로 리디렉션 된다
• 페이지의 가장 아래로 스크롤을 내려서 방금 편집했던 정적 웹 사이트 호스팅 옵션 부분으로 이동한다
• 예전에 존재하지 않았던 버킷 웹 사이트 엔드 포인트가 생성되었다
• 해당 주소를 클릭한다

 

• 에러 메시지를 확인할 수 있다
• 이유는 버킷에 정적 웹 페이지 파일을 아직 업로드하지 않았고, 퍼블릭 액세스 설정 변경과 정책 생성을 하지 않았기 때문이다

 

• 속성 메뉴 옆에 있는 '객체' 메뉴를 클릭해서 이동한다

• 객체 메뉴로 이동하여 '업로드' 버튼을 클릭한다

• build 폴더 안에 포함된 내용을 업로드 한다
  - client 폴더 안에 있는 build 폴더를 열어 안에 있는 파일을 모두 드래그하여 이동한다

 

• 객체를 업로드하는 페이지에 필요한 파일을 드래그& 드랍 형식으로 업로드 할 수 있다
• 주의 할 부분은 build 폴더 자체를 업로드하는 게 아닌 build 폴더 안에 저장된 파일만 업로드해야 한다
• build 폴더 안에 있는 파일들이 업로드 대기 목록에 추가되었으면 '업로드' 버튼을 클릭한다

• 업로드가 완료되면  '업로드 성공' 메시지를 확인할 수 있다
• 확인 후 '닫기'를 클릭한다

 

 3-1) 퍼블릭 액세스 차단 옵션 해제 및 정책 생성

• S3 메인 화면으로 이동하여 생성한 버킷을 클릭한다
• '권한' 메뉴를 클릭한다
• 권한 메뉴에서 '퍼블릭 액세스 차단(버킷 설정)'이라는 옵션에서 '편집' 버튼을 클릭한다

 

• '모든 퍼블릭 액세스 차단' 옵션의 체크 박스를 해제하고  '변경 사항 저장' 버튼을 클릭한다

• '변경 사항 저장' 버튼을 클릭하면 경고 창이 뜨는데, '확인'을 기입하고 확인을 클릭한다

• 버킷 퍼블릭 액세스 차단을 변경하고 나면 다시 권한 메뉴로 리디렉션 된다
• 퍼블릭 액세스 차단(버킷 설정) 옵션 밑에 있는 '버킷 정책' 옵션을 찾아서 '편집' 버튼을 클릭한다

 

• '정책 생성기' 버튼을 클릭한다

 

• 새 창이 뜨면서 AWS Policy Generator 페이지에 접속된다
• 여기서 버킷 정책을 생성한다
• 'Select Type of Policy' 옵션에서는 'S3 Bucket Policy'를 선택한다
• 'Principal' 옵션은 권한을 적용할 사용자를 정한다
  - 모두에게 공개할 것이므로 *(별표)를 입력한다
• 'Actions' 옵션에서는 'GetObject'를 선택한다
  - 버킷에 접근하는 모든 사용자가 버킷 내에 저장된 객체 데이터를 읽을 수 있다
  - 버킷을 웹 사이트 용도로 구성할 때 선택한다
• ARN에는 앞서 작성한 버킷 이름을 정확하게 작성합니다. 예) arn:aws:s3:::practice-bucket-deploy/*

AWS Policy Generator

 

• 'Generate Policy' 버튼을 누르면 정책이 생성된다

• 정책은 JSON 형태로 생성된다
• 생성된 정책을 드래그해서 복사한 뒤 Close 버튼을 누른다

 

• 버킷 정책 편집 페이지로 돌아가서 복사한 Json 파일을 정책에 붙여 넣고 '변경 사항 저장' 버튼을 클릭한다

 

• 모든 과정이 완료되었다
• 성공적으로 완료되었는지 테스트하기 위해서 속성 메뉴로 이동한다
• 정적 웹 사이트 호스팅 옵션을 찾은 뒤, 버킷 웹 사이트 엔드 포인트 주소를 클릭하여 테스트를 진행한다
• 브라우저에 정상적으로 화면이 출력된다면 성공적으로 마무리된 것이다