Jenkins Front-End React Build

👀 Epilogue

---

• Jenkins로 React 빌드를 해보자 !

 

⚡ Leggo

---

▪ React Build

• 개발 모드로 프로그램 실행
  • $ npm start

 

• 실제 배포 시 빌드 명령어
  • $ npm run build
  • 배포 환경에서 사용할 파일들 압축 형태로 제공
  • index.html 최적화하여 배포

 

• 테스트용으로 serve라고 하는 간단한(한 번만 사용하는) 서버를 npm을 통해 설치하는 명령어

npm insatll -g serve
npx serve -s build // 한번만 실행

 

• 현재 개발 단계에서 [ Front-End → Back-End ] 요청 타겟팅 설정 파일 path check
  • Movie-project/back/src/main/movie-project/src/setProxy.ts

 

• webpack을 사용하지 않고 $ npm run build 빌드시 나오는 산출물
  • ./build 디렉토리 안에 있는 빌드 산출물 사용

+ ls -al build  
total 20  
drwxr-xr-x 3 node node 4096 Nov 23 14:26 .  
drwxr-xr-x 7 node node 4096 Nov 23 14:26 ..  
-rw-r--r-- 1 node node  218 Nov 23 14:26 asset-manifest.json  
-rw-r--r-- 1 node node  315 Nov 23 14:26 index.html  
drwxr-xr-x 3 node node 4096 Nov 23 14:26 static

 

• Build WorkFlow
  • Jenkins → build → 빌드 산출물 → + Nginx → Dockerfile
• Jenkins에서 빌드? ✅
  • 빌드시 Jenkins의 빌드 서버의 리소스 사용이 적합하다고 판단
• Dockerfile에서 빌드? ❌
  • 서버에서 도커 이미지를 통해 매번 굳이 빌드를 행해야 할 필요가 있을까?
  • 서버 리소스를 빌드시 사용하는 것이 낭비라고 판단

 

• Jenkinsfile

...

stage('React Build'){
            steps{
                dir('front'){
                    sh '''
                        npm install
                        npm run build
                    '''
                }
            }
            post{
                failure{
                    echo 'React build failure!'
                }
                success{
                    echo 'React build success!'
                }
            }
        }
           
...

 

 

ref.

---

[초보자] React 설치부터 배포까지의 과정을 정리 | DevelopersIO