一份来自全干程序员的vscode一键打包线上部署教学

640 阅读5分钟

一、背景

  1. 由于公司当前技术栈的主流技术要求最低使用 Node.js 18+ 以上的版本,而我们的测试系统运行在 CentOS 7 上。Node.js 18+ 版本不再对 CentOS 7 提供支持,这导致我们在更新前端 Web 服务资源时,无法在服务器上使用依赖于 Node.js 环境的更新脚本。

  2. 项目维护不方便,经常需要本地打包,上传,解压,删除,还需要借助shell工具来完成,每次更新到测试环境的时候总是要等待个一分钟左右,实在是太久了。

  3. 无需使用其它软件来操作更新,直接使用vscode操作上传,更新的同时,还不影响继续写代码。

二、基本说明

使用vscode一键打包上传,通过 PuTTYPowerShell 脚本自动将更新部署到测试环境。

1. PuTTY安装

putty 安装链接

根据自己电脑的配置选择相对应的安装包即可,但是要注意,安装的时候要选择 “Put install directory on the PATH for command prompts

image-20240909163309818

只有选择了 “Put install directory on the PATH for command prompts”,安装的时候才会安装上 PuTTYPuTTYgen 后面需要 PuTTYgen 生成密钥。

2. 安装 7-zip

7-zip安装链接

直接安装即可。

3. 环境变量配置

1,在此电脑中打开属性。

image-20240909164734631

2,找到高级系统设置。

image-20240909164918486

3,点击环境变量。

image-20240909165337311

4,双击打开之后可以看到这个界面,然后根据自己 PuTTY7-zip 安装的目录进行添加即可。

image-20240909165454848

三、密钥

1. 生成密钥

win + R 快速打开cmd,通过命令 ssh-keygen -t rsa 可以生成密钥。

2. 生成的位置

C:\Users\你的用户名.ssh\id_rsa.pub

:如果在 Windows 系统中,可以在资源管理器的地址栏中输入 %USERPROFILE%.ssh 来访问对应目录(假设你的系统开启了显示隐藏文件和文件夹的选项,因为 .ssh 目录通常是隐藏的)

3. 设置密钥

把这个公钥添加到服务器 ~/.ssh/authorized_keys 文件中,可以使用shell来进行操作

1,没有 ~/.ssh/authorized_keys 这个目录文件的情况下执行以下操作,反之则跳过。

mkdir ~/.ssh
touch ~/.ssh/authorized_keys
  • mkdir ~/.ssh 作用是在当前用户的主目录下创建一个名为 .ssh 的目录。这个目录通常用于存放 SSH(Secure Shell)相关的文件,比如私钥、公钥等,以实现安全的远程连接和访问。
  • touch命令用于创建一个新的空文件。
  • 这条命令在刚刚创建的 .ssh 目录下创建一个名为 authorized_keys 的文件。这个文件通常用于存储可以通过 SSH 无密码登录的公钥列表。当一个客户端的公钥被添加到这个文件中后,拥有对应私钥的客户端就可以无需输入密码直接通过 SSH 连接到该服务器。

4. 添加公钥

把公钥添加到 authorized_keys

echo "公钥" >> ~/.ssh/authorized_keys
  • 这里的公钥就是你生成的 id_rsa.pub 文件,复制里面的密钥即可。

5. 测试

ssh nodejs@主机

四、配置 PuTTY

  • 使用 PuTTYgenid_rsa 私钥转换成 .ppk
  • 加载私钥:点击 Load 按钮,选择你的 id_rsa 私钥(你可能需要将文件类型从 .ppk 改为“所有文件”)
  • 保存私钥:加载成功后,点击Save private key 按钮,将其保存为 .ppk 格式

image-20240909174535637

image-20240909174737206

生成这个apk之后,双击即可运行,这样使用到 PuTTY的时候就不用密码了。

  • 注:虽然说这样子是挺方便的了,但是我们每次重新开机的时候,都需要双击点击运行。如果需要自启动的话,可以看下第八点的自启动配置

五、自动更新脚本

  • 在根目录下建一个 test.update.ps1 文件,代码如下:
####### ↓ 通用配置 ↓ #######
$requiredVersion = "v20.8.0"             # Node.js 版本
$buildCommand = "pnpm build:stage"     # 打包命令
$fileName = "v3-admin"            # 文件名 vue.config outputDir 和 服务器中的文件名需保持一致
$filePath = "/data/nodeapps/apps/"        # 服务器存放路径
$fullHost = ""         # 用户@主机
$localization = "versions.json"           # 本地版本号
####### ↑ 通用配置 ↑ #######


# 当前时间
$currentTime = Get-Date -Format "yyyy-M-d H:mm:ss" # 当前时间


# 修改名为 versions 的属性值,每次累加一个版本
$jsonContent = Get-Content $localization | ConvertFrom-Json
$jsonContent.versions = [int]$jsonContent.versions + 1
$jsonContent.time = $currentTime
$jsonContent | ConvertTo-Json | Set-Content $localization


# 创建一个 json 文件写入到打包结果中,版本号设置为当前时间
function createVersions {
 New-Item -Path "./$fileName" -Name "versions.json" -ItemType "file" -Force
 $versions = $jsonContent.versions
 Set-Content -Path "./$fileName/versions.json" -Value "{`"time`":`"$currentTime`",`"version`": $versions}"
}

