CI／CD
Jenkins Front-End Dockerizing
uuuhhh
2022. 12. 15. 09:22
👀 Epilogue
- 앞선 Jenkins로 React 빌드를 진행하였다.
- 빌드 산출물을 배포하기 위해선 Docker Image로 패키징 해야 한다.
- Dockerfile을 작성하고 Jenkins로 Dockerizing을 진행해보자!
⚡ Leggo
▪ Nginx 설정 파일
- /conf/conf.d/default.conf에 Nginx 설정 파일 필요
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
▪ Multi Stage Build
- 예를 들어 빌드 환경 / 배포 환경을 나눠서 이미지 빌드
- 필요 없는 환경을 제거하고 최종적으로 필요한 환경만 남는다.
- 컨테이너 이미지 경량화 가능
FROM node:12.16.2 as builder
...
FROM nginx:latest
...
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
▪ React Application 배포
- nginx의 기본 설정을 삭제하고 Application 소스에서 설정한 파일을 복사
- 소스 코드에 /conf/conf.d 파일이 있어야 함
- Jenkins에서 생성한 Application의 빌드 산출물을 nginx의 기본 Sample Application이 사용하던 폴더로 이동
- Dockerfile
FROM nginx:latest
RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx
COPY build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
- Jenkinsfile
pipeline{
agent {
kubernetes{
yamlFile 'KubernetesPod.yaml'
}
}
...
stage('Docker Image Build'){
steps{
container('docker'){
dir('front'){
sh "docker build . -t ${dockerHubRegistry}:${currentBuild.number}"
sh "docker build . -t ${dockerHubRegistry}:latest"
}
}
}
post{
failure{
echo 'Docker image build failure!'
}
success{
echo 'Docker image build success!'
}
}
}
...
▪ 부록 🌻
- e.g.) --from=builder
- 앞에서 builder로 지정한 환경에서 파일을 가져와서 최종 이미지에 파일을 추가하는 의미
FROM node:12.16.2 as builder
...
FROM nginx:latest
...
COPY --from=builder /usr/src/app/build /usr/share/nginx/html