聊聊jenkins部署vue/react项目的问题

下面我将为你详细讲解如何在Jenkins上进行Vue/React项目的部署，具体攻略如下：

环境准备

安装 Jenkins：根据所部署服务器的操作系统选择相应安装方式，安装 Jenkins 服务。
安装 Node.js：本文以 Node.js 为 JavaScript 运行环境。
安装 NPM：NPM 是 Node.js 的包管理工具，可以用它来引入项目依赖的第三方库。命令如下：

shell sudo apt-get update sudo apt-get install npm
安装 Git：Git 是最常用的版本控制工具，让多人在一个团队中协同编程变得更简单。可以通过以下命令安装：

shell sudo apt-get install git
安装所需的运行环境，如 Vue.js/React.js 框架和相关插件，安装命令如下：

shell npm install -g vue-cli npm install -g react-create-app

在 Jenkins 配置页面添加一个新的 NodeJS 安装，然后配置部署任务。根据不同的应用环境需要对部署任务进行不同的配置，以下为该操作的详细步骤。

配置 Node.js 环境：在 Jenkins 的“Manage Jenkins”页面点击“Global Tool Configuration”，然后添加一个新的 NodeJS 安装。

在配置页面中填写 NodeJS 的名称、安装路径和版本号，点击“Save”保存配置信息。
配置：点击“New item”创建一个新的 Jenkins 任务，在页面中填写部署任务的名称，选择“Freestyle project”任务类型。
配置源码管理：在“Source Code Management”中选择 Git，并填写相应的 Git 仓库地址和分支信息。
配置构建步骤：
- 构建前清理环境：在“Build”下选择“Add build step”，选择“Execute shell”，在执行命令的区域中输入：
  
  shell rm -rf dist node_modules
- 安装依赖：在“Build”下添加“npm install”命令，安装项目的依赖库。
  
  shell npm install
- 构建应用：在“Build”下添加“npm run build”命令，构建应用。
  
  shell npm run build
- 部署应用：在“Build”下添加“deploy”命令，将构建好的应用部署到服务器上。
  
  shell cp -rf dist ${Dest_Path}
配置构建后操作：添加“Publish Over SSH”插件，配置服务器 IP 和 SSH 信息，将部署的目标路径填写至“Remote Directory”。
保存修改，并执行测试任务，验证部署流程是否成功。

Vue.js 示例说明中，我们将使用 Jenkins 和 Nginx 部署一个简单的 Vue.js 应用。

在命令行中使用 vue-cli 创建一个新的 Vue.js 项目：

shell vue init webpack-simple vue-project
进入项目根目录，并运行应用，通过浏览器访问http://localhost:8080/即可查看到应用。

shell cd vue-project npm i npm run dev
提交代码至 Git 仓库，在 Jenkins 中创建一个新的任务，填写 Git 仓库地址和分支信息，选择正确的 NodeJS 版本。
在 Jenkins 中执行构建操作，若构建成功，则可以在 publish-over-ssh 插件页面中查看到上传文件的过程及结果。

React.js 示例说明中，我们将使用 Jenkins 和 Nginx 部署一个简单的 React.js 应用。

在命令行中使用 create-react-app 创建一个新的 React.js 项目：

shell create-react-app react-project
进入项目根目录，并运行应用，通过浏览器访问http://localhost:3000/即可查看到应用。

shell cd react-project npm i npm start
提交代码至 Git 仓库，在 Jenkins 中创建一个新的任务，填写 Git 仓库地址和分支信息，选择正确的 NodeJS 版本。
在 Jenkins 中执行构建操作，若构建成功，则可以在 publish-over-ssh 插件页面中查看到上传文件的过程及结果。