Question

站点应用想要部署外网，需要提前准备资源和流程，大体可以分为以下几个步骤：

• 云服务器：可以理解为在云端上的一台电脑，把服务挂载到对应的端口下，即可通过云服务器公网 IP + 端口的方式进行访问。
• 域名：可以理解成是云服务器公网 IP 的一个代号，因为 IP 地址不方便记忆，所以采用注册域名并把服务器 IP 解析到对应域名下进行访问，通常域名和站点的内容也有一定的联系，相当于是品牌标识的一个体现，一个好的域名可以成为内容和文化的良好助力，给用户留下不错的印象。
• 域名 ICP 备案：ICP 证是指各地通信管理部门核发的《中华人民共和国电信与信息服务业务经营许可证》。没有备案通过这个是不可以上线的，ICP 备案成功后，若域名有网站或落地页，则需要在网站底部悬挂工信部下发的 ICP 备案号，并生成链接指向工信部网站。如果未在网站底部添加 ICP 备案号，被相关部门核查出来将处以五千元以上一万元以下罚款，或注销备案号等处罚。
• 公安备案：根据《计算机信息网络国际联网安全保护管理办法》规定，网站在工信部备案成功后，需在网站开通之日起 30 日内登录 全国互联网安全管理服务平台 提交公安联网备案申请。公安联网备案审核通过后，需要复制网站公安机关备案号和备案编号 HTML 代码，下载备案编号图标，并编辑网页源代码将公安联网备案信息放置在网页底部。
• 域名解析：把域名指向我们服务器公网 IP 的过程，经过这个步骤，就可以通过域名访问到我们的服务器了。
• 服务部署：在完成上面步骤后，需要把服务部署到云服务器的对应端口，并解析到域名上，然后用户就可以通过访问注册的域名访问服务了。

服务部署

对于服务部署，推荐使用 pm2 来进行部署，当然直接使用 node 然后执行 npm run start 效果上也是可以的。

pm2 具备日志，重启等一套完整能力，可以更容易定位一些问题，所以是部署 node 服务的主流工具，现在在本地以现在的项目示范一下。

首先打开终端，安装一下 pm2。

npm install pm2 -g

安装完成后在终端输入 pm2 试试。

然后分别切到 client 和 server 的目录下执行一下 npm run build，这个是为了构建线上环境启动所需要的产物。

安装完尝试重新构建一下，并且在对应目录下执行 npm run start，如果没有异常，就可以尝试使用 pm2 来启动服务了。

server:

client:

在这之前，先简单介绍一下原理，pm2 可以通过执行 pm2 start ${脚本文件} --name ${服务名} 的方式启动，不过要注意，因为执行路径的不同，所以这里使用 npm 的绝对路径执行确保没有问题。

首先执行下面的命令看一下 npm 的目录位置。

which npm

然后切到对应项目目录下，创建一个 shell 脚本，然后写入 ${npm 目录} run start 即可。

vi server.sh

类似这样，然后在对应 shell 脚本根目录分别执行 pm2 start server.sh，为了区分还可以给它们加上 --name 名称的参数，执行完以后，再执行 pm2 list，如果看到服务 online，就可以了。

这时候直接访问 http://127.0.0.1:3000，也是可以打开官网的。

如果想要服务器开机的时候自启动，只需要执行下面的命令，保存当前服务并且生成自启动脚本即可。

pm2 save
pm2 startup

至于关闭和重启服务，使用 stop 和 restart 即可，类似下面的例子。

值得一提的是，启动的过程可能并不是一帆风顺的，可能会有一些报错，那这时候服务的 status 就会显示 errored，这时候可以通过输出日志的方式来排查，以 server (client) 的服务举例。

pm2 log server --lines 50

日志默认输出是 15 行，这个一般是不够的，可能错误栈都不足够显示完成，这边加上行数的参数，调整为 50 行。

就可以看到和平时开发一样的终端结果了，这时候如果有一些报错可以通过错误栈的信息来快速定位，并且 pm2 提供了持续监听的能力，类似平时开发中的热更新，只需要在 start 命令后加上 --watch 的参数就可以启动，这样当代码发生变化的时候，部署也会同步自动更新。

不过这时候访问还是使用 3000 端口，这样显得奇怪，比如用户在访问百度的时候不可能访问 www.baidu.com:3000 吧。

首先安装一下 nginx，同样可以通过 nginx -v 的方式来判断是否安装成功。

brew install nginx

然后需要修改一下对应的配置。

vi /usr/local/etc/nginx/nginx.conf

改这两个部分就好，listen 是监听的端口号，proxy_pass 是希望转发的目标服务，这样就会将 80 端口的服务都转发到 3000 端口上，用户就可以直接通过域名进行访问了。

修改完成后，执行一下 nginx，没有报错的话就已经启动了。

尝试一下直接访问 http://127.0.0.1/ ，可以看到已经可以了，到这里服务部署的部分就全部完成了。