个人网站部署

我的个人网站是react项目，具体搭建步骤：
补充：本博客的前提是已经准备好服务器、域名以及备案。

1、服务器环境准备

1.1 安装Node.js和npm

# CentOS/RedHat
sudo yum install -y nodejs npm

# Ubuntu/Debian
sudo apt update
sudo apt install -y nodejs npm

# 验证安装
node -v  # 应输出 v16.x 或更高
npm -v

1.2 将本地项目打包

npm run build

通常打包后会生成build文件夹，本项目采用了next.js，打包后生成了.next.js文件夹。

1.3 安装项目依赖
将本地项目上传到服务器（假设上传到 /var/www/next-app）

# 上传项目文件（包含 package.json 和 .next）
scp -r package.json .next public node_modules user@server:/var/www/next-app

# 服务器端安装依赖（如果未上传 node_modules）
cd /var/www/next-app
npm install --production  # 仅安装生产依赖

2. 启动 Next.js 服务

2.1 直接启动（临时测试）

cd /var/www/next-app
npx next start -p 3000  # 默认端口 3000

# 测试访问
curl http://localhost:3000

2.2 使用 PM2 持久化进程

# 全局安装 PM2
sudo npm install -g pm2

# 启动服务
pm2 start "npx next start -p 3000" --name "next-app"

# 设置开机自启
pm2 save
pm2 startup

3、配置反向代理（Nginx）

3.1 安装 Nginx

# CentOS/RedHat
sudo yum install -y nginx

# Ubuntu/Debian
sudo apt install -y nginx

3.2 创建 Nginx 配置文件

sudo nano /etc/nginx/conf.d/next-app.conf

写入以下内容：

server {
    listen 80;
    server_name your-domain.com;  # 替换为域名或服务器IP

    location / {
        proxy_pass http://localhost:3000;  # 指向 Next.js 服务端口
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

3.3 重启 Nginx

sudo nginx -t       # 验证配置语法
sudo systemctl restart nginx

4. 开放防火墙端口(这步通常可略过，端口已经被开放）

# 开放 HTTP 端口（80）和 Next.js 服务端口（3000）
sudo firewall-cmd --permanent --add-port=3000/tcp
sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --reload

5. 验证外部访问

浏览器访问以下地址：

http://your-domain.com 或 http://服务器IP