27 TIL 정리 (서버리스 프론트엔드)

프론트와 백엔드

CSR/SSR/SSG

-CSR (Client Side Rendering) : 페이지 구성을 Client 에서 함 ex)ajax,fetch, 치면적 단점은 코드 노출

-SSR (Server Side Rendering) : 페이지 구성을 Server에서 함. ex)flask, rendering, jsp, php...

-SSG (Static Site Generator) : 빌드 타임에 모든 URL HTML을 캐싱

 

SPA(Single Page Application)

-CSR에 속함( 초기 페이지 로딩 속도가 느리며 완전 1:1이라고 할 수 없다.)

-페이지 한개로 서비스

-유저에 요청에 따라 페이지 내부를 바꿈

-구현하려면 많은 Hide와 동적로딩 필요

-React,Vue,Angular,Svelte 등등 프레임워크가 꾸준히 발전 중

-검색엔진 최적화 SEO(Search Engine Optimization)가 안됨 >> Next.js/Nuxt.js/Gatsy.js(CSR,SSG,SSR)등 많은 방안 나옴

-Client 성능이 좋아져서 나옴

 

MPA(Multi Page Application)

-SSR에 속함(완전 1:1은 아니며 MPA도 CSR로 할 수 있음>>Hybrid 했던것처럼)

-Flask에서 render_template처럼 서버에서 html을 만들어줌

-페이지가 바뀔 때 마다 서버에 요청해서 페이지 깜박임과 속도가 SPA비해 느림

-서버 부담이 큼

 

S3에서 프론트엔드 

전에 다뤘던 내용을 제외하고 정리

1. S3 정리 > 2. 파일업로드 > 3. 브라우저 확인 > 4. 정적 웹 호스팅 활성화 > 5.브라우저확인(URL비교) >

6.도메인 연결

도메인 연결

DNS설정 변경

위 설정은 마무리가 다 된 설정이지만 S3로만 연결한다면 정적 웹 호스팅시 만들어진 URL을 

타입 CNAME으로 호스트엔 @를 붙인 뒤 값/위치 부분에 URL을 넣으면 된다. (그림 내 2번)

※버킷 이름은 도메인 이름과 동일하게 하면 된다. / www.를 넣고 싶을 시 S3버킷 이름에도 www.을 붙여주자

 

Cloud Front적용

1. 생성(저번시간에 진행한 것과 같다) > 2. 브라우저 확인 > 3. 도메인 연결 > 4.도메인 추가

도메인연결

위 그림의 2번 위치에 입력했던 S3 정적 웹 호스팅 값을 지우고 클라우드 프론트 URL을 넣자.

https:// 로 들어갈 경우 연결이 비공개로 설정 되어 있지 않다며 진행이 안된다.

클라우드 프론트에서 도메인 연결을 진행해야 하는데

배포중인 클라우드 프톤트에서 > 일반> 설정부분의 편집 > 

에서 도메인을 추가 해주면 된다. 추가후 설정 저장을 하면 에러가 나는데

SSL인증서가 없어서 그렇다.

이 부분으로 들어가면 Certificate Manager로 이동한다.

 

Certificate Manager (버지니아 북부 고정)

1. 도메인 이름 추가

도메인은 *.URL로 적었는데 앞의 *은 앞쪽에 www.이든 뭐가 오든 다 포함한다는 뜻이다.

수업과는 별개로 인증서에 다른 이름 추가를 해서 도메인 하나를 더 넣었는데

*.을 빼고 도메인을 집어 넣었다.

- 가지고 있던 도메인이 asdfg.shop 같은 형식의 도메인이었어서 앞의 www를 제외하려고 하니 *. 때문에 계속 403리퀘스트 에러가 떠 인증서에 .을 추가한 도메인과 제외한 도메인 둘다 넣었더니 해결 됐다.

 

이후 인증서 요청을 하게 되면 검증 대기중이라 뜨며 

도메인 쪽에 이름과 우측에 Cname 이름, 값이 뜬다

이 Cname 값들을 다시 DNS관리에 가서 레코드를 추가하면 되는데

그림의 1번과 2번은 클라우드 프론트 URL 값이며 앞쪽 호스트는 www.을 붙인 도메인과 @을 이용해 없는 도메인 2가지를 연결시킨 것이다.

3번과 4번에 각각 Cname 이름과 값이 들어가면 되는데 주의할 것은

Cname 이름을 넣을 때 마지막 .도메인 부분은 지우고 넣어야 한다.

예를들어 Cname 이름이

_3ekfn3klfwi3kfnwl3isp3sks.asdf.shop 이란 값이 나왔다면 뒤에 .asdf.shop 부분은 버리고 앞쪽의_3ekfn3klfwi3kfnwl3isp3sks 만 넣으면 된다.

 

이후 클라우드 프론트에서 설정

아까 설정 편집하던 부분에서 도메인 추가를 2가지 진행한다.

내가 구매한 도메인이 asdf.shop이라면 *.asdf.shop 과 asdf.shop 이란 도메인 2개의 값을 넣었다.

만약 인증서에서 저 2개의 도메인을 입력하지 않았다면 다시 에러가 뜨는 걸 확인

변경 사항을 저장할 시 적용완료

브라우저를 확인해보자

 

※혹시 몰라 점검한 부분

http나 https나 상관없이 그냥 도메인만 검색해서 들어가보고 싶어 검색한 결과(AWS공식 문서)

동작 탭으로 이동하여

1번과 2번 순서대로 들어갈 경우 설정을 바꿀 수 있는데

뷰어 부분을 1번째 HTTP and HTTPS(둘다 허용) 이나 Redirect HTTP to HTTPS (HTTP로 접속시 HTTPS로 리다이렉트) 를 선택하면 된다고 한다.