깃허브로부터 가져온 리액트 코드를 실행하는 도커 이미지 제작

깃허브로부터 리액트 소스코드와 Dockerfile을 가져와 nginx 컨테이너에서 서비스하는 도커 이미지를 제작합니다. 

 

깃허브 저장소 생성

깃허브에 소스코드를 저장할 퍼블릭 저장소를 생성합니다. 

 

소스코드 등록 및 저장소 주소 확인

리액트 어플리케이션 소스코드를 등록하고, 깃허브 저장소 주소를 확인합니다. 

 

VSCode를 실행하고 Dockerfile을 생성

작업 디렉터리에서 VSCode를 실행합니다.

## VSCode 실행
C:\docker> code .

 

이미지 빌드에 사용할 Dockerfile을 생성합니다. 이때, 각 단계의 컨테이너에서 필요한 값을 ARG 항목으로 정의합니다. 

## git을 설치하고 소스코드를 가져오는 컨테이너
FROM    alpine  AS init
RUN     mkdir /my-app
WORKDIR /my-app
ARG     GIT_REPOSITORY_ADDRESS
RUN     apk update && apk add git && git clone $GIT_REPOSITORY_ADDRESS

## .env 파일을 만들고 소스코드를 빌드하는 컨테이너
FROM    node    AS builder
RUN     mkdir /my-app
WORKDIR /my-app
COPY    --from=init /my-app/board-react/ .
ARG     REST_API_SERVER_IP               
ARG     REST_API_SERVER_PORT             
RUN     echo REACT_APP_REST_API_SERVER_IP=$REST_API_SERVER_IP > .env 
RUN     echo REACT_APP_REST_API_SERVER_PORT=$REST_API_SERVER_PORT >> .env     
RUN     npm install && npm run build

## 빌드 결과를 웹 루트 디렉터리로 복사하고, nginx 기본 설정을 변경 후 nginx를 실행하는 컨테이너
FROM    nginx   AS runtime
COPY    --from=builder /my-app/build/ /usr/share/nginx/html/
RUN     rm /etc/nginx/conf.d/default.conf
COPY    --from=builder /my-app/nginx.conf /etc/nginx/conf.d                    
CMD     ["nginx", "-g", "daemon off;"]

 

이미지 빌드

docker image build 명령으로 이미지를 생성합니다. 이때, 각 단계별 컨테이너에서 필요한 값(ARG 항목으로 정의한 값)을 --build-arg 옵션으로 지정합니다. 

## 이미지 빌드
C:\docker> docker image build --build-arg GIT_REPOSITORY_ADDRESS=https://github.com/myanjini/board-react.git --build-arg REST_API_SERVER_IP=localhost --build-arg REST_API_SERVER_PORT=8888 --no-cache -t react-from-github .
[+] Building 33.0s (24/24) FINISHED
 => [internal] load build definition from Dockerfile                                                                               0.0s
 => => transferring dockerfile: 32B                                                                                                0.0s
 => [internal] load .dockerignore                                                                                                  0.0s
 => => transferring context: 2B                                                                                                    0.0s
 => [internal] load metadata for docker.io/library/nginx:latest                                                                    1.8s
 => [internal] load metadata for docker.io/library/alpine:latest                                                                   1.9s
 => [internal] load metadata for docker.io/library/node:latest                                                                     1.9s
 => [auth] library/nginx:pull token for registry-1.docker.io                                                                       0.0s
 => [auth] library/node:pull token for registry-1.docker.io                                                                        0.0s
 => [auth] library/alpine:pull token for registry-1.docker.io                                                                      0.0s
 => CACHED [builder 1/7] FROM docker.io/library/node@sha256:83841d113e09345a28b146e431f15b062341c5449218e501ba45ef8f9cff6049       0.0s
 => CACHED [init 1/4] FROM docker.io/library/alpine@sha256:ff6bdca1701f3a8a67e328815ff2346b0e4067d32ec36b7992c1fdc001dc8517        0.0s
 => => resolve docker.io/library/alpine@sha256:ff6bdca1701f3a8a67e328815ff2346b0e4067d32ec36b7992c1fdc001dc8517                    0.0s
 => CACHED [runtime 1/4] FROM docker.io/library/nginx@sha256:aa0afebbb3cfa473099a62c4b32e9b3fb73ed23f2a75a65ce1d4b4f55a5c2ef2      0.0s
 => [builder 2/7] RUN     mkdir /my-app                                                                                            0.4s
 => [init 2/4] RUN     mkdir /my-app                                                                                               0.6s
 => [builder 3/7] WORKDIR /my-app                                                                                                  0.0s
 => [init 3/4] WORKDIR /my-app                                                                                                     0.0s
 => [init 4/4] RUN     apk update && apk add git && git clone https://github.com/myanjini/board-react.git                          3.3s
 => [builder 4/7] COPY    --from=init /my-app/board-react/ .                                                                       0.1s
 => [builder 5/7] RUN     echo REACT_APP_REST_API_SERVER_IP=localhost > .env                                                       0.4s
 => [builder 6/7] RUN     echo REACT_APP_REST_API_SERVER_PORT=8888 >> .env                                                         0.5s
 => [builder 7/7] RUN     npm install && npm run build                                                                            25.0s
 => [runtime 2/4] COPY    --from=builder /my-app/build/ /usr/share/nginx/html/                                                     0.2s
 => [runtime 3/4] RUN     rm /etc/nginx/conf.d/default.conf                                                                        0.3s
 => [runtime 4/4] COPY    --from=builder /my-app/nginx.conf /etc/nginx/conf.d                                                      0.1s
 => exporting to image                                                                                                             0.1s
 => => exporting layers                                                                                                            0.1s
 => => writing image sha256:0ccdf30b87fb8fd746ae7107ec3e957f6a2cb7dfe93889934bb9049b81372001                                       0.0s
 => => naming to docker.io/library/react-from-github                                                                               0.0s


