前端项目外网迁移到内网开发

概述#

有些特殊的场景要求前端项目在内网离线运行，而为了保证项目的正常运行又需要许多第三方库和依赖，本文记录一下解决这个问题的过程。

步骤说明#

首先需要一台能连上网的主机，在联网主机上安装好node环境和包管理软件（使用pnpm），并且需要将第三方库全部缓存，然后将联网主机的运行环境迁移至离线主机。

TIP
联网主机和离线主机的各软件版本要保证一致

实践环境如下

online-os=ubuntu-22.04
offline-os=openEuler-22.03
nvm=0.39.1
node=18.20.4
pnpm=9.12.2

联网主机操作#

安装nvm#

使用nvm来管理node是一个不错的选择

官方脚本安装#

# 采用curl或者wget命令
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# 如果没有curl，则需执行
sudo apt install curl

执行成功后，可以使用命令nvm ls测试一下，如果出现错误，选择手动安装

手动安装#

wget https://github.com/nvm-sh/nvm/archive/refs/tags/v0.39.1.zip
# 或
wget https://github.com/nvm-sh/nvm/archive/refs/tags/v0.39.1.tar.gz

下载完成后，使用对应的解压工具进行解压

tar -zxvf v0.39.1.tar.gz -C ~ && mv ~/nvm-0.39.1/ ~/.nvm/
# 或
unzip v0.39.1.zip -d ~ && mv ~/nvm-0.39.1/ ~/.nvm/

进入目录~/.nvm执行命令./nvm.sh激活nvm，使用nvm ls测试

为了保证重启后仍能识别nvm，还需要配置环境变量

sudo vim ~/.bashrc
# 加入以下内容
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

写入完成，使用source ~/.bashrc刷新配置

安装node#

安装好nvm后，有两种方式安装node，一种是使用nvm官方的nvm install version来安装，另一种是下载对应的node包手动安装，由于需要离线迁移，这里只讲第二种。

# 命令行下载包
wget https://github.com/nodejs/node/archive/refs/tags/v18.20.4.tar.gz
# 在nvm目录创建node目录，已有忽略
mkdir ~/.nvm/versions/node
# 解压到对应的nvm目录
tar -zxvf v18.20.4.tar.gz -C ~/.nvm/versions/node && cd ~/.nvm/versions/node
# 更改名称
mv node-18.20.4/ v18.20.4/

此时使用nvm ls就会出现18.20.4的node可选项，使用nvm use 18.20.4，就可以切换到对应node版本了。

安装pnpm#

安装好node和npm（npm自动随node安装）后，可以使用npm全局安装pnpm

# 全局安装pnpm
npm install -g pnpm@9.12.2
# 测试
pnpm -v

迁移pnpm#

pnpm安装完成后，为了保证完全迁移，在对项目执行pnpm install前还需要配置pnpm的相关缓存

# 创建一个目录来缓存pnpm
mkdir ~/pnpm-store
# 包元数据缓存的位置。
pnpm config set cache-dir "~/pnpm-store/cache"
# pnpm 创建的当前仅由更新检查器使用的 pnpm-state.json 文件的目录。
pnpm config set state-dir "~/pnpm-store/state"
# 指定储存全局依赖的目录。
pnpm config set global-dir "~/pnpm-store/global"

然后就可以去前端项目中执行pnpm install了

pnpm install执行

执行完成后需要将pnpm和其缓存分别打包

# pnpm打包
npm pack -g pnpm@9.12.2 --pack-destination .
# pnpm缓存打包，推荐使用zip，好像压缩后占用更小
cd ~
zip -q -r pnpm-store.zip pnpm-store/
# 或
tar -c -f pnpm-store/ pnpm-store.tar

到此在联网主机上的所有操作就完成了，接下来需要将项目代码和所有的包上传到离线主机

离线主机操作#

需要上传的压缩包，大概有以下几个

代码压缩包
v0.39.1.zip （nvm）
v18.20.4.tar.gz （node）
pnpm-9.12.2.tgz
pnpm-store.zip

离线安装nvm#

参照联网主机手动安装nvm

离线安装node#

参照联网主机安装node&npm

离线安装pnpm#

由于主机离线，使用npm全局安装pnpm时，要指定pnpm包的路径

# 激活node
nvm use 18.20.4
# 指定pnpm包安装
npm install -g pnpm-9.12.2.tgz

然后需要将pnpm的缓存解压到离线主机目录，并且指定

# 解压pnpm缓存
unzip pnpm-store.zip -d ~
# 在pnpm中指定
pnpm config set cache-dir "~/pnpm-store/cache"
pnpm config set state-dir "~/pnpm-store/state"
pnpm config set global-dir "~/pnpm-store/global"

最后就可以执行pnpm install命令了

TIP
执行pnpm install命令有可能会出错，这是由于pnpm总会去联网检查更新信息，我们可以使用pnpm install --frozen-lockfile命令来跳过联网。

最后项目就可以在离线的前端环境跑起来了，如果需要更新第三方依赖的话，只需要更新pnpm的缓存,再pnpm install就可以了。