jenkins 部署vue到docker

王林
發布: 2023-05-17 22:39:07
原創
678 人瀏覽過

Jenkins是一款持续集成(CI)和持续交付(CD)工具,在软件开发流程中起着至关重要的作用。而Docker则是一种流行的容器化技术,能够方便地部署应用程序。

在本文中,我们将介绍如何使用Jenkins将Vue应用程序部署到Docker容器中。我们将一步一步地介绍此过程。

  1. 配置Jenkins

首先,您需要通过Jenkins界面安装一些必要的插件。 进入“Manage Jenkins”并选择“插件管理”,然后选择“可选插件”选项卡。 在这里安装以下插件:

  • Docker插件
  • NodeJS插件
  • HTML Publisher插件

安装后重启Jenkins。

  1. 创建Jenkins工作流程

接下来,我们将创建一个Jenkins工作流程来构建和部署Vue应用程序。按以下步骤操作:

  • 进入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和发布。在这里,我们首先使用“node”映像来执行构建步骤,并在该步骤中运行“npm install”和“npm run build”命令。该命令构建Vue应用程序并将其转换成静态HTML、CSS和JS文件。
    在Dockerize阶段,我们构建一个Docker映像,该映像使用上一步生成的静态文件。我们还使用“BUILD_ID”环境变量为映像标记版本。
  • 最后,在“publish”步骤中,我们将Docker映像推送到Docker Hub中。在此示例中,我们没有设置Docker凭据。 在生产环境中,您需要设置Docker凭据以连接到Docker托管服务。
  1. 配置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应用程序。现在,您可以从Web浏览器访问应用程序(它默认在80端口上)。这样,您通过Jenkins部署了Vue应用程序到Docker容器中。

结论

在本文中,我们介绍了如何将Vue应用程序部署到Docker容器中。使用Jenkins持续集成和部署工具,您可以轻松构建和部署Vue应用程序。 我们还介绍了如何使用Docker Compose将正在运行的容器托管在服务器上。 让我们开始使用Jenkins和Docker构建和部署Vue应用程序。

以上是jenkins 部署vue到docker的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!