前端项目部署之pushstate-server

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 是没有未提交的。

这个时候就可以看到项目已经在服务器上运行起来了, 可以访问端口验证一下