[CI/CD적용기1] React앱을 Docker Image으로 생성 후 Docker hub에 업로드

목표:
- 어플리케이션을 빌드한 결과물을 Docker Image로 만든다.
- Docker Image를 내 Docker Hub repository에 올린다.
- 로컬 pc에서 Docker Hub에 올린 Image를 pull 받아서 실행한다. 

---

1. React 앱 생성 (create-react-app)

2. 빌드

npm build

3. Docker를 사용하기 위해 프로젝트 루트에 Dockerfile, nginx.conf 파일 생성

Dockerfile

# nginx 이미지를 사용합니다. 뒤에 tag가 없으면 latest 를 사용합니다.
FROM nginx

# root 에 app 폴더를 생성
RUN mkdir /app

# work dir 고정
WORKDIR /app

# work dir 에 build 폴더 생성 /app/build
RUN mkdir ./build

# host pc의 현재경로의 build 폴더를 workdir 의 build 폴더로 복사
ADD ./build ./build

# nginx 의 default.conf 를 삭제
RUN rm /etc/nginx/conf.d/default.conf

# host pc 의 nginx.conf 를 아래 경로에 복사
COPY ./nginx.conf /etc/nginx/conf.d

# 80 포트 오픈
EXPOSE 80

# container 실행 시 자동으로 실행할 command. nginx 시작함
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

server {
    listen 80;
    location / {
        root    /app/build;
        index   index.html;
        try_files $uri $uri/ /index.html;
    }
}

80 포트에 / 경로로 들어오면 /app/build 폴더에서 index.html 을 찾음

4. Docker Image로 빌드

# 이미지 이름 = 식별자 / 이름
sudo docker build --tag idaeun/daeun-portfolio-app .

주의!
Docker Hub에 이미지를 올리기 위해서는 이미지 이름에 식별자로 도커허브 ID를 추가해야한다! 
(예제에서는 'idaeun')

# 이미지 확인
docker images

번외 ) [error] credential

Dockerfile:1
--------------------
   1 | >>> FROM nginx
   2 |
   3 |     # root 에 app 폴더를 생성
--------------------
ERROR: failed to solve: nginx: error getting credentials - err: exit status 1, out: ``

[해결] Docker config 삭제 뒤 다시 로그인

cat ~/.docker/config.json
{
	"auths": {
		"https://index.docker.io/v1/": {}
	},
	"credsStore": "desktop",
	"currentContext": "desktop-linux"
}%

rm ~/.docker/config.json
docker login
docker build

5. Docker Hub에 내 Image push

sudo docker push idaeun/daeun-portfolio-app

Docker Hub에 올라간 모습

번외 ) [error] denied

denied: requested access to the resource is denied

[해결] Docker 로그인

docker login

6. Docker Container 실행

# -d = 백그라운드 모드
# -p 8300:80 = 포트 연결 (외부 노출 포트 : 내부 포트)
sudo docker run -d --name 컨테이너이름 -p 8300:80 이미지이름

7. 로컬 PC > localhost:8300에서 확인