前端自动化部署方案之 Shell脚本，告别重复性工作！
2023-11-13 04:48:06
前言
作为一名前端开发工程师，我们经常需要在本地开发完成后，将代码提交到远程仓库，然后手动部署到服务器上。这个过程虽然简单，但重复性高，容易出错，而且非常耗时。为了解决这个问题，我们可以使用 Shell 脚本实现前端自动部署，从而告别繁琐的重复操作，提高开发效率。
方案概述
我们的前端自动化部署方案基于 Git 仓库，当我们向 Git 仓库提交代码时，会触发部署流程。部署流程包括以下步骤：
- 拉取代码：从远程仓库拉取最新的代码到本地。
- 安装依赖：使用 npm 或 yarn 安装项目所需的依赖包。
- 构建项目：使用 webpack 或 rollup 等构建工具构建项目。
- 部署代码：将构建后的代码部署到服务器上。
实现步骤
1. 创建 Git 仓库
首先，我们需要创建一个 Git 仓库来存储我们的代码。我们可以使用以下命令创建一个新的 Git 仓库：
git init
2. 初始化项目
接下来，我们需要初始化我们的项目。我们可以使用以下命令初始化一个新的项目：
npm init -y
这将创建一个新的 package.json 文件，其中包含项目的基本信息。
3. 安装依赖
然后，我们需要安装项目所需的依赖包。我们可以使用以下命令安装依赖包：
npm install
这将安装 package.json 文件中指定的依赖包。
4. 构建项目
接下来，我们需要构建项目。我们可以使用以下命令构建项目：
npm run build
这将使用 webpack 或 rollup 等构建工具构建项目，并生成构建后的代码。
5. 部署代码
最后，我们需要将构建后的代码部署到服务器上。我们可以使用以下命令部署代码：
scp -r build/* user@server:/var/www/html/project
这将使用 scp 命令将 build 目录下的所有文件复制到服务器上的 /var/www/html/project 目录下。
6. 配置 Git 钩子
为了在提交代码时自动触发部署流程，我们需要配置 Git 钩子。我们可以使用以下命令配置 Git 钩子：
touch .git/hooks/post-commit
chmod +x .git/hooks/post-commit
这将创建一个新的 post-commit 钩子文件，并使其可执行。
7. 编写部署脚本
接下来，我们需要编写一个部署脚本。我们可以使用以下命令创建一个新的部署脚本：
touch deploy.sh
chmod +x deploy.sh
这将创建一个新的 deploy.sh 脚本文件，并使其可执行。
8. 在部署脚本中添加命令
最后，我们需要在部署脚本中添加命令来执行部署流程。我们可以使用以下命令在部署脚本中添加命令：
#!/bin/bash
# 拉取代码
git pull
# 安装依赖
npm install
# 构建项目
npm run build
# 部署代码
scp -r build/* user@server:/var/www/html/project
这将在部署脚本中添加命令来拉取代码、安装依赖、构建项目和部署代码。
9. 运行部署脚本
当我们向 Git 仓库提交代码时，post-commit 钩子将被触发，从而运行部署脚本。部署脚本将执行部署流程，将代码部署到服务器上。
总结
通过使用 Shell 脚本实现前端自动部署，我们可以告别繁琐的重复操作，提高开发效率。通过将代码提交到 Git 仓库触发部署流程，可以实现高效、快捷的代码发布，优化团队协作。这种自动化部署方案可以帮助我们专注于开发，减少重复性工作，从而提高整体开发效率。