## 이미지 확인
C:\docker> docker image ls
REPOSITORY          TAG       IMAGE ID       CREATED          SIZE
react-from-github   latest    0ccdf30b87fb   14 seconds ago   143MB
mysql-with-data     latest    b9085aba9d99   4 hours ago      455MB
mysql               5.7       0018a8d83892   7 days ago       455MB

 

컨테이너 실행

## 컨테이너 실행
C:\Users\myanj> docker container run -d --rm -p 80:80 react-from-github
d87fdf4276afa76464dfb4fad0d217c55ba1d55cccbc32945a923d3d25ad8616


## 컨테이너 확인
C:\Users\myanj> docker container ls
CONTAINER ID   IMAGE               COMMAND                  CREATED         STATUS         PORTS                NAMES
d87fdf4276af   react-from-github   "/docker-entrypoint.…"   4 seconds ago   Up 3 seconds   0.0.0.0:80->80/tcp   exciting_chebyshev

 

서비스 확인

http://localhost로 접속해 서비스 여부를 확인합니다.

도커 허브 등록

## 이미지 확인
C:\Users\myanj> docker image ls
REPOSITORY                  TAG       IMAGE ID       CREATED             SIZE
react-from-github           latest    0ccdf30b87fb   About an hour ago   143MB
mysql                       5.7       0018a8d83892   7 days ago          455MB


## 태그명 변경
C:\Users\myanj> docker image tag react-from-github myanjini/react-from-github:lab


## 이미지 확인
C:\Users\myanj> docker image ls
REPOSITORY                   TAG       IMAGE ID       CREATED             SIZE
react-from-github            latest    0ccdf30b87fb   About an hour ago   143MB
myanjini/react-from-github   lab       0ccdf30b87fb   About an hour ago   143MB
mysql                        5.7       0018a8d83892   7 days ago          455MB


## 이미지 등록
C:\Users\myanj> docker image push myanjini/react-from-github:lab
The push refers to repository [docker.io/myanjini/react-from-github]
87b48dc11e96: Pushed
d23e7c11762f: Pushed
ffea61a3661f: Pushed
101af4ba983b: Mounted from myanjini/board-react
d8466e142d87: Mounted from myanjini/board-react
83ba6d8ffb8c: Mounted from myanjini/board-react
e161c82b34d2: Mounted from myanjini/board-react
4dc5cd799a08: Mounted from myanjini/board-react
650abce4b096: Mounted from myanjini/board-react
lab: digest: sha256:7bb299a42e8575552361670959cdf037e5f7afd247ca60d9a2cc329cd46f9fa7 size: 2194