https부하분산기
이름짓기
프런ㅡ엔드구성을 ip및 포트로 만들기
백엔드는 아까 만든 버킷을 연결하기
인증서만들기
구글관리 인증서 만들기
도메인엔 내가구매한 도메인을 올림
호스트 및 경로 규칙은 알아서 설정되어있음
인증서를 들어가서 확인해보면 아직 도메인상태에 회색이 되어있음
프로비저닝에 10-30분정도가 걸림
이렇게 하면 연결이 끝임
SSR
다이나믹한 OG(오픈그래프)를 위해서는 SSR이 필요함
스태틱한 OG를
/board/상세페이지를 보면 항상 공통된 미리보기가 나오게하고
다이나믹한 OG를
/market/상세페이지에서 다이나믹한 미리보기로 나오게 하자
다시한번 보는 네이버의 og태그들 og:title, og:url og:image
이렇게 하면 og를 이용해서 미리보기를 사용할 수 있다.
쓰고싶은거만 쓰면 된다.
import Head from "next/head";
export default function BoardsPage() {
return (
<>
<Head>
<meata property="og:title" content="나만의 사이트 게시판!!!" />
<meata property="og:url" content="http://naver.com" />
<meata
property="og:image"
content="https://cdn.cnn.com/cnnnext/dam/assets/190517103414-01-grumpy-cat-file-restricted.jpg"
/>
<meata
property="og:description"
content="안녕하세요 불만인 고양이 사이트입니다"
/>
</Head>
<div> 안녕하세요! 게시판입니다! </div>
</>
);
}
이렇게하고 다시 빌드를 해보자
yarn build:ssg
설정은 다 되어있기 때문에 버킷에 드래그앤 드롭으로 옮기면 된다.
이렇게 방금만든 boards가 추가되면 됨.
(만약에 안되면 git과 터미널을 사용해서 추가해야함)
그럼 이렇게 슬랙이나 카카오톡에서 미리보기로 볼 수 있게된다
https를 추가해서 이렇게 자물쇠도 보여야한다.
(나는 비용이 400달러가 나온줄알고 지워서 안보인다. 로드밸런서를 다시만들어야함)
왜 HTTPS가 필요한가?
(통신정보가 다 노출된 모습)
네트워크의 상태를 볼 수 있는 와이어샤크이다.
이렇게 http로 하면 네트워크 통신을 할때 넘어가는 데이터(패킷)들을 볼 수 있다.
왜냐? - 컴퓨터공학적 부분을 알아야한다
컴퓨터 통신이 생길 때
컴퓨터 간 연결이 됐나 안됐나 체크과정이 먼저 되고 실제 데이터를 전송한다.
내가 서버에 알려주고(sync), 서버에서 나한테 알려줌(sync+ack)
그럼 나는 서버에 알려줌(ack)
이렇게 3단계를 거쳐서 악수를 하는 것 처럼 보이므로 3-way handshake라고 함
여기서 HTTPS로 바꾸면
이렇게 통신이 일어나도 encrypted 암호화됐다는 메세지만 볼 수 있다.
다시 SSR
OG 오픈그래프로 미리보기가 된다.
근데 여기서 상세주소에 맞는 이미지에 맞게 보여주고 싶다.(다이나믹하게)
여기서 서버사이드 렌더링이 필요하다.
서버사이드렌더링이 아니면 안되는 건가??
지금은 그냥 다 지정해놨기때문
아까 코드들은 그냥 이미지주소, 컨텐츠내용도 마찬가지고 다 써놨음
useQUery하면 안되나?
html자바스크립트 1차로 그리고 그 이후에 api를 가져와서 채우므로 빈값만 보이게된다.
그래서 서버쪽에서 만들면서 렌더링을 해놔야한다.(서버사이드렌더링)
새로 한번 해보자
next에서 제공해주는 기능이다.
getServerSideProps의 이름은 무조건 같아야한다.
이걸로 데이터를 받아와서 페이지에 props로 넘겨야한다.
(axios 요청, graphql)
근데 조건이 있음, 항상 서버가 켜져있어야한다.(항상 yarn dev 상태)
axios 요청을 위해서 graphql 클라이언트 를 사용하거나 rest-api를 쓰자
(근데 클라이어트가 간단하니까 이걸로해보자)
yarn add graphql-request
import { gql, request } from "graphql-request"
import Head from "next/head";
import { gql, request } from "graphql-request";
export default function MarketPage(props) {
return (
<>
<Head>
<meata property="og:title" content={props.fetchUseditem.name} />
{/* <meata property="og:url" content="http://johnwithsmile.me" /> */}
<meata property="og:image" content={props.fetchUseditem.images[0]} />
<meata
property="og:description"
content={props.fetchUseditem.remarks}
/>
</Head>
<div> 안녕하세요! 안녕하세요 상품페이지에요! </div>
</>
);
}
const FETCH_USEDITEM = gql`
query fetchUesditem($useditemId: ID!) {
fetchUesditem(useditemId: $useditemId) {
name
remarks
images
}
}
`;
export const getServerSideProps = async (context) => {
const result = await request(
"https://backend04.codebootcamp.co.kr/graphql",
FETCH_USEDITEM,
{
useditemId: context.query.useditemId,
}
);
return {
props: {
fetchUseditem: {
name: result.fetchUseditem.name,
remarks: result.fetchUseditem.remarks,
images: result.fetchUseditem.images[0],
},
},
};
};(context)는 next의 라우터를 쓰는데 그거보다 많은 부분이 들어간다. 그래서 context로 씀. 그래서 router.query가 아니고 context. dlsrjty
리턴부분에도 props가 있어야함
이렇게 쓰면 props로 리턴을 하니까
페이지에 props로 받을 수 있게됨
정리
-
getServerSideProps 에서 result에 담는 과정이 프런트엔드에서 백엔드로 요청하고 result로 받음 (***부분)
-
return을 props로 넘기면서 프런트에서 완성된 HTML,CSS,JS로 만듬
-
여기서 브라우저로 넘김
근데 여기서 프런트엔드 컴퓨터를 하려면 빌린 컴퓨터에 소스코드를 올려서 yarn build, start를 해야함
Gcp - Compute engine - vm 인스턴스 - 인스턴스 만들기를 하면 가상 컴퓨터를 빌릴 수 있다.
이름은 자유롭게,
리전은 aisa-northeast3(서울), 이 리전에 따라서 비용이 달라진다(서울이 아니어도 상관없음사실)
머신유형은 e2-small정도로 한다.
부팅디스크는 리눅스로 골라야한다. 일반적으로는 리눅스로함
작은서비스에 맞는 우분투(ubuntu)를 써보자
방화벽은 둘 다 허용해야한다.
여기서 ssh 부분을 누르면 새로운창에서 열리게된다
짜잔 사실상 우리는 구글의 컴퓨터를 하나 빌려서 쓰고있는셈이다(굉장히 작은거)
그래서 여기서 yarn build를 해서 start까지 해두면 아까 인스턴스에서 본 아이피 주소로 접근할 수 있게된다.
vs코드에서 yarn build:ssr을 먼저 해서 잘 되나 확인 후에
git add/commit/push까지해보자
그리고 아까 빌렸던 vm에서 clone을 해온다.
그리고 폴더에 가서 노드 버전을 확인해보니 노드가 없단다.
Command 'node' not found, but can be installed with:
이러면 노드를 깔아야한다.
https://velog.io/@ywoosang/Node.js-%EC%84%A4%EC%B9%98
그런건 구글 검색을 활용하자.
그래서 버전이 뜬 모습
근데 yarn install도 안된다
우분투 메세지 보면 yarn 도 알아서 깔라고 써있음
nodejs없음
yarn 없음
npm 없음(nodejs깔면 알아서 깔림)
이후에 build 폴더에서
yarn install, yarn build:ssr을하면된다
짜잔 yarn dev했을때와 같은 모습이 보인다.
이러면 24시간유지가 되는거고 끄면 접속이안된다(ctrl+c)
포트가 3000번이라니까 접속한번해보자
근데 여기서 localhost:3000으로는 접근을 못한다
왜냐면 이건 구글컴퓨터고 내 브라우저는 구글컴퓨터에서 열리는게 아니기 때문
그래서 빌린 컴퓨터의 ip:3000/주소 이렇게 한다
근데 이렇게 해도안된다
기본적으로 외부접속은 차단하는 설정이기 때문
-> 방화벽이 깔려있다고한다.
그래서 누구나 접속할 수 있는 공간(DMZ)에 로드밸런서를 두고 로드밸런서가 필요한 백엔드나 프런트엔드로 연결시켜줘야한다.
아무나 들어오면 보안이전혀안되니까 이렇게함
문열어보자
GCP - VPC네트워크 - 방화벽 - 방화벽 규칙만들기를 해야함
이름은 상관없지만
태그가 중요하다 스티커를 만들어서 그걸 허용해주는거다
태그의 이름은 이름과 같게하는게 편하지만 상관없음
소스범위는 출발지를 이야기한다(데스티네이션은 도착점, src, dst이렇게도 말함)
범위에 0.0.0.0/0 이렇게 쓰면 누구나 된다고 하는뜻
tcp 3000이면 3000번 포트로 들어오는 걸 허용한다는 뜻이다.
-> 누구든 3000번 포트로 접속 가능
이제 이 방화벽 규칙이 달린 태그, 스티커를 붙여줘야한다.
vm 인스턴스로 들어가서
네트워크 태그부분에 아까 만든 태그 이름을 넣는다.
그리고 저장하면 방화벽의 규칙을 바꾼 것.
이렇게 외부아이피:3000번포트/아까만든 boards로 들어가면
들어갈 수 있게 된다.
이제 이렇게하면 미리보기 기능+ 외부에서도 출입가능 + 미리보기의 내용도 동적인 내용으로 바뀜(서버사이드렌더링) 이 가능하게된다.
근데 graphql도 없던게 발견
yarn add graphql
grphql request 도 없었음
yarn add graphql-request
git add/commit/push
vm에서
git pull, yarn install, yarn build:ssr, yarn start
이후 다시 브라우저에서 접속(상품id로)
이후 다시 카톡이나 슬랙에 붙여넣으면된다.
++next.config.js에 설정하나가 필요함
module.exports = {
reactStrictMode: true,
trailingSlash: true,
generateBuildId: () => "johnwithsmile-deploy",
exportPathMap: () => ({
"/": { page: "/" },
boards: { page: "/boards" },
"/404": { page: "/404" },
}),
};generateBuildId부분은 배포를 할 때 마다 새로운 아이디처럼 되고,
exportPath로 이렇게 SSG부분을 하나하나 넣어줘야한다.
요약
SSG
상품이 바뀌면 바뀐게 적용이 안됨
미리 html, css, js -> 아웃폴더로 바꿨음
그리고 next export로 보냄
스토리지에만 저장해도 실행이됨
SSR
서버에서 미리 완성시켜서 바뀐것을 보여줄수 있음
필요할때마다 데이터를 받아와서 meta태그를 받아와야함
getServerSideProps를 이용해서 데이터를 먼저 받아온다음 props로 넘겼음.
그래서 서버와의 통신이 필요함, 항상켜있는 서버)
그래서 vm 빌려서 공개적으로 build/start함
