# Docker를 써서 React 웹앱 개발하기

- Author: @smithsolution
- Published: 2025-03-16
- Updated: 2025-03-17
- Source: http://blex.me/@smithsolution/docker%EB%A5%BC-%EC%8D%A8%EC%84%9C-react-%EC%9B%B9%EC%95%B1-%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0
- Tags: 미분류

---

## 1️⃣ React 프로젝트 생성
이미지를 빌드하기 전에 기본 React프로젝트가 필요하다.
우선 node.js 18버전을 설치해준다.
```
# 기존에 있던 node.js(18버전 이하) 삭제
sudo apt-get remove -y nodejs npm

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
```
그리고 react프로젝트를 생성해준다.
```
cd ~/workspace
mkdir -p my-react-app
cd my-react-app
npx create-react-app .
```

<center>
![](https://static.blex.me/images/content/2025/3/17/20253171_27iI5EKLA6EYum7o3pyJ.png)
</center>
	
## 2️⃣ Dockerfile 작성
도커 파일을 만들고 편집으로 들어가 아래 내용을 추가한다.
```
# 1. Node.js 18 사용
FROM node:18

# 2. 작업 디렉터리 설정
WORKDIR /app

# 3. package.json 복사
COPY package*.json ./

# 4. 의존성 설치
RUN npm install

# 5. 소스 코드 복사
COPY . .

# 6. 개발 서버 실행
EXPOSE 3000
CMD ["npm", "start"]
```

<center>
	![](https://static.blex.me/images/content/2025/3/17/20253171_jdIvPdQlk1cVThghfAZZ.png)
	</center>

## 3️⃣ Docker 이미지 빌드
이제 react프로젝트를 도커 이미지로 빌드해보자.
```
docker build -t my-react-app .
```

<center>
	![](https://static.blex.me/images/content/2025/3/17/20253171_zwyv1bP3h77jLQmMxZMM.png)
</center>

- 이제 my-react-app 이라는 이름의 이미지가 만들어졌는지 확인해보자.
<center>
![](https://static.blex.me/images/content/2025/3/17/20253171_oVMEw9gYu762lZl2tN5E.png)
</center>

## 4️⃣ 컨테이너 실행
<center>
![](https://static.blex.me/images/content/2025/3/17/20253171_IN5vjcdzahpB2ACXUDgU.png)
</center>

- 웹브라우저에서도 url( http://localhost:3000 )을 통해 웹앱에서 값을 불러올 수 있는 것을 확인할 수 있습니다.

<center>
![](https://static.blex.me/images/content/2025/3/17/20253171_CCJ6VWSGGD0sy63XDWIa.png)
</center>

> 지금까지 Docker를 써서 React 웹앱을 개발해보았습니다! 다음 스테이지로 넘어가보겠습니다!