【教程】Node.js+Apache 部署网页全过程（非常详细！）

文章目录

背景
0. 前置假设
1. 更新系统和安装必要软件
2. 打包并上传项目到服务器
- 2.1 识别需要上传的文件
- 2.2 文件归档和压缩
- 2.3 压缩文件上传到服务器
- 2.4 解压文件
3. 配置Node.js应用
- 3.1 启动 PM2
- 3.2 确认 PM2 进程
4. 配置Apache反向代理
5. 启用必要的Apache模块
6. 检查 Apache 和 Node.js 的监听地址
- 6.1 Apache 配置检查
- 6.2 Node.js 监听地址
- 6.3 使用 netstat 检查端口
7. 更新防火墙规则（如果需要）
8. 启用站点配置并重启Apache
9. 验证部署
- 9.1 直接通过 IP 地址访问
- 9.2 debug
- - 9.2.1 查看日志
  - 9.2.2 测试 Node.js 服务器
10 DNS 设置
- 10.1 DNS指向设置
- 10.2 Apache 虚拟主机重定向
- - 10.2.1 配置文件的修改
  - 10.2.2 启用站点配置并重启 Apache
- 10.3 验证访问

背景

笔者在 Windows 使用 Node 的本地服务器（http://localhost:${PORT}）进行网页开发并测试完成后，想要将其部署到 vps 上。
要解决的问题有：
- vps 上的常规端口，80/443 端口已经被其他网页占用，必须通过非常规窗口访问我们的网站
- 网站部署中 Apache 的配置，Node 服务器的管理
- 笔者的二级域名已经设置指向该服务器的常规端口 80/443，如何使用三级域名直接访问新部署的网页而不需要输入端口号
补充（域名分级结构）：

根域名（.）：

这是最顶层的域名，通常不显示。

顶级域名（TLD）：

例如 cn.（中国的顶级域名）。它是域名系统中最顶层的部分。

一级域名（一级）：

cn. 可以视为顶级域名，同时也是一级域名。

二级域名（如 xxx.cn.）：

这部分通常是由用户注册的域名，例如 example.cn。

三级域名（如 xxx.xxx.cn.）：

进一步细分的域名结构，例如 sub.example.cn。

接下来开始网站的部署！

0. 前置假设

假设：

网站要使用端口 11111
Node.js 服务器使用端口 9000
要使用的域名为 xxx.xx.x

1. 更新系统和安装必要软件

确保你的系统是最新的，并安装pm2来管理你的Node.js应用：

sudo apt update
sudo apt upgrade -y
sudo npm install -g pm2

2. 打包并上传项目到服务器

2.1 识别需要上传的文件

将项目从本地机器上传到服务器的相应目录，我的项目结构为（使用缩进表示结构层次）：

/frontendindex.htmlregister.htmlscript.jsstyle.css/backendpackage-lock.jsonpackage.jsonserver.jsuser.db/node_modules

/node_modules 文件夹是不用上传到服务器的，因为 /node_modules 文件夹是在 Windows 上开发时生成的，要部署到 ubuntu 上最好重新安装这些包。

2.2 文件归档和压缩

这里我使用 7z 将这些文件归档为 tar，然后再压缩为 bz2（7z中需要先归档为 tar 才会出现压缩为 bz2 的压缩选项）
最终文件后缀名为 .tar.bz2
如下：

2.3 压缩文件上传到服务器

这里我使用 MobaXterm，以 SSH 协议连接到服务器，并使用内置的SFTP 服务进行文件上传
上传位置一般为 /var/www/下面的文件夹，可以新建一个和项目名称有关的

2.4 解压文件

使用如下命令解压上传的文件

tar -xvjf filename.tar.bz2

完成后，服务器中项目内容如下

/var/www/xxx/frontend
/var/www/xxx/backend

3. 配置Node.js应用

3.1 启动 PM2

进入你的服务器，导航到你的backend目录并安装依赖项，然后使用pm2启动应用：

cd /var/www/xxx/backend
npm install
pm2 start server.js --name YourServerName

server.js 处填入 Node 代码文件名
YourServerName 处可以自己为服务起一个别名

3.2 确认 PM2 进程

要确保你的应用正在运行，可查看 PM2 中的进程列表：

pm2 list

你应该会看到类似如下的输出，显示 YourServerName 正在运行：

┌─────┬─────────────────────┬──────┬─────────┬─────┬────────┬───────────┬──────────┬───────┬──────────┐
│ id  │ name                │ mode │ status  │ cpu │ memory │  uptime   │ restarted│ user  │ watching │
├─────┼─────────────────────┼──────┼─────────┼─────┼────────┼───────────┼──────────┼───────┼──────────┤
│ 0   │ YourServerName      │ fork │ online  │ 0%  │ 32.0mb │ 0s        │ 0        │ root  │ disabled │
└─────┴─────────────────────┴──────┴─────────┴─────┴────────┴───────────┴──────────┴───────┴──────────┘

status 处的 online 就表示服务正在运行。

4. 配置Apache反向代理

编辑或创建一个新的Apache虚拟主机配置文件，例如/etc/apache2/sites-available/YourServerName.conf：

