'azuer' 태그의 글 목록

azuer

azuer 정적 웹사이트 젠킨스 배포설정 방법(프론트,vue) jenkins 2022.12.30

azuer 정적 웹사이트 젠킨스 배포설정 방법(프론트,vue) jenkins

coinf 2022. 12. 30. 11:21

2022. 12. 30. 11:21

구글에서 검색할경우 제대로 젠킨스까지 연결해서 올려주는 글들이 없어서 내가 노가다로 얻어낸 경험을 공유하고자한다.

jenkins 정적 웹사이트 자동화 배포 글입니당!

글이 이해안갈경우는 댓글 부탁드려용~ㅋㄷㅋㄷ

정적 웹사이트 (클라이언트로만 구성되어있는 사이트) -> 예: Vue로만 만들어진 사이트 인 경우

스토리지 계정이 필요하다(스토리지 어카운트) 앞서서 작성한 게시물참고

https://asdf1326.tistory.com/9

스토리지 계정이 있다는 과정하에 글을 작성하겠다.

젠킨스에 배포하기전에 애저에서 미리 세팅을 진행해주어야한다.

스토리지 계정 진입 후 기능 클릭 정적 웹사이트 클릭

인덱스 html 과 오류 문서 경로를 기입

화면에서 나와서

컨테이너 웹 클릭

공식사이트에서 확인 하고싶은경우 아래 링크로 들어가세요

https://learn.microsoft.com/ko-kr/azure/storage/blobs/storage-blob-static-website-how-to?tabs=azure-portal

위내용처럼 업로드

에러 html 은 생각해보니깐 프론트 소스에서 이미 따로 처리하고있음 index.html 로 다 처리할거기떄문에 에러페이지는 따로 업로드 x

스토리지 계정 재클릭후 생성된 url 학인후 들어가서 제대로 동작하는지 확인 한다.

vue 정적 파일 업로드에 필요한 젠킨스 파일생성

def DOCKER_IMAGE_NAME
def DOCKER_IMAGE_VERSION
def PROD_BUILD = false
pipeline {
    agent {
        node {
            label 'master'
        }
    }

    parameters {
        gitParameter branch: '', branchFilter: '.*', defaultValue: 'origin/master', description: '', listSize: '0', name: 'TAG', quickFilterEnabled: false, selectedValue: 'DEFAULT', sortMode: 'DESCENDING_SMART', tagFilter: '*', type: 'PT_BRANCH_TAG'
        booleanParam defaultValue: false, description: '', name: 'RELEASE'
    }

    environment {
        GIT_URL = "깃url"
        CREDENTIAL_ID = "깃아이디"
        ARTIFACTS = "dist/**"
    }

    options {
        disableConcurrentBuilds()
        buildDiscarder(logRotator(numToKeepStr: "30", artifactNumToKeepStr: "30"))
        timeout(time: 120, unit: 'MINUTES')
    }

    stages {
        stage('Install dependencies') {
            steps {
                sh "npm install"
            }
        }

        stage('Build application (test mode)') {
            steps {
                sh "npm run build:dev"
            }
        }

        stage('Deploy application (→ dev)') {
            steps {
                sh "sshpass -p 개발서버비번 scp -r dist 개발서버아이디:hitable2020-frontend-manager"
            }
        }

        stage('Build application (production)') {
            when {
                expression { params.RELEASE == true }
            }
            steps {
                sh "npm run build:production"
            }
        }

        stage('Deploy application (→ azure)') {
            when {
                expression { params.RELEASE == true }
            }
            steps {
                sh "az storage blob upload-batch -s ./dist/ -d '\$web' --account-name 스토리지이름 --account-key 어카운트키 공간"
            }
        }
    }
}

위에 어카운트 키 부분은 애저사이트 진입 후 액세스 키 누르면 어카운트 키 나옴 예시)