SSR 배포 (4) :: Docker

지금은 shell을 종료하면 서버도 종료가 된다.
shell을 꺼도 서버가 켜져있도록 Docker를 이용해보자!

---

Docker 설치

(1) 설치

[Docker]

M1은 Apple Chip ㄱㄱ
이거 좀 오래 걸린다.. 미리 받아두장

설치 되었는지 확인
docker --version
docker-compose --version

(2) Dockerfile 생성

docker file을 만들어두면 npm의 라이브러리 받듯이, github pull 받듯이 쓸 수 있다.

• Npmjs.com ←npm install→ VSC
• github.com ←git clone/pull/push→ VSC
• hub.docker.com ←docker pull/push→ VSC

class_build/Dockerfile

FROM node:14
# nodejs 14버전과 npm, yarn을 설치한다.

WORKDIR /class_build/
# 커서의 위치를 아래 명령어를 실행할 폴더로 이동한다.

COPY . /class_build/
# . : 현재 있는 모든 파일들
# 현재 있는 모든 파일들을 복사해서 새 폴더에 넣어준다.

RUN yarn install
RUN yarn build:ssr
CMD yarn start

RUN & CMD

RUN과 CMD 둘 다 명령을 실행시키는 명령어이다.
CMD는 한번밖에 못쓰고, RUN은 여러번 쓸 수 있다.

💡 뭐가 달라?
RUN 명령어는 미리 실행시켜서 저장해놓는 것이고,
CMD는 실행할 때 작동되게 하는 명령어이다.

Dockerfile을 만들고 나면 build를 하는데, build 과정을 거치면 하나의 이미지 형태(압축된 하나의 파일)로 나온다.
Docker를 실행할 때 안에 적힌 명령어들로 매번 설치를 하는 게 아니라, 설치까지 다 해놓은 파일을 압축하고 최적화해둬서 Dockerfile을 실행시키면 설치가 다 되어있는 파일이 한번에 실행하는 것이다.

(3) docker-compose.yaml 생성

실무에서는 Dockerfile이 여러개이다.
yaml파일(설정 파일)에 실행시킬 Dockerfile을 넣어두면 여러개를 한번에 실행시킬 수 있다.

docker-compose.yaml
(yaml 파일은 띄어쓰기가 중요하다! 띄어쓰기로 부모/형제 관계가 설정되기 때문이다.)

version: "3.7"

services:
  my_frontend:
    # 서비스 이름(맘대로)
    build:
      context: .
      # Dockerfile이 있는 위치(. :현위치)
      dockerfile: Dockerfile
      # build할 파일
    ports:
      - 3000:3000

(4) docker-compose.yaml 생성

VM을 Docker로 바꾸자

GCP의 VM 인스턴스에도 Docker를 설치해줘야 한다.
그렇다면, 내 컴퓨터에 Docker를 설치한 이유는?
일단 내 컴퓨터에서도 테스트를 한번 해봐야 하기 때문이다.

1. 최적화
   docker-compose build

2. 실행
   docker-compose up

node_modules도 카피가 된다.

node_modules를 COPY 대상에서 제외시켜야 한다.

해당 폴더에서 build

docker ps
하면 컴퓨터 아이디를 볼 수 있다.

docker exec -it 컴퓨터아이디 /bin/bash
bash: 명령을 입력할 커서를 만들겠다.

3. git add . - commit - push

shell에서

git pull
docker-compose build
sudo apt install docker-compose
Y
sudo docker-compose build
sudo docker-compose up
요기까지 하면 접속이 된다 -> 도커 환경에서 배포가 된 것이다.

sudo docker-compose up -> 이게 실행. 요걸 종료(ctrl+c)시키면 접속이 안된다.

쉘도 종료시키면 안된다.
쉘에서 커서가 앞에서 깜빡거리는 것을 foreground라고 부른다.
도커를 활용하면 background에서 돌릴 수 있다. 그러면 쉘을 꺼도 접속이 된다.
sudo docker-compose up -d

sudo docker ps를 쳐보면 백에서 돌아가고 있는지 확인할 수 있다.

실제로 배포를 할 때는 foreground가 아닌 background에서 배포를 한다.

sudo docker-compose stop을 치면 백그라운드에서도 종료가 된다.
종료시키고 sudo docker ps
sudo docker -compose up -d
sudo docker ps

로그를 보고싶으면
sudo docker-compose logs

---

storage와 VM으로 가는 것을 분기처리
yarn build를 하면 고유한 아이디 값이 붙는다.
빌드를 할 때마다 아이디를 통일시켜주기 위해서 build id 세팅을 해보자.

next.config.js

yarn build:ssg를 하면 out 폴더가 생겼는데
지금 이거 하면 에러남!
SSR은 static 파일로 만들 수 없기 때문이다!!

static file을 적어준다.
build 다시 하면 여기에 적은 것만 out 폴더 안에 생기게 된다.

yarn build:ssg 다시 ㄱ

LoadBalancer

---

테스트하는 방법

상세 주소를 입력했을 때 도커로 접속이 되는 거니까
도커를 종료하면 접속이 안되어야 하고
도커가 종료되어 있어도 상세가 아닌 boards로 끝나는 주소로 접속하면 접속이 되어야 한다. 그건 스토리지로 가는 거니까!

---

🚨 Error

GCP에서 VM은 잘 접속이 되고 있다고 뜨는데,
SSR 페이지에서는 500 에러가 뜨고 접속이 안됐다..

VSC에서 graphql과 graphql-request를 다시 설치하고, git push -> git pull 해서 다시 build& 실행했더니 접속이 잘 됐당!

[VSC]

1. yarn add graphql
2. yarn add graphql-request
3. node_modules 지우고
4. yarn install
5. git push

[GCP - Shell]

6. git pull
7. VM 멈추기 sudo docker stop
8. 다시 build sudo docker-compose build
9. 실행 sudo docker-compose up -d