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

文章目录

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

bash 复制代码

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

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

2.1 识别需要上传的文件

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

/frontend
    index.html
    register.html
    script.js
    style.css

/backend
    package-lock.json
    package.json
    server.js
    user.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 解压文件

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

bash 复制代码

tar -xvjf filename.tar.bz2

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

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

3. 配置Node.js应用

3.1 启动 PM2

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

bash 复制代码

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

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

3.2 确认 PM2 进程

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

bash 复制代码

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：

apache 复制代码

<VirtualHost *:要使用的服务器端口>
    ServerName 服务名称

    DocumentRoot /前端文件所在目录

    <Directory /前端文件所在目录>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ProxyRequests Off
    ProxyPass / http://localhost:node代码中使用的本地服务器端口/
    ProxyPassReverse / http://localhost:node代码中使用的本地服务器端口/

    ErrorLog ${APACHE_LOG_DIR}/ 服务名称_error.log
    CustomLog ${APACHE_LOG_DIR}/ 服务名称_access.log combined
</VirtualHost>

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

apache 复制代码

<VirtualHost *:11111>
    ServerName xxx.xx.top

    DocumentRoot /var/www/xxx/frontend

    <Directory /var/www/xxx/frontend>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ProxyRequests Off
    ProxyPass / http://localhost:9000/
    ProxyPassReverse / http://localhost:9000/

    ErrorLog ${APACHE_LOG_DIR}/YourServerName_error.log
    CustomLog ${APACHE_LOG_DIR}/YourServerName_access.log combined
</VirtualHost>

5. 启用必要的Apache模块

bash 复制代码

sudo a2enmod proxy
sudo a2enmod proxy_http
sudo a2enmod rewrite

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

bash 复制代码

sudo a2ensite sharedbill.conf
sudo systemctl restart apache2

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

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

6.1 Apache 配置检查

bash 复制代码

sudo nano /etc/apache2/ports.conf

确保包含：

apache 复制代码

Listen 11111

6.2 Node.js 监听地址

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

6.3 使用 netstat 检查端口

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

bash 复制代码

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

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

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

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

bash 复制代码

sudo ufw allow 11111/tcp
sudo ufw reload

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

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

bash 复制代码

sudo a2ensite sharedbill.conf
sudo systemctl restart apache2

9. 验证部署

9.1 直接通过 IP 地址访问

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

bash 复制代码

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

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

9.2 debug

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

9.2.1 查看日志

Apache 错误日志：

bash 复制代码

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

Node.js 日志（使用 PM2）：

bash 复制代码

pm2 logs YourServerName

9.2.2 测试 Node.js 服务器

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

bash 复制代码

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端口的虚拟主机配置中有如下内容：

apache 复制代码

<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：

bash 复制代码

sudo a2ensite YourServerName.conf
sudo systemctl restart apache2

10.3 验证访问

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