사이트 배포 준비

도마스묵의 개발일지·2021년 8월 28일
0

부트캠프(개발_시작)

목록 보기
26/26

배포준비 및 이해

ssg 배포

배포할때는 js 파일이 아닌 HTML파일로 바꿔줘여하는데,
trailingSlash를 해야 각각의 주소를 통해서 직접 들어 갈 수 있다.

NextJS SSG 로 빌드하기
작업물을 Static Site 로 배포 하기 위해서는 각각의 페이지와 파일들을 export 기능으로 빌드할 필요가 있다.
package.json 의 scripts 영역에 next build && next export 명령어를 세팅 해주어야 한다.
빌드가 되면, 기본적으로 out 폴더 밑으로 정적 파일들이 생성된다.
만약 build 폴더를 바꿔야 한다면, next.config.js 에 build 폴더를 세팅해 줄 수 있다.
next.config.js 에서 distDir 값을 변경해주면 된다.
만약 html 과 asset 을 다른 서버로 관리해야 한다면, next.config.js 에서 assetPrefix 값을 변경해주면 된다.
기본적으로 파일들은 파일명을 따라가는데, 모든 html을 index.html 로 뽑아내야 한다면, next.config.js 에서 exportTrailingSlash 을 true 로 설정한다.

스토리지에 저장해서 배포하기

여러가지 플랫폼중에 구글클라우드를 이용한 방법을 했다.
vm에 바로 올려도 되지만 스토리지에 저장해서 배포하는 방법을 시도했다.

스토리지에 버킷을 하나 생성후
내가 배포할 파일들을 한번에 넣어주기 위해서 클라우드 쉘에서 git 소스코드를 clone 한다.
yarn install과 yarn build를 진행하여 out 폴더를 추출,
yarn install과 yarn build를 진행하여 out 폴더를 추출

모든 사람들이 스토리지의 html, css, javascript 파일을 다운로드 받을 수 있도록 권한을 변경

어떤 파일이 시작 파일인지(index.html), 어떤 파일이 에러 파일인지(404/index.html)를 설정

하지만, 접속을 하기 위해선 접속을 도와주는 도구와 연결을 해야한다.
이 도구를 로드밸런서(부하분산기)라고 한다.

새로운 HTTP(S)방식의 부하분산기를 만든다.

부하분산기는 프론트엔드, 백엔드로 구성된다.
여기서 프론트엔드와 백엔드는 웹서비스의 화면단, API단을 의미하는 것이 아니라
**외부에서 로드밸런서로 진입하는 지점**이 프론트엔드,
로드밸런서에서 소스코드가 담겨있는 위치로 내보내는 지점이 백엔드

백엔드를 기존에 만들었던 스토리지 버킷과 연결

이제 도메인과 연결만 시켜주면 끝!

느낀점

처음 배포하는것이라 그런지 상당히 복잡해서 하나하나 다 이해하고싶은 부분이 너무나도 많았다.
기회가 된다면 다시 차근히 배포를 다시 해보고 ssg뿐 아니라 ssr 배포까지 도전 할 수 있는 기회가 오면 큰도움이 될 것 같다.

0개의 댓글