前端项目部署之pushstate-server
内部的原理是通过 connect
服务器,开启一个端口,将 dist/index.html
文件作为静态模板输出
这种方式可以将本地的项目打包成静态文件,以服务的方式提供出去, 方便后端人员调用, 而自己也不影响dev的开发
安装
npm install pushstate-server --save
基本使用:
1) 在你的vue 项目的根目录下 创建一个server.js文件,下面是其文件内容 var server = require('pushstate-server'); server.start({ port: 3000, // 指定的端口 directory: './dist' // 一般会使用打包的目录 }); console.log('服务器启动发了) 2) 打开终端运行命令 node server.js 这个时候就可以把3000的端口提供给同事了
参数说明:
-
port:需要启动的端口号。
-
directory:
index.html
所在的目录路径,这里直接写相对路径就好。
借用pm2完成进程的管理与代码的自动发布
关于pm2的安装与使用: 进程管理工具之PM2
在项目的根目录下新增pm2的配置文件,例如:pm2.config.js
module.exports = { apps: [ { name: 'h5', script: 'server.js' }, ], deploy: { production: { user: 'root', host: '47.99.134.126', ref: 'origin/master', repo: 'git@git.zhlh6.cn:Nick930826/h5.git', path: '/www/juejue-vite-h5', 'post-deploy': 'git reset --hard && git checkout master && git pull && npm i --production=false && npm run build:release && pm2 startOrReload ecosystem.config.js', // -production=false 下载全量包 env: { NODE_ENV: 'production' } } } }
参数说明:
-
apps:
script
为服务器通过pm2
要执行的脚本,name
为脚本在pm2
列表中的名称,这个名称要注意,避免后续其他项目重名,在服务器中你会无法区分是哪个项目。 -
deploy:
production
为部署正式环境的配置 -
production.user:默认 root 用户。
-
production.host:要部署的服务器
IP
地址。 -
production.ref:要部署的代码,在代码仓库中的哪个分之,如果是测试环境,那么这里应该就是
origin/develop
,这里我们默认是正式。 -
production.repo:代码存放的地址,这里是我的地址,你可以写你自己的代码仓库地址。
-
production.path:在服务器拉取远程仓库地址之后,存放在服务器中的地址
-
production.post-deploy:需要执行的一些指令,如
git reset
重制、git checkout master
切换分支、git pull
拉取最新代码、npm i
安装依赖、npm run build
打包构建、pm2 startOrReload ecosystem.config.js
pm2 执行项目。
这里有一点要注意的是,安装依赖的时候,设置
--production=false
的目的是将devDependencies
中的包也进行安装,否则我们无法进行vite
打包操作。
首次执行的时候,由于服务器中并没有 h5
这个项目,所以我们需要初始化一下项目
pm2 deploy ecosystem.config.js production setup
这一步只是初始化, 并没有进行真正的部署
此时服务器中已经存在 h5
项目,接下来就是自动化执行整个部署流程,执行指令:
pm2 deploy production
注意,代码一定要先提交,因为服务器需要拉取最新的代码,这里必须要保持本地 commit 是没有未提交的。
这个时候就可以看到项目已经在服务器上运行起来了, 可以访问端口验证一下