Ubuntu 20.04 LTS 中部署 网页 + Node.js 应用 + Nginx 跨域配置 的详细步骤

一、准备工作

1、连接服务器

通过 SSH 工具（如 Putty、Xshell 或终端命令）连接到 Ubuntu 服务器：

ssh username@服务器IP地址

2、更新系统

确保系统软件包为最新版本：

sudo apt update && sudo apt upgrade -y

二、安装 Node.js 环境

1、安装 Node.js 官方 PPA（用于获取最新稳定版）：

curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

2、安装 Node.js 和 npm（LTS 长期支持版本）：

sudo apt install -y nodejs

3、验证安装：

node -v    # 查看 Node.js 版本（如 v16.xx.x）
npm -v     # 查看 npm 版本

三、部署 Node.js 应用

1. 准备应用代码

创建项目目录（如 /var/www/node-app）：

sudo mkdir -p /var/www/node-app
sudo chown -R $USER:$USER /var/www/node-app  # 赋予当前用户权限

将本地代码上传至服务器（可通过 scp 或 FTP 工具）：

scp -r 本地项目路径 username@服务器IP:/var/www/node-app

2. 安装依赖并启动应用

进入项目目录，安装依赖：

cd /var/www/node-app
npm install

开发环境启动（用于调试）：

node app.js  # 假设入口文件为 app.js，端口默认 3000

安装 pm2 守护进程管理器：

npm install pm2 -g

生产环境启动（推荐使用pm2进程管理工具）

pm2 start app.js --name "node-app"  # 启动应用并命名
pm2 save  # 保存进程列表，避免服务器重启后应用停止

四、安装并配置 Nginx

1. 安装 Nginx

sudo apt install -y nginx
sudo systemctl start nginx  # 启动 Nginx
sudo systemctl enable nginx  # 设置开机自启

此时访问服务器 IP 应看到 Nginx 默认欢迎页面。

2. 配置 Nginx 代理 Node.js 应用

创建 Nginx 配置文件（替换默认站点）：

sudo nano /etc/nginx/sites-available/node-app

写入以下内容（根据实际情况修改端口、路径等参数）：

server {listen 80;server_name your-domain.com;  # 替换为你的域名或服务器 IP# 静态资源代理（如 HTML、CSS、JS）location / {root /var/www/node-app/public;  # 网页静态资源目录index index.html index.htm;try_files $uri $uri/ =404;}# Node.js 应用代理（假设 Node.js 运行在 3000 端口）location /api/ {  # 代理路径可自定义，如 /api/proxy_pass http://localhost:3000/;  # 指向 Node.js 应用地址proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}# 跨域资源共享（CORS）配置location / {if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';# 允许自定义请求头（如 Authorization）add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain; charset=utf-8';add_header 'Content-Length' 0;return 204;}if ($request_method = 'POST') {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';}if ($request_method = 'GET') {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';}}
}

3. 启用配置并测试

激活站点配置：

sudo ln -s /etc/nginx/sites-available/node-app /etc/nginx/sites-enabled/

检查 Nginx 配置语法是否正确：

sudo nginx -t

重启 Nginx 使配置生效：

sudo systemctl restart nginx

五、跨域配置验证

前端请求示例（以 JavaScript 为例）
在前端代码中发送跨域请求时，Nginx 会自动添加响应头：

fetch('http://your-domain.com/api/data', {method: 'GET',headers: {'Content-Type': 'application/json','Authorization': 'Bearer your-token'  // 若有自定义头需与 Nginx 配置一致}
})
.then(response => response.json())
.then(data => console.log(data));

测试跨域是否生效
使用浏览器开发者工具（F12）查看响应头，确保包含：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: ...

若出现跨域错误，检查 Nginx 配置中的路径、端口是否与 Node.js 应用匹配，以及防火墙是否放行端口（如 Ubuntu 的 UFW 需开放 80/443 端口）。

六、补充优化（可选）

1、HTTPS 配置（推荐）

使用 Certbot 生成免费 SSL 证书：

sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com  # 按提示完成配置

2、防火墙设置

sudo ufw allow 'Nginx Full'  # 允许 HTTP/HTTPS 流量
sudo ufw allow ssh  # 保留 SSH 访问
sudo ufw enable  # 启用防火墙

3、日志管理

Nginx 日志路径：
访问日志：/var/log/nginx/access.log
错误日志：/var/log/nginx/error.log
可通过 tail -f 命令实时查看日志调试问题。

最后：总结流程

环境安装：Node.js + Nginx

应用部署：上传代码 + 启动服务（推荐用 pm2）

Nginx 代理：配置反向代理和跨域响应头

安全优化：HTTPS + 防火墙

调试验证：检查服务状态和跨域请求是否正常

通过以上步骤，即可在 Ubuntu 20.04 中完成网页、Node.js 应用和 Nginx 跨域配置的部署