일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 브라우저의 렌더링 과정
- peerdependencies
- unique identifiers
- js pattern
- 프로그래머스
- 제너레이터와 async/await
- 커리어
- package management
- 진행기록
- middleware pattern
- 딥다이브
- 모던 자바스크립트 Deep Dive
- 이미지 갤러리 최적화
- version management
- Babel과 Webpack
- pr review
- DOM
- 프론트엔드 성능 최적화 가이드
- 새 코드 받아오기
- 이벤트
- 블로그 서비스 최적화
- js pattern
- 학습내용정리
- const
- 스코프
- 자바스크립트 딥다이브
- mixin pattern
- 올림픽 통계 서비스 최적화
- 자바스크립트
- 자바스크립트 패턴
- Today
- Total
Dev Blog
클라이언트 https 배포하기 본문
퍼블릭 설정
S3에 업로드 된 객체를 어디서든 접근 가능하게 하려면 퍼블릭 액세스를 설정 해야 함
S3 버킷 설정
-
s3 버킷 정책 설정
버킷 정책이란 사용자가 s3 버킷에 액세스 할 수 있는 옵션중 하나이며 json 문법을 사용하여 버킷에 대한 액세스를 제어 한다.
- select type of policy: 정책 타입
- effect: 버킷에 대한 명령을 허용할 것인지 거부 할 것인지에 대한 옵션
- pricipal: 특정 사용자에 대해 권한을 제어하고 싶다면 입력한다. (전체: *, 특정 사용자: arn:aws:iam:AWS-accound-ID:user/IAMID)
- AWS Service: Step 1에서 정책 타입 선택시 자동 지정 되는 서비스
- Actions: 버킷에 대해 어떤 작업을 허용할 것인지 선택하는 옵션 (전체: *)
- Amazon Resource Name(ARN): 접근 권한을 주고자하는 버킷을 입력한다. (arn:aws:s3:::<bucket_name>/<key_name>)
정적 웹 사이트 호스팅
S3를 정적 웹 사이트 호스팅용으로 구성할 수 있다. 호스팅용으로 만들려면 추가적인 설정이 필요하다.
S3 파일 업로드
파일 업로드는 직접 업로드 하는 방법과 aws cli를 이용하는 방법이 있다. 직접 업로드 하는건 너무 번거로워서 aws cli를 이용했다. cli를 사용한다면 터미널 환경에서 aws를 를 이용할 수 있다.
IAM 설정
cli를 사용할 때 aws 서비스에 안전하게 액세스 하는 데 IAM 계정을 사용한다.
IAM이란 AWS의 리소스에 대한 접근제어 권한을 가지도록 계정 또는 그룹을 생성하는 서비스이다. 각각의 IAM 계정은 각각의 aws 리소스에 대한 접근제어 권한을 설정할 수 있다.
우리는 s3에 대한 접근을 할 것이기 때문에 AmazonS3FullAccess로 정책 설정을 하고 그룹을 생성했다.
사용자를 만든 뒤 화면 중간에 있는 csv 다운로드를 하고 잘 저장해 두자. 이파일에는 access key id와 secret access key가 저장되어 있는데 이는 cli를 이용하는데 필요하다.
aws cli 설정
aws cli를 설치하고 IAM 사용자를 추가해야 한다. 터미널에서 aws configure를 실행시킨다.
aws configure
아까 발급받았던 csv의 key, id를 입력하고 버킷의 리전을 적는다. 마지막은 공백으로 두고 넘어간다.
AWS Access Key ID [None]: Access Key
AWS Secret Access Key [None]: Secret Access Key
Default region name [None]: S3 region name
Default output format [None]:
cli가 잘 작동하는 모습
aws s3 sync를 사용하여 s3의 버킷을 터미널에서 업로드 할 수 있다.
deploy를 aws s3 sync ./build s3://my-bucket 설정한다.
npm run build
npm run deploy
위 과정까지 끝났다면 버킷 앤드포인트에서 배포된 파일을 확인할 수 있다.
인증서 발급 및 cloudfront 설정
인증서 발급
아직 http로 배포가 되어있기 때문에 https 설정을 해주기 위해서는 SSL/TLS 인증서가 필요하다.
ACM(AWS Certificate Maneger)에서 공인인증서 요청을 한다.
도메인 이름과 DNS 검증을 선택하고 인증서를 발급 받는다.
cloudfront
Amazon CloudFront는 개발자 친화적 환경에서 짧은 지연 시간과 빠른 전송 속도로 데이터, 동영상, 애플리케이션 및 API를 전 세계 고객에게 안전하게 전송하는 고속 콘텐츠 전송 네트워크(CDN) 서비스다.
Origin Domain Name / https 리디렉션용 버킷 앤드포인트 URL을 입력한다. 이때는 미리보기의 S3을 선택하지 말고 S3의 앤드포인트를 복사해서 직접 붙여넣기 해야한다.
- Alternate Domain Names (CNAMEs) / 사용자들이 콘텐츠 액세스에 사용할 도메인 이름을 입력한다. (homemade21.cf) 여러개의 도메인을 적어도 된다.(이 경우 인증서 발급시 와일드카드 사용)
Route 53 생성
호스팅 영역에서 레코드 생성을 한다. 도메인 이름을 cloudfrotn에 Alternate Domain Names에서 적었던 도메인을 입력하고 호스팅 영역 생성한다.
이후 NS 4개가 생기는데 이는 도메인을 발급 받았던 사이트에 등록을 해준다.
이후 레코드 생성을 하여 cloudfront 배포를 추가를 하고 조금 기다려서 확인을 해보면 사이트가 https로 수정된 것을 확인할 수 있다.
'BootCamp_Codestates > First Project' 카테고리의 다른 글
First Project 회고록 (0) | 2021.02.16 |
---|---|
20210211 TIL multer 로 S3 에 이미지 업로드 (0) | 2021.02.12 |
20212009 TIL crypto 모듈을 사용한 암호화 (0) | 2021.02.09 |
20210208 TIL OAuth!! (0) | 2021.02.09 |
20210204 TIL (0) | 2021.02.04 |