概览
以 Spug
的前端 spug_web
作为例子来说下前端项目的配置,最终大概是这样子的。
以下基于 spug v2.3.4 版本,如果低于 v2.3.4 可以参考 版本升级文档 进行升级,例子仅作为演示,一般情况下你都需要结合自己的项目情况调整配置。
安装 node(npm)
如果已安装可跳过该步骤,这里以目前的最新版 v12.18.1
为例,如果你使用 Docker 部署的 Spug
,可参考以下步骤进行安装。
# 进入容器
docker exec -it spug bash
curl -o node-v12.18.1-linux-x64.tar.xz https://nodejs.org/dist/v12.18.1/node-v12.18.1-linux-x64.tar.xz
tar xf node-v12.18.1-linux-x64.tar.xz -C /opt
echo 'export PATH=$PATH:/opt/node-v12.18.1-linux-x64/bin' > /etc/profile.d/node.sh
# 安装yarn,推荐使用yarn来代替npm
source /root/.bashrc
npm install -g yarn
# 退出并重启容器
exit
docker restart spug
文件过滤
前端项目发布的时候只需要编译后的内容就可以,这里选择了 包含
条件,内容为 spug_web/build
,这样最终发布到目标主机上的代码仅包含
spug_web/build
,并不会把 spug_api
及 spug_web
中的前端源代码发布出去。
自定义变量
该例子中并不需要特殊的全局变量,如果你需要的话可以在这里定义,然后在下边的钩子中类似 $SPUG_DEPLOY_ID
那样去引用。
代码检出前
作为前端项目免不了要处理项目依赖包的问题,依赖安装一般在 package.json
所在的目录(在本示例中即spug_web
)中执行 npm install
或 yarn
来安装。这里使用了 全局环境变量 中的
SPUG_REPOS_DIR
和 SPUG_DEPLOY_ID
来切换到源码目录创建公共的 node_modules
目录,以后每次发布时都通过软链接的形式使用它来避免每次
发布都需要全量安装依赖包。
# 创建公共node_modules目录
mkdir -p $SPUG_REPOS_DIR/$SPUG_DEPLOY_ID/node_modules
代码检出后
在这里进行项目的依赖包安装和编译工作,该钩子中当前目录即为按发布申请中选择 Git 分支/版本
检出后的代码目录,我们需要先把上一步创建的公共 node_modules
目录链接到当前目录(这样可以避免每次都完整的执行npm install
来重复安装依赖包),然后执行 yarn build
来进行项目编译。
# 创建软链接,指向公共的node_modules,避免每次发布重复安装依赖包
cd spug_web
ln -s $SPUG_REPOS_DIR/$SPUG_DEPLOY_ID/node_modules .
# 执行依赖安装
yarn
# 执行 编译
yarn build
编译后也就生成了我们在 文件过滤 中设置的 spug_web/build
目录。
应用发布前
由于我们设置的文件过滤规则 spug_web/build
,所以传输到目标主机上文件结构也是 spug_web/build/xx
,我们需要调整下目录结构,
让 spug_web/build
目录下内容放到项目的根目录中。
# 调整目录结构,把编译结果放在项目根目录
mv spug_web/build/* .
rm -rf spug_web
应用发布后
前端项目编译后就是纯静态的 html
、js
和一些静态文件,这里一般就不需要额外的处理了。
更多资讯、视频、欢迎关注公众号“Spug社区”