🚀 Jenkins + React + Nginx 자동 배포 환경 구축 문서

 

📦 1. Docker 기반 Jenkins 설치

docker run -d \
  --name jenkins \
  -p 8080:8080 -p 50000:50000 \
  -v jenkins_home:/var/jenkins_home \
  jenkins/jenkins:latest

• Jenkins UI 접속: http://localhost:8080
• 초기 비밀번호 확인:

  docker exec -it jenkins cat /var/jenkins_home/secrets/initialAdminPassword

---

🖥 2. React 프로젝트 준비 (GitHub)

package.json 수정:

"scripts": {
  "build": "react-scripts build"
}

• React 18 버전 적용:

  npm install react@18 react-dom@18 react-scripts

---

🧱 3. Jenkins에서 Build Script 작성

Jenkins > 프로젝트 > 빌드 스텝

echo 🔧 Installing dependencies
npm install

echo 🏗 Building project
npm run build

echo 📁 Checking build output
ls -l ./build

echo 🚀 Deploying to remote server
sshpass -p 1 scp -P 2222 -r ./build root@192.168.45.230:/home/ubuntu/myapp

---

🛠 4. 배포 서버용 Ubuntu + SSH + Nginx 컨테이너 생성

✅ Dockerfile

FROM ubuntu:latest

RUN apt update && apt install -y openssh-server nginx && \
    mkdir -p /var/run/sshd /home/ubuntu/myapp/build && \
    echo 'root:1' | chpasswd && \
    sed -i 's/#\?PermitRootLogin .*/PermitRootLogin yes/' /etc/ssh/sshd_config && \
    sed -i 's/#\?PasswordAuthentication .*/PasswordAuthentication yes/' /etc/ssh/sshd_config

RUN rm /etc/nginx/sites-enabled/default && \
    echo 'server {\n\
      listen 80;\n\
      root /home/ubuntu/myapp/build;\n\
      index index.html;\n\
      location / {\n\
        try_files $uri /index.html;\n\
      }\n\
    }' > /etc/nginx/sites-enabled/react-app

EXPOSE 22 80

CMD service ssh start && nginx -g 'daemon off;'

🔧 빌드 및 실행

docker build -t my-ubuntu-ssh-nginx .
docker run -d -p 2222:22 -p 80:80 --name MyUbuntuServer my-ubuntu-ssh-nginx

---

🔓 5. SSH 호스트 키 충돌 해결 (Jenkins 내부)

docker exec -it jenkins bash
ssh-keygen -f "/var/jenkins_home/.ssh/known_hosts" -R "[192.168.45.230]:2222"
ssh -o StrictHostKeyChecking=no -p 2222 root@192.168.45.230 echo "OK"
exit

---

🧼 6. 퍼미션 설정 (React build 경로)

chown -R www-data:www-data /home/ubuntu/myapp/build
chmod -R 755 /home/ubuntu/myapp/build

chmod +x /home
chmod o+rx /home/ubuntu
chmod +x /home/ubuntu/myapp

→ 이후:

nginx -t && nginx -s reload

---

🌐 7. 브라우저에서 확인

http://192.168.45.230/

✅ React 앱이 정상적으로 표시되면 성공!

---

🎯 최종 구성 요약

항목내용

Jenkins	도커 기반 CI 서버
React	GitHub에 저장, 빌드 후 배포
SSH	포트 2222로 배포
Nginx	React 앱 정적 파일 서빙 (/home/ubuntu/myapp/build)
자동화	Jenkins + scp를 통한 자동 배포