<VirtualHost *:要使用的服务器端口>ServerName 服务名称DocumentRoot /前端文件所在目录<Directory /前端文件所在目录>Options Indexes FollowSymLinksAllowOverride AllRequire all granted</Directory>ProxyRequests OffProxyPass / http://localhost:node代码中使用的本地服务器端口/ProxyPassReverse / http://localhost:node代码中使用的本地服务器端口/ErrorLog ${APACHE_LOG_DIR}/ 服务名称_error.logCustomLog ${APACHE_LOG_DIR}/ 服务名称_access.log combined
</VirtualHost>

一个具体的配置文件例子：

<VirtualHost *:11111>ServerName xxx.xx.topDocumentRoot /var/www/xxx/frontend<Directory /var/www/xxx/frontend>Options Indexes FollowSymLinksAllowOverride AllRequire all granted</Directory>ProxyRequests OffProxyPass / http://localhost:9000/ProxyPassReverse / http://localhost:9000/ErrorLog ${APACHE_LOG_DIR}/YourServerName_error.logCustomLog ${APACHE_LOG_DIR}/YourServerName_access.log combined
</VirtualHost>

5. 启用必要的Apache模块

sudo a2enmod proxy
sudo a2enmod proxy_http
sudo a2enmod rewrite

启用你的站点配置文件并重启 Apache：

sudo a2ensite sharedbill.conf
sudo systemctl restart apache2

6. 检查 Apache 和 Node.js 的监听地址

确保 Apache 和 Node.js 都监听在正确的地址和端口。

6.1 Apache 配置检查

sudo nano /etc/apache2/ports.conf

确保包含：

Listen 11111

6.2 Node.js 监听地址

确保 server.js 中监听的是 localhost 和使用的 Node 服务器端口。

6.3 使用 netstat 检查端口

假如使用的 Node 服务器端口为 9000，网页要使用的端口为 11111
使用 netstat 或 ss 工具检查端口监听情况：

sudo netstat -tuln | grep :9000
sudo netstat -tuln | grep :11111

应该看到 Node.js 监听在 9000 端口，Apache 监听在 11111 端口。

7. 更新防火墙规则（如果需要）

确保服务器防火墙允许端口11111的流量：

sudo ufw allow 11111/tcp
sudo ufw reload

8. 启用站点配置并重启Apache

启用站点配置并重启Apache服务器：

sudo a2ensite sharedbill.conf
sudo systemctl restart apache2

9. 验证部署

9.1 直接通过 IP 地址访问

尝试直接通过服务器的 IP 地址访问：

http://<your-server-ip>:11111

假设可以访问，并且可以正常使用其上的服务，那么则说明网页部署成功了。

9.2 debug

如果不能访问，比如显示 502 错误，则可以依靠以下手段进行 debug：

9.2.1 查看日志

Apache 错误日志：

sudo tail -f /var/log/apache2/YourServerName_error.log

Node.js 日志（使用 PM2）：

pm2 logs YourServerName

9.2.2 测试 Node.js 服务器

使用 curl 测试你的 Node.js 服务器是否在本地正常运行：

curl http://localhost:9000

你应该能够看到来自你的 Node.js 服务器的响应。如果没有响应，则需要检查你的 server.js 文件是否正确启动并监听端口 9000。

下面是配置域名 DNS 指向网站的过程，没有这个需求就不用看了。

10 DNS 设置

10.1 DNS指向设置

我选择使用 Cloudflare 的 DNS 服务，并且使用三级域名指向服务器地址

登录到 Cloudflare。
选择你的域名。
进入 DNS 选项卡。
添加 A 记录：
- Type: A
- Name: 要使用的三级域名
- IPv4 Address: 服务器地址
- TTL: Auto
- Proxy status: 设置为 DNS only 。

确保你的 A 记录看起来像这样：

Type	Name	Content	TTL	Proxy status
A	要使用的三级域名	服务器地址	Auto	DNS only

10.2 Apache 虚拟主机重定向

10.2.1 配置文件的修改

由于我要使用非 80/443 这些常规端口访问网站（比如 11111），所以要在监听 80 端口的虚拟主机上添加重定向规则。
在你现有的虚拟主机配置文件中添加特定的重定向规则，如果没有监听 80 端口的虚拟主机，则在刚才的 Apache 虚拟主机配置中添加虚拟主机，确保监听80端口的虚拟主机配置中有如下内容：

<VirtualHost *:80># 启用 Rewrite 引擎RewriteEngine On# 仅对 xxx.xx.x 执行重定向RewriteCond %{HTTP_HOST} ^xxx\.xx\.x$ [NC]RewriteRule ^(.*)$ http://xxx.xx.x:11111$1 [R=301,L]
</VirtualHost>

^xxx\.xx\.x$ [NC]：填写三级域名地址，\ 用于转义

通过这种方式，你可以确保其他在 80 端口上运行的网站不受影响，同时实现特定域名的重定向。

10.2.2 启用站点配置并重启 Apache

启用你的站点配置文件并重启 Apache：

sudo a2ensite YourServerName.conf
sudo systemctl restart apache2

10.3 验证访问

打开浏览器，访问 http://xxx.xx.x:11111，确保页面加载正常。