프론트 배포를 해보자

docker로 vue 올리기

1.
docker에 nodejs 설치
docker pull node:{version} docker pull node:16.13
JavaScript
복사
2.
Dockerfile, .dockerignore
FROM node:20.10.0 as build-stage #폴더 위치 RUN mkdir -p /app WORKDIR /app ADD . . #yarn 설치 RUN yarn install RUN yarn run build # production stage FROM nginx:stable-alpine as production-stage COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf COPY --from=build-stage /app/dist /usr/share/nginx/html EXPOSE 5173 CMD ["nginx", "-g", "daemon off;"]
JavaScript
복사
node_modules/
JavaScript
복사
3.
jenkins pipeline 설정 (일단 프론트만)
pipeline { agent any environment { imageName = "loverduck97/pasila-frontend" registryCredential = 'dockerhub' dockerImage = '' releaseServerAccount = 'ubuntu' releaseServerUri = 'i10a402.p.ssafy.io' releasePort = '5173' } stages { stage('Git Clone') { steps { git branch : 'dev/FE', credentialsId: 'pasila-gitlab', url: "https://lab.ssafy.com/s10-webmobile1-sub2/S10P12A402" } } // stage('Node Build') { // steps { // dir ('frontend') { // sh 'yarn install' // sh 'yarn run build' // } // } // } stage('FE Docker build') { steps{ dir("frontend"){ script{ docker.withRegistry('', registryCredential) { sh """ cat ./Dockerfile docker build -t $imageName:0.0.$BUILD_NUMBER . docker build -t $imageName:latest . """ } } } } } stage('FE Docker push') { steps{ dir("frontend"){ script{ docker.withRegistry('', registryCredential) { sh """ cat ./Dockerfile docker push $imageName:0.0.$BUILD_NUMBER docker push $imageName:latest """ } } } } } stage('FE Service Stop') { steps { sshagent(credentials: ['ubuntu-a402']) { sh ''' if test "`ssh -o StrictHostKeyChecking=no $releaseServerAccount@$releaseServerUri "sudo docker ps -aq --filter name=pasila-frontend"`"; then ssh -o StrictHostKeyChecking=no $releaseServerAccount@$releaseServerUri "sudo docker stop pasila-frontend" ssh -o StrictHostKeyChecking=no $releaseServerAccount@$releaseServerUri "sudo docker rm -f pasila-frontend" ssh -o StrictHostKeyChecking=no $releaseServerAccount@$releaseServerUri "sudo docker rmi $imageName:latest" fi ''' } } } stage('Image Pull') { steps { sshagent(credentials: ['ubuntu-a402']) { sh "ssh -o StrictHostKeyChecking=no $releaseServerAccount@$releaseServerUri 'sudo docker pull $imageName:latest'" } } } stage('Service Start') { steps { sshagent(credentials: ['ubuntu-a402']) { sh ''' ssh -o StrictHostKeyChecking=no $releaseServerAccount@$releaseServerUri "ls -a" ssh -o StrictHostKeyChecking=no $releaseServerAccount@$releaseServerUri "sudo docker run -d -i --env-file env/.env -e TZ=Asia/Seoul --name pasila-frontend -p $releasePort:80 $imageName:latest" ''' } } } } }
JavaScript
복사
def FE_CHANGED = false def BE_CHANGED = false pipeline{ agent any tools {nodejs "nodejs"} environment{ DOCKERHUB_CREDENTIAL = credentials('DOCKER_HUB_ID') } stages { stage('Checkout'){ steps { git branch: 'dev', credentialsId: 'GitLabToken', url: 'https://lab.ssafy.com/s10-webmobile2-sub2/S10P12A209.git' script{ def feChanges = false def beChanges = false def changedFiles = sh( script : "git diff --name-only HEAD HEAD~1", returnStdout : true ).trim().split("\n") for(def file : changedFiles) { if(file.startsWith("FE/")){ feChanges = true } if (file.startsWith("BE/")){ beChanges = true } } env.FE_CHANGED = feChanges env.BE_CHANGED = beChanges } sh "echo $env.FE_CHANGED" sh "echo $env.BE_CHANGED" } } stage("Compile"){ when { expression { return env.BE_CHANGED == "true"} } steps{ dir("./BE"){ sh "chmod +x gradlew" sh "./gradlew build" } } } stage("BE Docker build"){ when { expression { return env.BE_CHANGED == "true" } } steps{ dir("./BE"){ sh "docker build -t junyupk/backend ." } } } stage("BE Docker push"){ when { expression { return env.BE_CHANGED == "true" } } steps { dir("./BE"){ sh "docker login -u ${DOCKERHUB_CREDENTIAL_USR} -p ${DOCKERHUB_CREDENTIAL_PSW}" sh "docker push junyupk/backend" } } } stage("BE Docker pull"){ when { expression { return env.BE_CHANGED == "true" } } steps{ script { sh "docker pull junyupk/backend" } } } stage('Node Build') { when { expression { return env.FE_CHANGED == "true" } } steps { dir ('./FE') { sh 'npm install' sh 'npm run build' } } } stage("FE Docker build"){ when { expression { return env.FE_CHANGED == "true"} } steps{ dir("./FE"){ sh """ cat ./Dockerfile docker build -t junyupk/frontend . """ } } } stage("FE Docker push"){ when { expression { return env.FE_CHANGED == "true"} } steps{ dir("./FE"){ sh """ docker login -u ${DOCKERHUB_CREDENTIAL_USR} -p ${DOCKERHUB_CREDENTIAL_PSW} docker push junyupk/frontend """ } } } stage("FE Docker pull"){ when { expression { return env.FE_CHANGED == "true" } } steps{ sh """ docker pull junyupk/frontend """ } } stage("Container Down & Up"){ steps{ dir("./docker-compose"){ sh """ docker-compose down docker-compose up -d """ } } } } }
JavaScript
복사