react docker build 및 AWS nginx 연결 방법

1. Dockerfile 파일에 기존에 node 버전 및 사용하고자하는 포트 확인해서 생성 및 적용합니다. 

 

Dockerfile

FROM node:22-alpine AS build

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm install

COPY . . 
RUN npm run build

FROM node:22-alpine

WORKDIR /app

COPY --from=build /app/build ./build

RUN npm install -g serve

EXPOSE 3000

CMD ["serve", "-s", "build", "-l", "3000"]

추가 설명)

node:22 ▶ 서비스 적용된 node 버전 (적용된 node 버전으로 변경)

3000 ▶ 서비스 적용된 포트 (적용된 포트로 변경)

두번째 COPY ▶ .dockerignore에 설정된 파일 기준으로 불필요하게 복사되는 것을 방지 

 

2. .dockerignore을 생성해서 node_modules를 추가합니다. 

추가 설명)

build 할 때마다 불필요한 메모리 사용량이 많아지기 때문에 기본적으로 node_modules를 추가합니다.

 

3. AWS에서 docker을 설치합니다. 

# 1. 업데이트
sudo yum update -y

# 2. Docker 설치 (Amazon Linux 2 기준)
sudo yum install -y docker

# 3. Docker 서비스 시작 & 부팅시 자동 시작
sudo systemctl start docker
sudo systemctl enable docker

# 4. ec2-user 권한 추가 (터미널 다시 로그인해야 적용됨)
sudo usermod -aG docker ec2-user

# Docker 권한 즉시 적용 (한번 새로 로그인해야 안전)
newgrp docker

# 5. Docker 동작 확인
docker version

4. Dockerfile이 있는 파일 위치에서 docker build를 진행합니다. 

docker build -t my-react-app .

5. Dockerfile에 설정된 포트 기반으로 docker를 실행합니다. 

docker run -d -p 3000:3000 my-react-app

6. docker가 설정된 포트 기반으로 제대로 실행되는 지 확인합니다.

docker ps

7. nginx에 설정된 포트를 연결하고 저장합니다. 

location / {
  proxy_pass http://127.0.0.1:3000;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
}

sudo nginx -t // nginx 테스트
sudo systemctl restart nginx // nginx 저장 및 재실행

 

프론트앤드 경로 endpoint를 다르게 설정한다면 

1. App.js에서 BrowserRouter에서 basename을 설정합니다. 

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Generic from "./pages/Generic";

export default function App() {
  return (
    <BrowserRouter basename="/react/shoppingmall">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/generic" element={<Generic />} />
      </Routes>
    </BrowserRouter>
  );
}

2. nginx에서 rewrite를 설정합니다. 

location /react/shoppingmall/ {
  rewrite ^/react/shoppingmall/(.*)$ /$1 break;
  proxy_pass http://127.0.0.1:3000; # 또는 정적 build 폴더
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
}