在项目环境中高效利用 Shell 脚本进行前端自动化部署

前端

2023-12-19 01:08:50

前言

在项目开发过程中，前端部署是必不可少的一环，包括打包、迁移、部署和回退等操作。手动处理这些操作不仅容易出错，还会浪费大量时间。因此，利用 Shell 脚本实现自动化部署是一种非常有效的解决方案。

实现方案

下面将介绍如何使用 Shell 脚本实现前端自动化部署。

1. 前提条件

在开始之前，确保已经满足以下条件：

已安装 Node.js 和 npm。
已安装 Git。
已配置好 SSH 密钥，以便免密码登录服务器。
已在服务器上安装好 Web 服务器，如 Nginx 或 Apache。

2. 创建 Shell 脚本

接下来，创建用于自动化部署的 Shell 脚本。可以使用以下命令创建一个名为 deploy.sh 的脚本文件：

touch deploy.sh

然后，使用文本编辑器打开此文件，并输入以下内容：

#!/bin/bash

# 1. 打包项目
npm run build

# 2. 迁移代码到服务器
rsync -avz --exclude node_modules ./dist/ user@example.com:/var/www/html

# 3. 部署代码
ssh user@example.com "cd /var/www/html && pm2 reload pm2.config.js"

# 4. 回退部署
ssh user@example.com "cd /var/www/html && git reset --hard HEAD^"

3. 配置 Shell 脚本

在 deploy.sh 脚本中，需要对以下内容进行配置：

user@example.com：替换为服务器的用户名和 IP 地址或域名。
/var/www/html：替换为项目部署的目录。
pm2.config.js：替换为项目中 pm2 的配置文件。

4. 运行 Shell 脚本

配置完成后，就可以运行 deploy.sh 脚本来部署项目。在终端中输入以下命令：

sh deploy.sh

如果出现错误，请检查脚本中的配置是否正确。

5. 自动化部署

为了实现自动化部署，可以将 deploy.sh 脚本添加到 Git 仓库中，并在每次代码提交后自动运行它。具体方法是：

在 Git 仓库的根目录下创建一个 .gitlab-ci.yml 文件。
在 .gitlab-ci.yml 文件中添加以下内容：

image: node:16

stages:
  - deploy

deploy:
  stage: deploy
  script:
    - npm install
    - npm run build
    - rsync -avz --exclude node_modules ./dist/ user@example.com:/var/www/html
    - ssh user@example.com "cd /var/www/html && pm2 reload pm2.config.js"