React) Docker로 배포된 React를 Clone 할 때 Setting 방법

인턴으로 진행 중인 프로젝트는 React 셋팅과 Docker로 배포되어 있었다.

초기셋팅이 진행된 프로젝트를 Clone 받은 후, Docker로 실행 될 수 있도록 환경설정을 한 순서와 방법을 적어보려고 한다.

만약에 개발을 진행하는 노트북에 아무런 개발환경이 구성되지 않았다면,

1-1 . Node 설치

$ sudo apt-get install -y nodejs

1-2. yarn 설치

$ yarn install --global yarn

• 패키지를 설치하고 난 후, 잘 설치가 되었는지 각 버전을 확인해준다.

• 개발환경이 어떤 패키지로 구성되어있는지 확인하여, 필요한 패키지를 설치해 주어야 한다!
• 초기셋팅이라면 어떤 패키지로 개발환경을 구성할지 생각한 후, 필요한 패키지를 설치!

2. docker-compose 설치

Docker도 당연히 설치 해야 된다는 점!

• Docker 와 Docker-Compose를 설치해야 한다

• Docker-Compose 설치 방법

$ sudo curl -L "https://github.com/docker/compose/releases/download/1.24.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

• 버전은 계속 달라질 수 있기 때문에, 최신버전을 확인한 후 다운 받는다.
  Docker-Compose 버전 확인

3. Docker Network Create

매우 중요한 단계!

Docker는 가상의 소프트웨어 컨테이너 안에 리눅스의 응용 프로그램들을 배치시켜준다.
그러므로 나의 local과 가상의 컨테이너와 network로 연결시켜 주어야 한다.

docker network create _NETWORK_NAME_

• 나와 같이 프로젝트를 클론받아 진행되는 거라면, 이미 Network 이름이 있을 것이다.

docker-compose.yaml 파일에 들어가면, networks의 하위 항목에 name이 있을 것이다.

4. Docker 환경 최신화

docker-compose build

npm install과 비슷한 역할을 해준다고 생각하면 된다.
local로 clone 받은 docker의 환경을 최신화 시켜준다.

5. Docker 실행

docker-compose up

Point

docker network 셋팅은 초기에 한번만 하면 되기 때문에 잊어버리기 쉽다.
개발 진행중에 노트북이 바뀐다거나, 포멧을 하는 등 환경셋팅을 다시 해줘야 될 경우가 있는데 network 셋팅 해주는 것을 꼭 기억하자!