{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/20-04-22-cra-dockerize/", "result": {"data":{"site":{"siteMetadata":{"title":"irrationnelle","author":"irrationnelle","siteUrl":"https://dev.rase.blog","comment":{"disqusShortName":"","utterances":"irrationnelle/devlog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"c3a22a65-aa0c-5526-883b-e7a14cfe1acd","excerpt":"Hello Docker 토이 프로젝트에 CI/CD 를 붙이다가 Docker 를 오랜만에 다시 만지게 되었다. 평소 TIL 리포에만 글을 남기다가 오랜만에 블로그를 작성하는데 형식이나 친절도는 TIL 와 거의 비슷할 것 같다. CRA 로 간단한 react 앱 만들기 Dockerize 프로젝트를 Docker 컨테이너에 담는 작업을 dockerize…","html":"

Hello Docker

\n

토이 프로젝트에 CI/CD 를 붙이다가 Docker 를 오랜만에 다시 만지게 되었다.

\n

평소 TIL 리포에만 글을 남기다가 오랜만에 블로그를 작성하는데 형식이나 친절도는 TIL 와 거의 비슷할 것 같다.

\n

CRA 로 간단한 react 앱 만들기

\n
$ npx create-react-app example\n$ cd example # 생성한 프로젝트의 디렉토리의 root 폴더에서 이어지는 작업을 한다.
\n

Dockerize

\n

프로젝트를 Docker 컨테이너에 담는 작업을 dockerize 라고들 하는 것 같다.

\n

먼저 프로젝트의 루트 디렉토리에서 Dockerfile 을 생성한다.

\n
$ vim Dockerfile
\n

내용은 다음과 같이 채워넣었다.

\n
FROM mhart/alpine-node:latest\nWORKDIR /app\n\nCOPY package*.json ./\nRUN npm install\nCOPY . ./\nEXPOSE 3000\n\nCMD [\"npm\", \"start\"]
\n

여기서 혼동했던 것 중 하나는 WORKDIR 부분인데, 이건 생성하려는 docker 컨테이너 내부의 위치를 이야기 한다.

\n

즉 위와 같은 설정값으로 docker image 를 빌드하면 나중에 docker 컨테이너 내부에서 ~/app 내부에 우리가 작업한 프로젝트들이 담겨있는 것을 확인할 수 있다.

\n
vim .dockerignore
\n

컨테이너에 담지 않을 내용도 추가해준다.

\n
node_modules
\n

참고사항으로 mhart/alpine-node:latest 는 다운로드 수는 많은 docker 이미지이지만 docker hub 로부터 인증받은 repo는 아니다. 나는 오늘(20. 04. 22) 기준으로 나온 node 14.0.0 을 사용하기 위해 이 이미지 기반으로 컨테이너를 만들었다.

\n

그럼 이제 docker 컨테이너 이미지를 빌드한다.

\n
$ docker build -t alpine_node:dev . # 여기서 :dev 는 태그값이다
\n

docker 컨테이너 실행

\n

$ docker run -it -v ${PWD}:/app -p 3002:3000 --rm -d --name alpine_node_test alpine_node

\n\n

대략적인 옵션 설명은 여기까지 하면 될 것 같다.

\n

이렇게 한 뒤 브라우저를 작동시켜서 http://localhost:3002 로 접속하면 CRA 앱 실행을 확인할 수 있다.

\n

docker 컨테이너를 종료하고 싶을 땐

\n

docker ps 로 컨테이너 id 를 확인하고

\n
$ docker stop [container_id] # [] 는 안 넣어줘도 된다.
\n

로 종료한다.

\n

이외의 참고할 것들

\n

생성한 docker 컨테이너 내부에 접속하고 싶을 때는 다음 명령어를 사용한다.

\n
$ docker run -it -p 3002:3000 --rm -d --name alpine_node_test alpine_node /bin/sh\n$ docker exec -it alpine_node_test /bin/sh # alpine linux 에는 bash 가 기본설치 되어있지 않아서 /bin/sh 를 이용한다
\n

위 명령어를 실행하면 docker 내부 컨테이너의 쉘 실행을 확인할 수 있다.

","frontmatter":{"title":"CRA 앱 Dockerize 하기","date":"April 22, 2020"}}},"pageContext":{"slug":"/20-04-22-cra-dockerize/","previous":{"fields":{"slug":"/19-12-18-list-value-control/"},"frontmatter":{"title":"list comprehension 과 map","category":"Python","draft":false}},"next":{"fields":{"slug":"/20-07-16-test-and-spec/"},"frontmatter":{"title":"TDD 와BDD, 그리고 명세(spec)에 대하여","category":"Devops","draft":false}}}}, "staticQueryHashes": ["3128451518","3474900066"]}