jenkins 部署vue到docker-前端问答-PHP中文网

jenkins 部署vue到docker

王林

发布： 2023-05-17 22:39:07

原创

602人浏览过

jenkins是一款持续集成（ci）和持续交付（cd）工具，在软件开发流程中起着至关重要的作用。而docker则是一种流行的容器化技术，能够方便地部署应用程序。

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

配置Jenkins

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

Docker插件
NodeJS插件
HTML Publisher插件

安装后重启Jenkins。

创建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托管服务。

配置Docker

在将Vue应用程序部署到Docker容器之前，您需要先在服务器上安装Docker和docker-compose。按以下步骤操作：

jQuery回到顶部插件GoUp

jQuery回到顶部插件GoUp是一款简单的jQuery插件，让你的网页用户直接回到顶部。

510

查看详情

下载和安装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中文网其它相关文章！