코드스테이츠 BE Section4 - 클라우드 - 클라이언트 배포, 데이터베이스 연결

온프레미스(서버실)

​

클라이언트 배포

1. nvm 설치(https://github.com/nvm-sh/nvm#install--update-script)

해당 사이트에서 최신 버전 확인 후 터미널에 작성

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

설치 완료 후 터미널 다시 시작

nvm --version

버전이 확인된다면 nvm 설치 성공

​

2. node.js 설치

nvm install --lts // node.js의 lts 버전 설치
node -v // 버전 확인 되면 설치 잘 된 것!
​

​

​

[정적 웹 사이트 호스팅 과정] : 로컬 터미널에서 설정하기

1. 정적 웹 페이지 빌드

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

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

4. 퍼블릭 액세스 차단 해제 및 정책 생성 (다른 사용자 접근 권한 부여하는 버킷 정책)

​

[정적 웹 페이지 빌드]

빌드 전 의존성 모듈 설치

빌드 : 작성한 코드의 불필요한 데이터를 없애고, 통합 및 압축하여 배포하기 이상적인 상태를 만드는 과정. 코드의 데이터 용량 줄어들고 웹 사이트의 로딩 속도 빨라짐

​

$ cd client // client 디렉토리로 이동
$ npm install // 클라이언트의 의존성 모듈 설치

환경 변수 설정

맥북 기준 에디터인 nano를 이용해서 환경변수 설정 바꿔준다

$ nano .env.example // 코드스테이츠 github Repository에서 클론 후 에디터로 .env.example 열어준다
$ REACT_APP_API_URL=http://ec2주소:8080    // 포트 8080 꼭 포함해야!
$ Ctrl X // 저장 후 나가기
$ mv .env.example .env    // env.example 파일 이름 env로 바꾸기
$ npm run build // 정적 웹 페이지 빌드

이후 S3 메인 화면에 접속

버킷 생성 후 정적 웹 사이트 호스팅 활성화 선택

인덱스 페이지 작성 후 버킷 웹 사이트 엔드 포인트 생성 확인하기 (아직 버킷에 정적 웹 페이지 파일 업로드 안함. 퍼블릭 엑세스 설정 변경과 정책 생성 필요) -> 객체 메뉴에서 build 폴더 안에 포함된 내용 모두 드래그 앤 드롭으로 업로드하기 -> 퍼블릭 액세스 차단 옵션 해제하고 정책 생성 (S3 권한 - 퍼블릭 액세스 차단(버킷 설정) 편집 - 버킷 정책 편집 - 정책 생성 - JSON 형태로 생성된 정책은 복사해서 버킷 정책에 붙여넣기) -> 확인은 버킷 웹 사이트 엔드 포인트 주소 클릭해서 테스트 진행

​

[데이터베이스 연결]

RDS

여기는 주말에 다시 포스팅하기!

​

​

우왕 드디어 했다!