[Chapter 2] 도커로 리액트 실행하기

서희찬·2022년 1월 19일

도커 리액트

The Origin : React

목록 보기

2/17

도커를 사용하는 이유

어떤 프로그램을 다운 받는 과정을 간단하게 하기 위해서!

가지고 있는 서버,패키지 버전,운영체제 등등에 따라 설치하는 과정중 에러 발생,, 설치과정도 복잡하다..

radis를 설치하기 위해 wget이 필요..
하지만 ! 도커로 하면 따로 wget설치 필요x

-> 그렇기에 도커 사용하면 편하게 에러없이 설치 가능

도커란 무엇인가

도커란?

컨테이너를 사용하여 응용프로그램을 쉽게 만들고 배포 실행 할 수 있도록 설계한 도구, 컨테이너 기반의 오픈소스 가상화 플랫폼이며 생태계이다 !

컨테이너란 ?

일반 : 물건을 넣고~ 운송수단으로 쓸 수있다
서버 : 컨테이너 안에 다양한 프로그램, 실행환경을 컨테이너로 추상화 ! 프로그램을 손쉽게 이동 배포 관리 할 수 있게 해준다.
AWS,Azure,Google cloud 등 어디에서든 실행가능!

맥에서 도커 설치

https://www.docker.com/get-started 에 가서 설치하면 된다

도커를 사용할 때의 흐름 감잡기

항상 도커를 사용할 때는 !

도커 CLI에 커맨드를 입력

글면 도커 서버가 그 커맨드를 받아 그것에 따라 이미지 생성하든 컨테이너 실행하든 모든 작업을 한다 !

실제 커맨드 입력

1. docker run hello-world
1. 도커 클라이언트에 커맨드 입려가면 도커서버로 요청보낸다
2. 서버에서 hello-world라는 이미지가 이미 로컬에 cache되어 있는지 확인
3. 현재는 없기에 Unable~ 문구 표시
4. Docker Hub라는 이미지가 저장되어 있는 곳에 가서 그 이미지 가져오고 로컬에 Cache로 보관
5. 이제 이미지가 있으니 그 이미지 이용해서 컨테이너 생성
6. 이미지 생성 컨테이너는 이미지에서 받은 설정이나 조건에 따라 프로그램 실행
그렇기에 이제 바로 뜬당

도커 이미지로 도커 컨테이너 만들기

기억해야할 것 !

이미지는 응용 프로그램을 실행하는데 필요한 모든 것을 포함하고 있다 !
예를 들어.. 카카오톡을 실행한다고 하면 이미지에
1. 시작시 실행할 명령어 : run kakaotalk
2. 파일 스냅숏 : 카카오톡 파일
과 같은 것이 있다.

이미지로 컨테이너 만드는 순서

Dcoker 클라이언트에 docker run {image} 입력

도커 이미지에 있는 파일 스냅샷을 컨테이너 하드 디스크에 옮겨줌

이미지에서 가지고 있는 명령어를 이용해서 실행

최종적으로는 이런 모습이다.

도커 이미지 생성하는 순서

도커허브에 이미지를 가져올수 있고 생성한걸 올릴수있다.

컨테이너는 도커이미지로 생성한다..
그렇다면 도커이미지는 어떻게 생성할까?

도커 이미지 생성 순서

도커 파일 작성 :도커이미지를 만들기 위한 설정 파일, 컨테이너가 어떻게 행동해야하할지에 대한 설정을 의미한다.

도커 클라이언트 : 도커 파일에 입력딘 명령들이 도커 클라이어트에 전달되어야함

도커 서버 : 도커 클라이언트에 전달된 모든 작업을 하는 곳

이미지 생성

도커 파일 만들기

도커파일이란?

도커 이미지를 만들기 위한 설정 파일, 컨테이너가 어떻게 행동해야할지 대한 설정 정의

도커 파일 만드는 순서

베이스 이미지 명시(파일 스냅샷에 해당)

추가적으로 필요한 파일 다운을 위한 몇 가지 명령어 명시(파일 스냅샷)

컨테이너 시작 시 실행될 명령어 명시

베이스 이미지

이렇다 !

도커로 hello 문구 출력하기

folder 생성(ex..dockerfile-folder)

VSC에서 folder 열기

파일 이름 dockerfile 생성

아래 코드 작성
#베이스 이미지 명시
FROM baseImage 
#FROM :이미지 생성 시 기반이 되는 이미지 레이어
#<이미지 이름>:<태그> 형식 작성, 태그 없으면 최신 다운

#추가적으로 필요한 파일들을 다운 
RUN command 
#RUN : 도커 이미지가 생성되기 전에 수행할 쉘 명령어 

#컨테이너 시작 시 실행 될 명령어 명시 
CMD ["executable"]
#CMD : 컨테이너가 시작되었을 때 실행할 실핼 파일 또는 쉘 스크립트
#도커파일 내 1회만 사용 가능 
5.베이스 이미지로부터 실제 값으로 추가하기
6.alpine 베이스 이미지 사용
7. hello 출력전echo사용,이미 alphine 안에 echo 사용 가능케하는 파일 있기에 RUN생략
8.
FROM alpine
CMD ["echo","hello"]
이러면 도커 파일 만들기는 완성~

도커 파일로 도커 이미지 만들기

도커 파일에 입력된 것들이 도커 클라이언트에 전달되어서 도커 서버가 인식하게 하여야 한다.
그렇게 하기 위해 docker build./ or docker build.를 해야한다

build 명령어는

해당 디렉토리 내에서 dockerfile이라는 파일을 찾아 도커 클라이언트에 전달

docker build 뒤에 ./, .는 둘다 현재 디렉토리 가리킴
입력하면 이런식으로 뜬당

STEP1

alphine 이미지 가져옴 a24bb~ 는 이미지 아이디

STEP2

임시 컨테이너를 생성 한 후 그 컨테이너에 사용할 명령어 포함시키기
그런 후 방금 생성한 임시 컨테이너 지우고 새로운 이미지 생성

결론

베이스 이미지에서 다른 종속성이나 새로운 커맨트 추가시 임시컨테이너를 만들고 그 컨테이너를 토대로 새로운 이미지 생성
그리고 임시컨테이넌느 빠이루~

이렇다 !

실행
 docker run f59.. #3개만 입력해주면된다 !
hello가 뜬다 !

리액트를 위한 도커 파일 작성하기

도커어플을 실행할려면..

리액트를 위한 도커 파일

alpine은 사이즈가 5메가 밖에 안되서 node를 쓴다
FROM node:16-alpine

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install 

COPY ./ ./ 

CMD ["npm","run","start"]
코드를 작성해준 후
moudule을 삭제하고..
docker build ./ 
을 하여 와르륵 설치해야한다
설치가 끝나면
docker run a5b8b...
을 통해서 리엑트 서버를 열어주면 !

안된다..!
이는 다음에 보자 !