젠킨스는 vue를 도커에 배포합니다.

Jenkins는 소프트웨어 개발 프로세스에서 중요한 역할을 하는 CI(지속적 통합) 및 CD(지속적 전달) 도구입니다. Docker는 애플리케이션을 쉽게 배포할 수 있는 인기 있는 컨테이너화 기술입니다.

이 글에서는 Jenkins를 사용하여 Vue 애플리케이션을 Docker 컨테이너에 배포하는 방법을 설명합니다. 이 과정을 단계별로 다루겠습니다.

1. Jenkins 구성

먼저 Jenkins 인터페이스를 통해 필요한 플러그인을 설치해야 합니다. "Jenkins 관리"로 이동하여 "플러그인 관리"를 선택한 다음 "옵션 플러그인" 탭을 선택하세요. 여기에 다음 플러그인을 설치하세요.

• Docker Plugin
• NodeJS Plugin
• HTML Publisher Plugin

설치 후 Jenkins를 다시 시작하세요.

2. Jenkins 워크플로 만들기

다음으로 Vue 애플리케이션을 빌드하고 배포하기 위한 Jenkins 워크플로를 만듭니다. 아래 단계를 따르세요.

• Jenkins 홈페이지로 이동하여 "새 작업"을 선택하세요.
• 작업 이름을 입력하고 "파이프라인" 유형을 선택하세요.
• "고급 프로젝트 옵션" 섹션에서 "Groovy DSL 사용" 구문을 선택하고 "DSL 스크립트" 필드에 다음 코드를 입력합니다.

def app

pipeline {
  agent {
    docker {
      image 'node'
    }
  }
  stages {
    stage('Build') {
      steps {
        sh 'npm install'
        sh 'npm run build'
      }
    }
    stage('Dockerize') {
      steps {
        sh 'docker build -t my-vue-app .'
        script {
          app = docker.build("my-vue-app:${env.BUILD_ID}")
        }
      }
    }
    stage('Publish') {
      steps {
        script {
          app.push()
        }
      }
    }
  }
  post {
    always {
      htmlpublisher target : [
        allowMissing : false,
        alwaysLinkToLastBuild : true,
        keepAll : true,
        reportDir : 'dist',
        reportFiles : 'index.html',
        reportName : 'HTML Report'
      ]
    }
  }
}

• 이 Jenkins 스크립트에는 빌드, Dockerize 및 Dockerize의 세 가지 워크플로 단계가 포함되어 있습니다. 풀어 주다 . 여기서는 먼저 "node" 이미지를 사용하여 빌드 단계를 수행하고 해당 단계에서 "npm install" 및 "npm run build" 명령을 실행합니다. 이 명령은 Vue 애플리케이션을 빌드하고 이를 정적 HTML, CSS 및 JS 파일로 변환합니다.
  Dockerize 단계에서는 이전 단계에서 생성된 정적 파일을 사용하는 Docker 이미지를 빌드합니다. 또한 "BUILD_ID" 환경 변수를 사용하여 이미지에 버전 레이블을 지정합니다.
• 마지막으로 "게시" 단계에서는 Docker 이미지를 Docker Hub에 푸시합니다. 이 예에서는 Docker 자격 증명을 설정하지 않았습니다. 프로덕션 환경에서는 Docker 호스팅 서비스에 연결하려면 Docker 자격 증명을 설정해야 합니다.

3. Docker 구성

Vue 애플리케이션을 Docker 컨테이너에 배포하기 전에 서버에 Docker 및 docker-compose를 설치해야 합니다. 다음 단계를 따르세요.

• Docker를 다운로드하고 설치하세요.
• docker-compose를 다운로드하여 설치하세요.

Docker 및 docker-compose를 설치한 후 이제 Jenkins에 방금 구축한 Docker 이미지를 시스템에 배포해야 합니다. 다음 docker-compose 파일을 사용하여 위의 Jenkins 작업에서 Docker Hub로 푸시된 이미지를 사용하는 서비스를 정의할 수 있습니다.

version: '3'
services:
  web:
    image: my-vue-app
    ports:
      - "80:80"
    restart: always

이 파일을 docker-compose.yml로 저장하고 서버에 업로드하세요. Docker Compose를 사용하여 서비스를 시작합니다.

docker-compose up -d

이렇게 하면 Vue 애플리케이션 배포가 시작됩니다. 이제 웹 브라우저에서 애플리케이션에 액세스할 수 있습니다(기본적으로 포트 80에 있음). 이러한 방식으로 Jenkins를 통해 Vue 애플리케이션을 Docker 컨테이너에 배포했습니다.

결론

이 기사에서는 Vue 애플리케이션을 Docker 컨테이너에 배포하는 방법을 다루었습니다. Jenkins 지속적 통합 및 배포 도구를 사용하면 Vue 애플리케이션을 쉽게 구축하고 배포할 수 있습니다. 또한 Docker Compose를 사용하여 서버에서 실행 중인 컨테이너를 호스팅하는 방법도 다루었습니다. Jenkins와 Docker를 사용하여 Vue 애플리케이션 구축 및 배포를 시작해 보겠습니다.

위 내용은 젠킨스는 vue를 도커에 배포합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!