问小白 wenxiaobai
资讯
历史
科技
环境与自然
成长
游戏
财经
文学与艺术
美食
健康
家居
文化
情感
汽车
三农
军事
旅行
运动
教育
生活
星座命理

Node.js+Apache 部署网页全过程(非常详细!)

创作时间:
作者:
@小白创作中心

Node.js+Apache 部署网页全过程(非常详细!)

引用
CSDN
1.
https://blog.csdn.net/Beihai_Van/article/details/140676873

本文将详细介绍如何在VPS服务器上使用Node.js和Apache部署一个网站。文章将涵盖从系统更新到最终验证的整个过程,包括具体的命令行操作和配置文件示例。

背景

在Windows环境下使用Node.js进行本地开发后,需要将项目部署到VPS服务器上。主要面临以下问题:

  • VPS服务器的常规端口(80/443)已被占用
  • 需要配置Apache反向代理
  • 使用三级域名直接访问新部署的网页,而不需要输入端口号

补充说明:域名分级结构包括根域名、顶级域名、一级域名、二级域名和三级域名。

接下来开始网站的部署!

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 识别需要上传的文件

将项目从本地机器上传到服务器的相应目录,我的项目结构为(使用缩进表示结构层次):

/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 解压文件

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

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

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

<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模块

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。

9.2.3 IPv4 解析问题

有的服务器上,localhost 可能会被解析为 IPv6,有的应用不支持监听 IPv6 地址,所以可以尝试在代码中显式使用 IPv4 地址来解决这个问题:

app.listen(PORT, '127.0.0.1', () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

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

10 DNS 设置

10.1 DNS指向设置

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

  1. 登录到 Cloudflare。
  2. 选择你的域名。
  3. 进入 DNS 选项卡。
  4. 添加 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 ,确保页面加载正常。

© 2023 北京元石科技有限公司 ◎ 京公网安备 11010802042949号