pm2与serve的单页应用食用指南

坑

用pm2做进程管理，用serve做静态文件服务器，配置如下：

// pm2.config.js

module.exports = {
    apps: [
        // ...
        {
            name: 'music-app',
            script: 'serve',
            args: '-p 8080 -s build',
        }
    ]
}

问题如下：

• 直接访问端口可访问，点击链接可访问
• 刷新页面或直接输入url，404
• 命令行使用serve直接开启服务无以上问题

关于问题详情大力戳这里

查找问题

执行pm2 show music-app，结果如下：

➜  hehehe git:(master) ✗ pm2 show music-app      
 Describing process with id 1 - name music-app 
┌───────────────────┬──────────────────────────────────────────────────┐
│ status            │ online                                           │
│ name              │ music-app                                        │
│ restarts          │ 69                                               │
│ uptime            │ 3s                                               │
│ script path       │ /usr/local/lib/node_modules/pm2/lib/API/Serve.js │
│ script args       │ -p 8080 -s build                                 │
│ error log path    │ /Users/xixi/.pm2/logs/music-app-error-1.log   │
│ out log path      │ /Users/xixi/.pm2/logs/music-app-out-1.log     │
│ pid path          │ /Users/xixi/.pm2/pids/music-app-1.pid         │
│ interpreter       │ node                                             │
│ interpreter args  │ N/A                                              │
│ script id         │ 1                                                │
│ exec cwd          │ /Users/xixi/work/hehehe                       │
│ exec mode         │ fork_mode                                        │
│ node.js version   │ 8.6.0                                            │
│ watch & reload    │ ✘                                                │
│ unstable restarts │ 0                                                │
│ created at        │ 2017-10-11T10:07:33.119Z                         │
└───────────────────┴──────────────────────────────────────────────────┘

emmmm，注意script path，显然执行的不是我们要的serve啊。
摔！

为什么会这样

原因在这里：戳我！
pm2从2.4.0版本后可以直接开启一个静态文件服务器了，听起来很美，但是！！！
它开启静态服务器的指令也叫serve,所以我们并没有能够用想要的nodejsserve包开启服务器，而是使用了pm2内置的功能。
由于内置的静态文件服务功能并没有针对单页应用做优化，因此会出现上述问题。

两个解决方案

• 直接指定nodejsserve包可执行文件的路径：

// pm2.config.js

const path = require('path')

module.exports = {
    apps: [
        // ...
        {
            name: 'music-app',
            script: path.resolve(__dirname, './node_modules/serve/bin/serve.js'),
            args: '-p 8080 -s build',
        }
    ]
}

• 给全局的nodejsserve包取一个别名，比如修改.bashrc。

然后执行pm2 show music-app，结果如下：

➜  hehehe git:(master) ✗ pm2 show music-app                                  
 Describing process with id 1 - name music-app 
┌───────────────────┬────────────────────────────────────────────────────────────┐
│ status            │ online                                                     │
│ name              │ music-app                                                  │
│ restarts          │ 0                                                          │
│ uptime            │ 8s                                                         │
│ script path       │ /Users/xixi/work/hehehe/node_modules/serve/bin/serve.js │
│ script args       │ build/ -s -p 3030                                          │
│ error log path    │ /Users/xixi/.pm2/logs/music-app-error-1.log             │
│ out log path      │ /Users/xixi/.pm2/logs/music-app-out-1.log               │
│ pid path          │ /Users/xixi/.pm2/pids/music-app-1.pid                   │
│ interpreter       │ node                                                       │
│ interpreter args  │ N/A                                                        │
│ script id         │ 1                                                          │
│ exec cwd          │ /Users/xixi/work/hehehe                                 │
│ exec mode         │ fork_mode                                                  │
│ node.js version   │ 8.6.0                                                      │
│ watch & reload    │ ✘                                                          │
│ unstable restarts │ 0                                                          │
│ created at        │ 2017-10-11T10:11:23.846Z                                   │
└───────────────────┴────────────────────────────────────────────────────────────┘

可以看到script path已经是我们想要的路径，问题解决。