发布部署应用程序作为项目开发的最后一公里,而对于大多数前端开发者来说,服务器和运维这一块恰好是一个技能短板。如果 Web 开发者可以独立完成应用(或网站)的部署上线而不依赖于后台研发或运维人员,这将是迈向全栈开发的一大步。

前端开发者用 Node.js 可以轻松地开发后台程序和服务,而将其部署到云计算厂商提供的云服务器上是最简单便捷的方式。

云服务器

最近购买了腾讯云的云服务器开始折腾,这里不再赘述云主机的选购过程。根据自己的需求选择云服务器的地域和配置购买成功后,会自动安装系统和初始化服务器环境(我选择的操作系统是 CentOS 7.2 64位),完成后进入控制台如下:

第一次需要设置(重置)密码,选中当前云主机的在菜单点击“重置密码”按钮后面板进行设置:

远程登录

云服务器可通过远程连接客户端(Windows 下推荐 Xshell,Mac 下推荐 iTerm2)进行登陆,然后通过控制台命令行操作方式控制云服务器。

以 Windows 下的 Xshell 为例,打开后第一次需要配置会话属性,协议选择为SSH,主机地址填写云主机的公网 IP,端口号填写22(默认)

配置成功后生成一条会话,如下

点击“连接”,进行登录,首先要输入用户名,默认为root

然后,对 SSH 用户进行身份认证,密码就是在腾讯云服务器设置的密码

点击“确定”认证成功之后进入云主机的控制台

先敲几个简单的 Linux 命令热热身

Mac 下可以使用 iTerm2 或系统终端通过命令行方式进行登录

1
ssh root@<公网IP>

Node.js 运行环境

安装 Node.js

CentOS 中使用 Yum 进行软件包的管理,可以使用yum命令安装 Node.js

1
2
3
4
# 安装 Node.js
yum install nodejs
# 查看 Node 版本
node -v

部署运行 Node.js 应用

写一个简单的index.js实现一个简单的 Node 页面,监听3000端口

1
2
3
4
5
6
7
8
9
10
11
const http = require('http');
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World\n');
});
server.listen(3000, () => {
console.log(`Server is running at port 3000`);
});

通过 FTP 工具将index.js上传至目录/home/app/hello-world(需自行创建相关目录),并在该目录下执行node index命令启动 Node.js 程序

此时可以在任意浏览器上输入http://<公网IP>:3000来访问:

Nginx 反向代理

Nginx 是一个高性能的 HTTP 和 反向代理服务器,其支持基于 IP、基于域名、基于端口的 3 种虚拟主机。当然它还有路由功能,将它配置一个反向代理集群时,它会把不同的 URL 请求交给相应的集群去处理。

反向代理(Reverse Proxy)方式是指代理服务器来接受 Internet 上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给 Internet 上请求连接的客户端,此时的代理服务器对外就表现为一个服务器。

在这里 Nginx 的使用只是作为一个端口的代理,不用修改 Node.js 的就可以实现。

安装 Nginx

1
2
3
4
# 安装 Nginx
yum install nginx
# 查看 Nginx 版本
yum -v

启动 Nginx

1
2
# 启动 Nginx
nginx

在浏览器访问http://<公网IP>可以打开 Nginx 服务器的 Web 欢迎页面

Nginx 代理转发到 Node 服务器

Nginx 一般不直接作为 Web 服务器使用,而是用来做反向代理。通过修改 Nginx 的配置文件来实现反向代码,首先通过nginx -t命令查看nginx.conf文件的位置(默认位置为/etc/nginx/nginx.conf)。

nginx.conf增加以下配置代码:

1
2
3
location /hello {
proxy_pass http://127.0.0.1:3000;
}

当请求路径为/hello时,Nginx 会将请求代码到服务器的3000端口(即刚才 Node 应用监听的端口)。

修改配置后需要重启 Nginx 才能生效

1
2
# 重启 Nginx
nginx -s reload

在浏览器访问http://<公网 IP>/hello,就能看到刚才 Node 页面的内容。

PM2 管理 Node.js 进程管理

PM2 (Process Manager)是可以用于生产环境的 Node.js 的进程管理器,并且它内置一个负载均衡器。它不仅可以保证服务不会中断一直在线,并且提供零秒 reload 功能,还有其他一系列进程管理、监控功能。

安装 PM2

1
2
3
4
# 全局安装 PM2
npm install pm2 -g
# 查看 PM2 版本
pm2 -v

使用 PM2

1
2
3
4
# 启动进程
pm2 start index.js
# 进程列表
pm2 list

启动hello-world项目下的index.js文件

查看所有的进程列表,这里有 2 个进程在运行

PM2 命令大全

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
# 1. 启动
pm2 start app.js
# 以 process-name 为 PM2 进程名称
pm2 start app.js --name process-name
# 根据 CPU 核数启动进程个数
pm2 start app.js -i 0
# 实时监控 app.js 的方式启动,当 app.js 文件有变动时,PM2 会自动reload
pm2 start app.js --watch
# 2. 查看进程
pm2 list
# 查看进程详细信息,0 为 PM2 进程 id
pm2 show 0
# 或者
pm2 info 0
# 3. 监控
pm2 monit
# 4. 停止
# 停止 PM2 列表中所有的进程
pm2 stop all
# 停止 PM2 列表中进程为 0 的进程
pm2 stop 0
# 5. 重载
# 重载 PM2 列表中所有的进程
pm2 reload all
# 重载 PM2 列表中进程为 0 的进程
pm2 reload 0
# 6. 重启
# 重启 PM2 列表中所有的进程
pm2 restart all
# 重启 PM2 列表中进程为 0 的进程
pm2 restart 0
# 7. 删除 PM2 进程
# 删除 PM2 列表中进程为 0 的进程
pm2 delete 0
# 删除 PM2 列表中所有的进程
pm2 delete all
# 8. 日志操作
# 显示所有进程日志
pm2 logs
# 清除所有日志
pm2 flush
# 重载所有日志
pm2 reloadLogs
# 9. 升级 PM2
# 安装最新的 PM2 版本
npm install pm2@lastest -g
# 升级 PM2
pm2 updatePM2
# 10. 更多命令参数请查看帮助
pm2 --help

更多

域名配置

通过 IP 地址访问是没有问题的,但 IP 地址无意义从而增加了记忆负担,此时可以通过配置域名来访问 Node.js 应用。

我的域名解析服务是放在 DNSPod上的,可以在域名解析添加一条 A 记录hello,记录值为云主机的<公网 IP>

当访问hello.yedanbo.com的时候解析到服务器的80端口,即可被 Nginx 监听。

nginx.conf里添加如下配置

1
2
3
4
5
6
7
server {
listen 80;
server_name hello.yedanbo.com;
location / {
proxy_pass http://127.0.0.1:3000;
}
}

在浏览器访问hello.yedanbo.com时,Nginx 会将请求代码到服务器的3000端口(即刚才 Node 应用监听的端口)。

FTP 上传代码

上传代码可以通过 FTP 客户端软件上传,如 FileZillaFlashFXP(仅 Windows) 等。

配置服务器地址填云主机<公网 IP>,连接类型选择SFTP over SSH,端口填写22,填写用户名(默认为root)和密码

连接成功后,可以选择本地的文件上传到服务器相关目录

Git 系统

除了通过 FTP 上传代码外,每次提交的代码推动到远程 Git 仓库(如 GitHub),可以在服务器端安装 Git,然后通过 Git 命令拉取最新的代码来实现服务器代码更新。

1
2
3
4
# 安装 Git
yum install git
# 查看 Git 版本
git -v