Docker -리액트 설치 및 환경설정

3. 리액트 설치 및 환경설정 

프론트는 리액트로 구성 할 것이기 때문에 해당 도커환경에 리액트를 다운 받는다. 

 

#yarn 다운
npm install -g yarn

#react 설치
yarn create react-app frontend

 

 

다음과 같이 뜬다면 설치 완료 된 것이다. 그럼 다음 코드를 실행하여 개발 서버를 열어보도록 하자 

yarn start

 

명령어 실행 후 브라우저가 자동으로 열리며, http://localhost:3000에 기본 React 페이지가 표시된다.

 

이 화면이 보인다면 성공 했다.

 

3-1. 리액트의 구조

react 프로젝트의 주요 구조는 다음과 같다. 

frontend/
├── public/          # 정적 파일 디렉토리 (HTML, 이미지 등)
├── src/             # 주요 소스 코드 디렉토리
│   ├── App.js       # 메인 컴포넌트
│   ├── index.js     # React 앱의 진입점
│   └── App.css      # 메인 컴포넌트 스타일
├── node_modules/    # 의존성 라이브러리 (자동 생성)
├── package.json     # 프로젝트 설정 파일
└── yarn.lock        # 의존성 버전 관리 파일

 

• public/index.html: React가 주입되는 HTML 파일.
• src/App.js: 메인 컴포넌트 파일로 UI를 구성하는 시작점.

3-2. Docker 환경 설정 

react 프로젝트를 Docker 에서 실행하기 위해 Dockerfile 을 작성 한다. 

 

3-2-1. Dockerfile 작성 

 

먼저 dockerfile 을 생성한다. 

notepad Dockerfile

 

 

다음과같이 파일을 생성한 후  하단의 내용을 기재한다. 

# Node.js 기반 이미지를 사용
FROM node:16

# 컨테이너 내부 작업 디렉토리 설정
WORKDIR /app

# package.json 파일을 컨테이너에 복사
COPY package.json ./

# 의존성 설치
RUN yarn install

# 모든 소스 파일을 컨테이너에 복사
COPY . ./

# React 애플리케이션 실행
CMD ["yarn", "start"]

 

추가적으로 .dockerignore 으로 이미지 빌드할때 불필요한 파일들을 설정해 둘 수 있다. 

node_modules
build
.git
Dockerfile
.dockerignore

 

 

3-2-2. Docker 이미지 빌드

 

Dockerfile 이 작성된 디렉토리에서 해당 명령어를 사용한다. 

docker build -t 프로젝트 빌드명 .

 

 

• -t 프로젝트 빌드명: 이미지를 프로젝트 빌드명 으로 태깅합니다.
• .: 현재 디렉토리를 기준으로 이미지를 빌드합니다.

 

빌드가 완료 되면 컨테이너를 실행시켜보도록 하자

docker run -p 3000:3000 빌드한 이름

 

아까전 localhost에 접속해보면 정상적으로 접속이 되는걸 확인할 수 있다.