환경설정

개인 로컬PC에서 진행한다.

1. nvm 설치

# Ubuntu
sudo apt update
sudo apt install wget

진행 후에 아래의 명령어를 통해 nvm 을 설치한다.

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

설치가 잘 되었는지 확인한다.

nvm --version

2. node.js 설치

nvm install 버전
// 예시
nvm install --lts
nvm install 16

S3 호스팅

1. 구현이 완성된 정적 웹 페이지를 빌드한다.

   

배포할 파일 내에 client 디렉토리로 이동하여

npm install 명령어를 입력한다.

에디터로 .env.example 파일에서 환경변수를 설정한다.

nano .env.example

AWS 인스턴스 퍼블릭 IPv4 DNS 주소 url을 삽입하고 http:// 와 포트번호를 넣어준다.

.env.example 인 파일명을 .env 로 변경한다.

$ mv .env.exameple .env

환경 변수 설정이 완료되면,

$ npm run build

명령어를 입력하여 빌드 과정을 진행한다.

일정 시간 이후, 'Compiled Successfully'라는 문구가 보이며 빌드 과정이 마무리된다.

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

2. 버킷 생성 및 정적 웹 사이트 호스팅 용으로 구성

• S3 메인 화면에 접속한다.

• 버킷을 클릭한다.

• 속성 탭으로 이동한다.

• 정적 웹 사이트 호스팅의 편집을 클릭한다.

• 활성화를 체크하고, 인덱스 문서와 오류 문서를 작성한 후 아래의 변경 사항 저장을 누른다.

3. 빌드된 정적 웹 페이지 업로드

• 객체 메뉴를 클릭하여 이동한다.
  

• 업로드를 누른다.

• client 내의 build 폴더 안에 포함된 모든 내용들을 업로드한다.

4. 퍼블릭 액세스 차단 해제 및 정책 형성

• 권한으로 이동한다.

  

• 퍼블릭 액세스 차단의 편집을 클릭한다.

• 모든 퍼블릭 액세스 차단의 체크 박스를 해제하고 저장한다.

• 이전의 권한 메뉴로 돌아가 버킷 정책의 편집을 클릭한다.

• 정책 생성기를 클릭한다.

• 정책 생성

  

• Generate Policy 를 클릭한다.

• 생성된 정책을 복사해서 붙여넣고, 저장한다.

• 속성 메뉴로 이동한다.

• 맨 아래쪽의 정적 웹 사이트 호스팅에서 링크를 클릭하여 테스트한다. 브라우저에 정상적으로 화면이 출력된다면 성공이다.