SSR ๋ฐฐํฌ (4) :: Docker

e_juheeยท2022๋…„ 5์›” 5์ผ
1

Deployment

๋ชฉ๋ก ๋ณด๊ธฐ
9/9

์ง€๊ธˆ์€ 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: ๋ช…๋ น์„ ์ž…๋ ฅํ•  ์ปค์„œ๋ฅผ ๋งŒ๋“ค๊ฒ ๋‹ค.

  1. 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]

  1. git pull
  2. VM ๋ฉˆ์ถ”๊ธฐ sudo docker stop
  3. ๋‹ค์‹œ build sudo docker-compose build
  4. ์‹คํ–‰ sudo docker-compose up -d
profile
์ฅ๋กœ๊ทธ

0๊ฐœ์˜ ๋Œ“๊ธ€