[프론트엔드 인턴쉽] 도커(Docker) 이미지 파일 생성

root에 DockerFile 생성

// Dockerfile
# 1. 베이스 이미지 설정 (Node.js 18 사용)
FROM node:18-alpine

# 2. 작업 디렉토리를 설정
WORKDIR /app

# 3. 의존성 파일을 복사하고 설치
COPY package.json yarn.lock ./
RUN yarn

# 4. 환경 변수 파일을 복사 or env를 compose로 했을 경우는 제외
COPY .env.local .env.local

# 4. 나머지 프로젝트 파일을 복사
COPY . .

# 5. start.sh 파일 복사 및 실행 권한 부여
COPY start.sh /app/start.sh
RUN chmod +x /app/start.sh

# 6. 빌드
RUN yarn build

# 7. 포트 설정
EXPOSE 3000 4000

# 8. 애플리케이션 시작 명령어 설정
CMD ["/app/start.sh"]

 

root에 start.sh 파일 생성

//start.sh
# json-server 실행 (예: db.json이 데이터베이스 파일인 경우)
yarn server &

# 애플리케이션 서버 실행 (yarn start)
yarn start

 

root에 .dockerignore파일 생성

.gitignore와 같이 docker파일 생성에 포함시키지 않을 파일들을 지정해 준다.

//.dockerignore
node_modules
.env.local
yarn-debug.log*
yarn-error.log*
.vercel
*.tsbuildinfo
next-env.d.ts

 

root에 docker-compose.yml 파일 생성

.env파일을 도커 이미지 파일에서 제외한다

//docker-compose.yml
version: '3'
services:
  app:
    image: your-image-name
    build: .
    ports:
      - "3000:3000"
      - "4000:4000"
    env_file:
      - .env

---

이미지 파일 생성 및 컨테이너 실행

docker build -t mg-container.kr.ncr.ntruss.com/front-image .

컨테이너 레지스트리에 로그인

docker login mg-container.kr.ncr.ntruss.com

아이디와 비밀번호 입력

비밀이니까 이것이 아이디라고 합시다. 엔터누르고
비밀번호도 잘 입력해줍시다

생성된 이미지파일 push

docker push mg-container.kr.ncr.ntruss.com/front-image

---

이미지 파일 재생성 시 , 처음 생성한 이름 고정값으로 생성해야 한다

이미지파일 이름잘못입력했을 때  변경하는 방법

변경 전 > 변경 후

$ docker tag your-image-name mg-container.kr.ncr.ntruss.com/front-image