# 打包前或更新完成后打包结果和压缩包
function empty {
  if (Test-Path "./$fileName") { Remove-Item -Path "./$fileName" -Recurse }
  if (Test-Path "./$fileName.zip") { Remove-Item -Path "./$fileName.zip" }
}
function operatingCommand {
  param (
    [string]$Hint, # 提示语
    [string]$Command # 需要执行的命令
  )
  Write-Host "$hint" -ForegroundColor DarkCyan
  Write-Output y | plink.exe -ssh "$fullHost" "$Command"
}
$nodeVersion = node -v
if ($nodeVersion -ne $requiredVersion) {
  Write-Host "警告: 当前的 Node.js 版本是 $nodeVersion, 该项目 Node.js 使用的版本是 $requiredVersion" -ForegroundColor DarkYellow
  exit 1
}
if (-not(Test-Path "./node_modules")) {
  Write-Host "警告: node_modules 没有安装" -ForegroundColor DarkYellow
  exit 1
}
empty
Write-Host "开始构建↓" -NoNewline -ForegroundColor DarkCyan
Invoke-Expression -Command "$buildCommand"
Write-Host "压缩..." -ForegroundColor DarkCyan
if (-not (Test-Path "./$fileName/index.html")) {
  Write-Host "$fileName/index.html 不存在, 请检查构建是否成功 command exit" -ForegroundColor Red
  exit 1
}
createVersions
7z.exe a -tzip "./$fileName.zip" -spf "./$fileName/*"
operatingCommand -Hint "删除 $fileName.zip" -Command "rm -rf $filePath$fileName.zip"
Write-Host "上传文件..." -ForegroundColor DarkCyan
$fullHostPath = $fullHost + ":" + "$filePath"
pscp.exe "$fileName.zip" "$fullHostPath"
operatingCommand -Hint "删除 $fileName" -Command "rm -rf $filePath$fileName"
operatingCommand -Hint "解压文件..." -Command "unzip $filePath$fileName.zip -d $filePath"
empty
Write-Host "更新完成" -ForegroundColor DarkCyan

六、手动更新脚本

  • 帮助你快速打包,压缩文件,并把源文件删除,只需安装 7-zip 即可,无需其它配置

  • ####### ↓ 通用配置 ↓ #######
    $requiredVersion = "v18.18.1"        # Node.js 版本
    $buildCommand = "pnpm run build"     # 打包命令
    $fileName = "beauty-front-web"       # 文件名 vue.config outputDir 和 服务器中的文件名需保持一致
    ####### ↑ 通用配置 ↑ #######
    
    
    # 创建一个 json 文件写入到打包结果中,版本号设置为当前时间
    function createVersions {
      New-Item -Path "./$fileName" -Name "_v.json" -ItemType "file" -Force
      $currentTime = Get-Date -Format "yyyy-M-d H:mm:ss"
      Set-Content -Path "./$fileName/_v.json" -Value "{`"v`":`"$currentTime`"}"
    }
    # 打包前或更新完成后打包结果和压缩包
    function empty {
      if (Test-Path "./$fileName") { Remove-Item -Path "./$fileName" -Recurse }
      if (Test-Path "./$fileName.zip") { Remove-Item -Path "./$fileName.zip" }
    }
    
    
    $nodeVersion = node -v
    if ($nodeVersion -ne $requiredVersion) {
      Write-Host "警告: 当前的 Node.js 版本是 $nodeVersion, 该项目 Node.js 使用的版本是 $requiredVersion" -ForegroundColor DarkYellow
      exit 1
    }
    if (-not(Test-Path "./node_modules")) {
      Write-Host "警告: node_modules 没有安装" -ForegroundColor DarkYellow
      exit 1
    }
    empty
    Write-Host "开始构建↓" -NoNewline -ForegroundColor DarkCyan
    Invoke-Expression -Command "$buildCommand"
    Write-Host "压缩..." -ForegroundColor DarkCyan
    if (-not (Test-Path "./$fileName/index.html")) {
      Write-Host "$fileName/index.html 不存在, 请检查构建是否成功 command exit" -ForegroundColor Red
      exit 1
    }
    createVersions
    7z.exe a -tzip "./$fileName.zip" -spf "./$fileName/*"
    Remove-Item -Path "./$fileName" -Recurse
    Write-Host "打包完成, $fileName.zip 已生成在项目根目录." -ForegroundColor DarkCyan
    

七、vscode配置

  • vscode需要配置 UTF-8 with BOM 编码,不然可能会出现乱码情况。

image-20240910093116763

八、运行脚本

  • 然后只需要 .\test.update.ps1 执行这个命令即可。

九、自启动配置

PuTTY.Pageant 启动电脑自动加载密钥

  1. 创建一个 pageant.exe 快捷方式
  2. win + R 输入 shell:startuppageant.exe 快捷方式 放到这个文件夹里
  3. 右键属性 快捷方式 --> 目标 C:\xxx\pageant.exe 后面 空格 加上你要加载的 .ppk 密钥系统目录(C:\Users\xxx.ssh\xxx.ppk),最后点击应用
  4. 多个密钥后面使用空格分开 如 “C:\xxx.exe C:\a.ppk C:\b.ppk
  5. 退出 pageant,在 shell:startup 目录 pageant.exe 快捷方式 双击启动即可(电脑开机会自动启动)
  6. 之后使用 pscp.exeplink.exe 就不用输入密码了

结语

看一篇肯定是记不下来的,还不赶紧收藏!以备不时之需,遇到问题可在评论区留言解惑哦!👍