데브코스 TIL - 프론트엔드 컨테이너 만들기

백엔드 컨테이너 만들기 - 오류 해결…?

어제 백엔드 컨테이너를 만들었는데, unhealthy가 떳었다.
어떤 오류가 있는지 확인하기 위해 오늘 다시 docker compose up -d와 docker ps명령어를 입력해보았더니, 정상적으로 응답 받아왔다…

어제 docker compose up -d 명령어를 입력했을 때 컴퓨터가 부하 상태여서 네트워크 문제로 오류가 발생한 것 같다.

프론트엔드 컨테이너 만들기 실습

1. docker-entrypoint.sh 작성

REACTAPP으로 시작하는 환경변수를 window._ENV 객체에 저장하는 env.js 파일 생성하기 위해

#!/bin/bash
set -e

# REACT_APP_으로 시작하는 환경변수를 window._ENV 객체에 저장하는 env.js 파일 생성
echo -n "" > ./build/env.js
echo "window._ENV={" >> ./build/env.js
for key in $(compgen -v | grep ^REACT_APP_); do
 echo "$key:'${!key}'," >> ./build/env.js
done
echo "}" >> ./build/env.js

# 앱 서버 시작
exec serve -s build

2. Dockerfile작성

FROM node:18
WORKDIR /var/app

RUN npm install -g serve
COPY build ./build

EXPOSE 3000

# 셸 스크립트를 /usr/local/bin/에 배치하고 docker entrypoint 로 설정
# 컨테이너가 실행할 때 window._ENV 객체에 환경변수 전달하는 역할을 하는 코드를 /var/app/build/env.js에 만들도록 설정
COPY docker-entrypoint.sh /usr/local/bin/
RUN chmod u+x /usr/local/bin/docker-entrypoint.sh
ENTRYPOINT ["docker-entrypoint.sh"]

3. Makefile 생성

ARCH=amd64
IMG_TAG="hyeem66/prgms-fe:latest"

all:
 cat ./Makefile

test:
 CI=true npm test

node:
 npm ci
 npm run build

image: Dockerfile node
 docker build --platform=linux/${ARCH} --tag ${IMG_TAG} .

4. 컨테이너 빌드하고, 이미지 만들기

• 컨테이너 이미지 만들기

docker build -t prgms-fe .

• 컨테이너 이미지 태그하기

docker tag prgms-fe hyeem66/prgms-fe:latest

• 도커 허브에 이미지 업로드

docker push hyeem66/prgms-fe:latest

5. root 경로에 있는 docker-compose.yaml파일에 프론트엔드 코드 추가하기

services:
  frontend:
    image: 'hyeem66/prgms-fe:latest'
    environment:
      REACT_APP_API_BASE_URL: http://localhost:3031
    ports:
      - 3000:3000
    networks:
      - notes

6. 컨테이너 백그라운드에서 실행시키기

docker compose up -d

7. db, 백엔드, 프론트엔드 모두 컨테이너가 잘 실행됨

8. 인터넷 창을 이용해서 localhost:3000/login 접근

프론트엔드를 build를 하지 않은 상태로 컨테이너를 실행하니 초기값인 “서버오픈”만 렌더되었다.

그래서 프론트엔드 프로젝트를 npm run build 명령어를 사용해서 빌드를 새롭게 해줬고, 컨테이너 이미지를 다시 만든 다음에 다시 컨테이너를 실행시켜주었다.

그랬더니, 백엔드가 DB와 연결하지 못하는 오류가 갑자기 발생하였다. docker 목록을 확인하면 모든 컨테이너들이 정상적으로 실행중이었는데,백엔드로 요청을 보내면 500 서버 오류가 발생했다.

db를 사용하고 있지 않은 /healthcheck 요청에 대한 응답은 성공적으로 받아오고 있기 때문에 백엔드 서버와 db 서버가 제대로 연결되지 않았다는 생각이 들어 하나하나 체크해보았다.

먼저 db 서버가 제대로 구축되었는지 다시 한번 확인해보았다.

데이터베이스, 테이블 모두 제대로 들어있는 것을 확인하였고, 백엔드 프로젝트의 코드를 확인해 보았다.

데이터베이스, 테이블 모두 제대로 들어있는 것을 확인하였고, 백엔드 프로젝트의 코드를 확인해 보았다.

백엔드 프로젝트 코드를 확인해보니, 강사님 코드를 그대로 따라쳤더니 ENV 값이 다르게 설정되어 DB와 연결을 하지 못한 것이었다.

• 강사님 코드

DB_HOST:
DB_PORT:

• 내 코드

HOST:
MARIA_DB_PORT:

앞으로의 강의를 위해 강사님과 ENV 설정값을 맞추는게 낫을 것 같아서 ENV의 값을 변경했다. 변경하고 나서 다시 컨테이너 이미지를 생성해주었고, 컨테이너를 다시 실행하니 제대로 값을 받아오는 것을 확인할 수 있었다.

DB,백엔드,프론트엔드 컨테이너가 모두 실행되는 것을 확인했고, 컴퓨터가 부하가 걸려서 컨테이너 실행을 종료시켜주었다.

docker compose down