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

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

环境准备

1. 安装 Jenkins：根据所部署服务器的操作系统选择相应安装方式，安装 Jenkins 服务。
2. 安装 Node.js：本文以 Node.js 为 JavaScript 运行环境。

3. 安装 NPM：NPM 是 Node.js 的包管理工具，可以用它来引入项目依赖的第三方库。命令如下：

   shell
sudo apt-get update
sudo apt-get install npm

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

   shell
sudo apt-get install git

5. 安装所需的运行环境，如 Vue.js/React.js 框架和相关插件，安装命令如下：

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

配置 Jenkins

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

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

   在配置页面中填写 NodeJS 的名称、安装路径和版本号，点击“Save”保存配置信息。

2. 配置：点击“New item”创建一个新的 Jenkins 任务，在页面中填写部署任务的名称，选择“Freestyle project”任务类型。

3. 配置源码管理：在“Source Code Management”中选择 Git，并填写相应的 Git 仓库地址和分支信息。

4. 配置构建步骤：

   • 构建前清理环境：在“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}

5. 配置构建后操作：添加“Publish Over SSH”插件，配置服务器 IP 和 SSH 信息，将部署的目标路径填写至“Remote Directory”。

6. 保存修改，并执行测试任务，验证部署流程是否成功。

Vue.js 示例说明

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

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

   shell
vue init webpack-simple vue-project

2. 进入项目根目录，并运行应用，通过浏览器访问http://localhost:8080/即可查看到应用。

   shell
cd vue-project
npm i
npm run dev

3. 提交代码至 Git 仓库，在 Jenkins 中创建一个新的任务，填写 Git 仓库地址和分支信息，选择正确的 NodeJS 版本。

4. 在 Jenkins 中执行构建操作，若构建成功，则可以在 publish-over-ssh 插件页面中查看到上传文件的过程及结果。

React.js 示例说明

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

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

   shell
create-react-app react-project

2. 进入项目根目录，并运行应用，通过浏览器访问http://localhost:3000/即可查看到应用。

   shell
cd react-project
npm i
npm start

3. 提交代码至 Git 仓库，在 Jenkins 中创建一个新的任务，填写 Git 仓库地址和分支信息，选择正确的 NodeJS 版本。

4. 在 Jenkins 中执行构建操作，若构建成功，则可以在 publish-over-ssh 插件页面中查看到上传文件的过程及结果。

以上为部署 Vue.js/React.js 应用的攻略，如有任何疑问可进一步探讨。