挥别加班，拥抱高效：我的SPA项目打包=>部署实践

2024-01-26 15:59:27

谈一谈我在SPA项目打包=>部署的处理

在上篇《【vue-cli3升级】老项目提速50%（二）》文中，评论区好几个人对文中task任务以及shell打包推送远程仓库表示感兴趣，希望我多些内容... 结合实际场景罗列两个吧... 为了随时发布前端项目，不用等到晚上加班发布... 上篇文章评论区有人问到 rsync …

今天这篇文章就来详细谈谈我在SPA项目打包=>部署的处理。

一、NPM脚本打包

在开发SPA项目时，我们通常需要使用NPM脚本进行打包。NPM脚本是一种用于自动化构建、测试和发布项目任务的工具。我们可以通过在package.json文件中定义NPM脚本来实现打包功能。

以下是一个简单的NPM脚本打包示例：

{
  "scripts": {
    "build": "webpack --mode=production"
  }
}

这个脚本将使用webpack在生产模式下打包项目。我们可以通过运行npm run build命令来执行此脚本。

二、Shell脚本部署

打包完成后，我们需要将打包好的项目部署到服务器上。我们可以使用Shell脚本来实现部署功能。Shell脚本是一种用于在命令行中执行一系列命令的脚本语言。我们可以通过编写Shell脚本来自动完成部署任务。

以下是一个简单的Shell脚本部署示例：

#!/bin/bash

# 1. 进入项目根目录
cd /path/to/project

# 2. 拉取最新代码
git pull

# 3. 安装依赖
npm install

# 4. 构建项目
npm run build

# 5. 将构建后的项目复制到服务器
scp -r build/* user@host:/path/to/deploy

# 6. 重启服务器
ssh user@host "pm2 restart pm2-app-name"

这个脚本将自动拉取最新代码、安装依赖、构建项目、将构建后的项目复制到服务器并重启服务器。

三、CI/CD实现自动化部署

为了实现自动打包和部署，我们可以使用CI/CD工具。CI/CD工具可以帮助我们自动执行打包、部署等任务。

以下是一些常见的CI/CD工具：