마지막주차에 접어들면서 내가 구현한 페이지 배포에 대해 학습하기 시작했다.
아직 완성 못했는데 내 포트폴리오... 배포할 수 있는거 맞겠지?
배포를 본격적으로 배우면서, 배포 자체의 개념보다도 AWS를 연계해서 공부하다 보니 AWS를 공부하는 느낌이 크게 든다.
배포를 본격적으로 배우기 시작한 1일차!
SSR(서버사이드렌더링)과 SSR을 구분해주는 CDN을 제외한 HTML, CSS, Javascript를 단순히 storage에 담아두는 방식을 살펴보자!
[VS Code]
배포를 위해선 build하는 과정이 필요하다.
오늘 배운 단순 storage 업로드 배포는 build => export를 거쳐야한다.
package.json scripts 부분에 "build:ssg" : "next build && next export" 를 추가하여 터미널에서 yarn build:ssg를 실행해주면 out 폴더가 생성되며 html, css, javascript로 변환된 파일이 생긴다.
해당 폴더의 구조를 pages 구조와 맞추기 위해 next.congif.js 파일에 trailingSlash: true 를 추가 후 다시 yarn build:ssg를 해주면 out 폴더 속 구조가 pages 구조와 같아진다.
[AWS]
1. S3 (=storage)에서 나만의 storage URL 생성하기
(1) S3 bucket을 가비아에서 구매한 도메인 이름으로 생성한 후, 해당 bucket에 out 폴더를 업로드한다.
(2) S3에 올라간 각 파일의 URL이 암호화로 인해 열리지 않으므로, 활성화가 필요하다.
1) 파일 전체 선택
2) Actions - make public using ACL(3) 업로드된 HTML에 CSS, Javascript를 씌워주는 작업이 필요하다.
1) properties - static website hosting
2) Edit - Enable
3) Index document, Error document 입력여기서 생성된 URL은 두가지 문제점을 갖고 있다.
1. URL이 너무 길어 절대 외울 수 없다! 이는 브라우저에서 DNS를 거쳐 S3로 가도록 설정해주면 내가 구매한 도메인 주소 입력만으로 해당 웹사이트에 접속이 가능해진다.
2. 브라우저에서 접속할 경우 "주의요함"이라는 문구가 뜨고 있다. 이는 http에서 https로 변환시켜 해결 가능하다.
2. Route53 (=DNS)를 통해 간단한 도메인으로 변환하기
(1) Route53 - create hosted zone - domain 입력
(2) 가비아에서 설정해주기
가비아에서 도메인 생성을 했기 때문에 가비아에서 기본적으로 설정되어 있는 record가 있다.
해당 record를 초기화하고 AWS의 record 설정을 사용하기 위한 조치를 취해야 한다.
가비아 도메인 관리 - 도메인 정보 변경 - 네임 서버 - AWS NS 서버이름 네 개로 수정(2) watch to wizard - simple - record
(3) Define simple record - Record type : A ~ - value/Route traffic to : Alias to S3 website endpoint, seoul
관련 개념 알아보기
(1) Domain
사람이 기억하기 어려운 IP 주소에 이름을 부여한 것을 말한다.
IP주소란, 인터넷에 연결되어 있는 장치들을 식별할 수 있는 주소를 말한다.
(2) DNS
DNS는 Domain Name System의 약자로, 사람이 읽을 수 있는 도메인 이름을 기계가 있을 수 있는 IP 주소로 변환하는 시스템을 말한다.
(3) Hosting
Hosting이란 서버의 일부 혹은 전체를 이용할 수 있도록 임대해주는 서비스를 말한다.
(4) http vs https
1) http
http(Hyper Text Transfer Protocol)란 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜이다.
인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규악으로, 80번 포트를 사용하고 있다.
2) https
https(Hyper Text Transfer Protocol over Secure Socket Layer)란 HTTP에 데이터 암호화가 추가된 프로토콜이다.
HTTPS는 HTTP와 다르게 443번 포트를 사용하고 있다.
AWS에서 https를 사용하기 위해서는 cloudFront에서 SSL 인증서 설치를 해줘야 한다.
또한, http, https는 각각 default Port 번호로 80, 443을 쓰고 있으므로 Fronted Server에서 포트 번호가 쓰여있지 않은 도메인으로만 인지를 할 수 있도록 LB(Load Balancer)로 포트 변환을 해줘야한다.
https 로 전환하는 방법은 2탄에서 보기로!
<참조 : https://opentutorials.org/course/228/1450
https://aws.amazon.com/ko/route53/what-is-dns/
https://velog.io/@kathylee/07-What-is-hosting%ED%98%B8%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80>
