1. docker 배포를 위한 사전 준비
가. Trailing Slash
Trailing Slash란?
URL 주소 끝에 /가 붙는 슬래시를 말함
ex)
https://www.google.co.kr/
주소 끝에 /가 붙어 있으면 디렉토리 즉 폴더라는 의미이고 없다면 여기가 끝이라는 소리임
Next.js의 경우에 기본으로 /가 붙지 않는데 이것을 강제로 해주는 방법이라고 보면 된다.
next.config.js 파일에서
const nextConfig = {
reactStrictMode: true,
trailingSlash: true,
};trailingSlash 옵션을 true로 해서 바꿔주기만 하면 된다.
나. package.json 파일 수정
build를 하기 위한 명령어 수정
package.json 파일에서 scripts 부분을 수정하도록 한다.
"scripts": {
"dev": "next dev",
"build:ssg": "next build && next export",
"build:ssr": "next build",
"start": "next start",
"lint": "next lint",
"generate": "graphql-codegen"
},build:ssg는 ssg 지원하는 명령어 build:ssr은 ssg, ssr 모두를 지원한다는 명령어 이다.
다. Dockerfile 만들기
FROM node:14
WORKDIR /내 작업파일/
COPY . /내 작업파일/
RUN yarn install
RUN yarn build:ssr
CMD yarn start라. docker-compose.yaml 만들기
여러 개의 도커를 한 번에 실행할 수 있는 파일
version: "3.7"
services:
my_frontend:
build:
context: .
dockerfile: ./Dockerfile
ports:
- 3000:3000띄어쓰기 중요함
마. .dockerignore 파일 만들기
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# local env files
.env*.local
# vercel
.vercel도커를 빌드할 때 제외할 파일들을 올려둔다.
2. GCP 클라우드 스토리지를 통한 정적 배포
가. yarn build:ssg 를 이용한 out 폴더 만들기
1) 터미널에 yarn build:ssg를 입력한다.
2) 완료되면 out 폴더가 생성이 된다.
이제 이 out 폴더를 gcp에 올릴 것임
나. GCP 클라우드 스토리지에 out 폴더 업로드 하기
1) GCP에 접속 후 Cloud Storage 탭에서 브라우저에 들어간다.
2) 새로운 버킷을 하나 생성 해준다.
상단에 버킷 만들기를 눌러주고
버킷 이름 입력 -> 위치 아시아 -> 계속 클릭 후 -> 만들기를 누르면 버킷이 생성이 된다.
3) 상단의 쉘을 눌러서 쉘을 하나 열어준다.
가장 좌측의 버튼이 쉘이다
4) git clone 명령어를 통해 git을 입력한다.
이후 yarn install, yarn build:ssg를 이용해 out 폴더를 만들어 준다.
5) gsutil 명령어를 이용해 out 폴더를 구글 스토리지에 업로드 한다.
이후 새로고침을 해서 out 폴더가 잘 올라갔는지 확인을 한다.
6) 이제 모든 사람들이 html, css, javascript 파일을 다운로드 받을 수 있도록 권한을 변경한다.
권한 탭에서 추가 버튼을 눌러서
allUsers의 역할을 Cloud Storage에서 저장소 개체 뷰어로 등록한다.
그러면 하단 주 구성원에 allUsers가 추가가 되어있는 것을 확인할 수 있다.
7) 웹사이트 구성 수정
어떤 파일이 시작파일이고 어떤 파일이 에러파일인지 알려줘야 한다.
처음으로 돌아와서 우측 메뉴 클릭 -> 웹사이트 구성 수정을 클릭한다.
기본 페이지에는 index.html(tsx)
오류 페이지에는 404/index.html(tsx)를 입력한다.
(경로는 프로젝트마다 다를 수 있음)
스토리지 배포 끝
3. 로드밸런서(부하분산기) 설정하기
가. 부하분산기 만들기
1) gcp -> 네트워크 서비스 -> 부하분산 클릭
2) 부하분산기 만들기 클릭
HTTP(S) 부하 분산 구성시작 클릭
다음과 같이 구성해준다.
부하 분산기에는 프론트와 백으로 구성되어 있는데
프론트엔드는 외부에서 로드밸런서로 진입하는 지점을
로드밸런서에서 소스코드가 담겨있는 위치로 내보내는 지점을 백엔드라고 한다.
그 프론트엔드, 백엔드가 아님
3) 부하분산기 이름과 프론트엔드 구성을 완료한다.
부하분산기 이름은 사진 좌측에 있다
프론트엔드 IP주소는 임시 주소로 해도 괜찮으나 나중에 HTTPS 구성을 위하여 고정 IP를 만들어 준다.
4) 백엔드 구성에서 기존의 스토리지 버킷과 연결해 준다.
백엔드 버킷을 만들어준다.
백엔드 버킷 만들기 클릭
백엔드 버킷 이름 만들어주고 Cloud Storage 버킷에 만들어둔 스토리지 버킷을 연결하면 가운데의 호스팅 및 경로 규칙은 자동으로 생성이 된다.
로드 밸런서 끝
4. Cloud DNS 구축하기
가. Cloud DNS를 이용해서 자신의 도메인과 연동하기
1) 네트워크 서비스 -> Cloud DNS 접속
2) DNS영역 만들기 클릭
3) 영역 이름, DNS 이름 설정 후 만들기 클릭
나. 가비아 도메인과 연동하기
1) 만들어진 DNS 영역 클릭
2) NS(Name Server)레코드 설정값 변경하기
화살표 모양을 클릭하면 라우팅 정책에 기본값들이 나오는데 이 값을 내가 구매한 가비아 사이트에 입력해야 함
3) 가비아에 접속한 후 마이가비아 -> 도메인 클릭
내가 구매한 도메인에서 관리 버튼 클릭
네임서버 설정을 NS레코드의 레코드 설정값으로 변경해준다.
이 작업은 매우 짧으면 30분 길면 하루 이상이 걸리기도 함
NS레코드 변경 확인법
쉘열어서 dig DNS이름 NS 입력을 하면 NS코드의 네임서버가 변경 되었는지 확인 할 수 있다.
(이 화면이 나와야함)
4) A레코드 세트 추가
여기서 A레코드는 DNS에서 로드밸런서로 넘겨주는 역할을 한다.
5) IP주소에 로드밸런서 IP를 입력해주면 된다.
로드밸런서 IP
Cloud DNS 설정 끝
5. HTTPS로 변경하기
가. HTTPS 전용 로드밸런서 생성
HTTP와 동일하게 로드밸런서 생성 클릭
버킷은 HTTP 로드밸런서 만들었던 것과 동일
나. 프론트엔드 구성
프로토콜에서 HTTPS 클릭 및 IP는 HTTP 로드밸런서와 동일하게 입력
다. 인증서 생성하기
1) 새 인증서 만들기
내가 가진 인증서가 있으면 인증서 업로드에 인증서 업로드하고 없으면 구글 관리 인증서로 만들어준다.
2) 이때 도메인은 내가 구매한 도메인을 입력하면 된다.
3) 만들기 클릭
여기서 인증서를 확인할 수 있다.
6. SSR을 위한 VM인스턴스 만들기
가. Computer-Engine에서 VM인스턴스 클릭
나. VM인스턴스 만들기 클릭
다. VM인스턴스 구성하기
지역은 서울지역, 머신 구성은 취향에 맡게 알아서 한다.
라. 부팅 디스크 변경
아래로 내려가다보면 부팅 디스크가 있는데 변경을 클릭
우분투에 버전 20.04 LTS를 입력해주고
크기는 알아서 설정한다.
그리고 만들기를 클릭
마. 인스턴스 컴퓨터 터미널 접속
바. git clone을 통해서 내 저장소를 클론해온다.
사. VM에는 node.js가 없기 때문에 설치를 해줘야 한다.
설치 명령어
sudo curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
아. yarn 설치
설치 명령어
sudo npm install -g yarn
자. 빌드 하기
yarn install해서 node-modules를 설치하고
yarn build:ssr을 입력해서 빌드를 해준다.
차. yarn start를 입력해서 서버가 띄워지면 성공이다.
VM인스턴스 만들기 끝
7. 방화벽 설정
가. 방화벽 만들기
1) 이름, 대상 태그를 입력한다.(둘이 똑같으면 좋다)
2) 소스 IP 범위를 0.0.0.0/0으로 입력하고 포트는 TCP 3000으로 해준다
3) 만들기
나. 만든 방화벽 VM인스턴스에 적용하기
1) VM인스턴스에 접속 후 수정하기 버튼 클릭
2) 만든 방화벽 태그를 네트워크 태그에 붙혀주고 저장
방화벽 만들기 끝
8. 인스턴스 그룹 만들기
가. 인스턴스 그룹 만들기
나. 비관리형으로 만들어줌
다. 리전은 서울 리전으로 변경하고 VM인스턴스는 만들어둔 VM인스턴스를 적용함
만들기 클릭
인스턴스 그룹 만들기 끝
9. HTTPS 로드밸런서에 백엔드 서비스 만들기
가. 백엔드 구성에서 백엔드 서비스 만들기
나. 새 백엔드 부분에 방금 만든 인스턴스 그룹을 입력하고 포트번호를 입력한다.
다. 상태확인을 새로 만들어 준다.
이름과 포트번호를 입력해 준다.
라. 만들기를 클릭하고 스토리지와 로드밸런서 분기를 나눠준다.
백엔드 서비스 만들기 끝
10. Docker로 배포하기
가. VM인스턴스에 접속 후 쉘 켜서 프로젝트로 들어간다.
나. git pull 해서 최신화를 시켜주도 docker를 설치한다.
설치 명령어
sudo apt install docker.io
sudo apt install docker-compose
다. 도커로 빌드하고 서버 띄우기
빌드 명령어
sudo docker-compose build
서버 띄우는 명령어
sudo docker-compose up -d
상태 확인
sudo docker ps
서버 죽이기
sudo docker kill ID 혹은 sudo docker stop ID
도커로 서버를 띄웠으면 중단없이 배포가 완료된다.
11. 배포 완료
