TIL 항해 (15/99) 2주차 주특기 주간(AWS S3로 서버 올리는 법+도메인 연결)

이도행·2021년 9월 27일
0

TIL

목록 보기
4/12

ღ15일차 TIL, AWS S3로 서버 올리는 법

📌시작하기 전에,

S3는 정적 웹사이트 (html, js, css)만 가능하다.
-PHP, JSP, ASP같은 서버측 스크립트는 사용 불가

 도메인까지 연결 할거면 버킷 이름과 도메인 이름이 같아야함

준비물
AWS 계정, 가비아 도메인


-먼저 AWS로그인 후 관리 우측상단에서 관리콘솔로 들어가준다.

-위 페이지에서 처음이라면 모든 서비스 클릭, 스토리지에 있는 S3 클릭! 이후 아래를 따라한다!


  1. 버킷 만들기 클릭
  1. 버킷이름 정하기 지역은 상관 없지만 필자는 아시아태평양(서울) ap-northeast-2 선택
  1. 퍼블릭 액세스 차단 풀기(풀면 보기만해도 돈나가긴 함 프리티어는 5기가까지 공짜)
  1. 아래 차단경고 확인 체크
  1. 파일 히스토리 남기고 싶으면 활성화 하기(필자는 비활성화)- 버전나눠서 계속 업로드 하려면 활성화 아니면 넘기기
  1. 버킷 만들기 클릭
  1. 아래 생성한 버킷 클릭
  1. 올릴 거 올리고 권한에서 공개하려면 퍼블릭 읽기 액세스 권한 부여 체크(업로드 누르기 전에 설정해야함! 아직 업로드 누르지 말기)
  • 그냥 사진을 올릴 수도 있고 만약 VSCode를 사용하여 만든 결과물을 올리려면 터미널에서
    yarn build 입력(yarn사용 시) 해당 프로젝트 폴더 내에 build폴더에 들어가서 그 폴더 안에있는 내용물들을 전부 업로드.
  1. 속성은 Standard (기본)으로
  1. 업로드!
  1. 아래 올린 버킷 클릭 해보면 객체 URL로 나옴 (속성 탭 최하단)
    클릭하면 볼 수 있음

 📌도메인과 연결 할 때

위와같이 생성 하지만 주의할 점 지키기

주의할 점

1. 버킷 이름과 도메인 이름이 같아야함

  1. 이름 같게 만들고 클릭해 들어간 후 권한 탭 클릭
  1. 아래 버킷 정책에서 편집 클릭
  1. 버킷 ARN 복사하고 정책 생성기 클릭
  1. AWS 새페이지 뜨면 Select Policy Type에서 S3 Bucket Policy 선택
  1. Principal 에는 * 입력 (전부 라는 뜻)
  1. Actions 에서 GetObject하나만 체크
  1. ARN에 아까 복사해온 ARN 입력
  1. Add Statement 클릭
  1. Generate Policy 클릭
  1. Policy JSON Document 내용 전부 복사
  1. 버킷 정책페이지로 돌아가서 아래 정책란에 붙여넣기
  1. 정책란에 있는 Resource 부분 맨 끝에 /+별 추가 아래처럼 해주기
    ("Resource": "arn:aws:s3:::getu.si/*",)
  1. 아래 변경사항 저장 클릭
  1. 다시 객체 탭으로
  1. VSCode로 가서 yarn build 입력
  1. 페이지로 돌아가서 속성탭
  1. 아래로 내려서 정적 웹사이트 호스팅 편집버튼 클릭, 활성화 체크
  1. 인덱스 문서와 오류문서 둘다 index.html 입력
  1. 변경사항저장 클릭
  1. 해당 파일의 위치 들어가보면 build 폴더 있는데 그 안의 내용물들 모두 업로드
  1. 전체선택 후 업로드 버튼 클릭
  1. 닫기누르고 속성탭 클릭
  1. 정적웹사이트호스팅 부분에서 아래 링크 확인

📌도메인 연결까지 하려면 아래 참고

1. Route 53 활용(AWS관리콘솔 들어가서 서비스 선택) 도메인 연결

  1. 호스팅 영역 생성 클릭
  1. 도메인 이름에 내 도메인 입력 설명 필요하면 입력 안해도 됨
  1. 아래 유형 퍼블릭으로 해야 아무나 볼 수 있음
  1. 호스팅 영역 생성 클릭
  1. 아래 NS부분 보기(Name Server) -복사
  1. 해당 네임서버를 도메인에 등록해야함
  1. 가비아에서 관리툴들어가기
    (my가비아 -> 서비스 관리 -> 아래 자기 도메인들 가격이랑 뜨는 곳에서 우측 관리툴 클릭 )
  1. 네임서버 설정 클릭 1,2,3,4차 하나씩 순서대로 넣기 복사할때 뒤에 .하나씩 다있는데 떼고 입력해 줘야 함
    ns-1512.awsdns-20.co.uk
    ns-1456.awsdns-10.org
    ns-456.awsdns-42.com
    ns-123.awsdns-36.net
  1. 적용 클릭
  1. 다시 AWS페이지로 돌아가서 Route 53에서 레코드 설정 해줘야함
  1. 레코드 생성 클릭
  1. 레코드 유형 A 선택 (IPv4 주소 및 일부 AWS 리소스로 트래픽 라우팅)
  1. 별칭 토글 클릭(켜주기), 트래픽 라우팅 대상에서 S3 웹사이트 엔드포인트에 대한 별칭 선택
  1. 리전선택은 아까 버킷 만들때 정한 지역과 동일한 지역 선택 (아시아태평양(서울) ap-northeast-2)
  1. S3 엔드포인트는 내가 연결할 거 선택하면 됨 -> 레코드 생성
  1. 해당 도메인 들어가보기!
    (네임서버 설정하는 데에 시간 좀 걸려서 바로 안 뜰 수도있음 기다리기 최대 하루정도)
profile
리액트를 공부하는 왕초보 개발자입니다.

0개의 댓글