网站导航
> 技术文档 > 如何将React+Next.js的项目部署到服务器_nextjs 部署

如何将React+Next.js的项目部署到服务器_nextjs 部署

网友: 技术文档 2025-09-04 01:14:02

一、服务器环境准备

1. 安装依赖 Node.js ：

· Next.js需要Node.js环境（建议使用LTS版本）。
 # Ubuntu示例 curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - sudo apt-get install -y nodejs
· PM2 （进程管理工具，用于保持应用运行）：
sudo npm install -g pm2
· Nginx （可选，用于反向代理和静态资源处理）：
sudo apt install

· 2. nginx 配置防火墙

· 开放必要端口（如80、443、3000）：
sudo ufw allow 80 /tcp sudo ufw allow 443 /tcp sudo ufw allow 3000 /tcp sudo ufw reload

二、项目配置与构建

1. 上传代码到服务器

· 通过Git克隆项目（确保服务器有访问仓库的权限）：
git clone https://your-repo-url.gitcd your-project

也可手动上传代码压缩包并解压。

2.安装依赖并构建

· 安装依赖：
npm install --production
·环境变量配置：
  • 在项目根目录创建或更新 .env.production 文件。
  • 构建时Next.js会读取该文件（变量需以 NEXT_PUBLIC_ 前缀暴露到客户端）。
· 构建项目：
npm run build

2. 启动Next.js服务

· 使用PM2启动：
pm2 start npm --name \"next-app\" -- startpm2 savepm2 startup

三、配置Nginx反向代理（推荐）

1. 创建Nginx配置文件

· 新建文件 /etc/nginx/sites-available/next-app ，内容如下：
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; } # 静态资源缓存（可选） location /_next/static { alias /path/to/your-project/.next/static; expires 365d; access_log off; }}
2. 启用配置并重启Nginx
sudo ln -s /etc/nginx/sites-available/next-app /etc/nginx/sites-enabled/sudo nginx -t # 测试配置是否正确sudo systemctl restart nginx

四、HTTPS配置（可选）

  1. 使用Let’s Encrypt申请证书（需公网域名）或公司内部CA签发。
  2. 修改Nginx配置监听443端口并添加SSL证书路径：
server { listen 443 ssl; server_name your-domain.com; ssl_certificate /path/to/cert.pem; ssl_certificate_key /path/to/privkey.pem; # ...其他配置同上}

五、验证与监控

1. 检查服务状态

pm2 status # 查看PM2进程状态systemctl status nginx # 检查Nginx是否运行

2. 查看日志

pm2 logs next-app # Next.js日志journalctl -u nginx -f # Nginx日志

六、高级优化（可选）

1. 使用Docker容器化部署

· 创建 Dockerfile ：
FROM node:18-alpineWORKDIR /appCOPY package*.json ./RUN npm install --productionCOPY . .RUN npm run buildCMD [\"npm\", \"start\"]
· 构建镜像并运行：
docker build -t next-app .docker run -d -p 3000:3000 next-app

2. 配置CI/CD

· 通过Jenkins/GitLab CI自动触发部署脚本。

注意事项

  • 环境变量 ：确保生产环境变量（如API地址）正确配置，敏感信息不要提交到代码库。
  • 资源限制 ：Node.js可能需调整内存限制，可在启动时添加 –max-old-space-size=4096 。
  • 备份与回滚 ：部署前备份旧版本，便于快速回滚。

完成以上步骤后，访问服务器的IP或域名即可查看部署成功的应用。

完整部署脚本：

以下是为Node.js环境设计的完整部署脚本，包含依赖安装、项目构建、进程管理及Nginx反向代理配置，可直接保存为 deploy.sh 并执行：

#!/bin/bash# 部署脚本：自动部署Next.js项目到本地服务器（Node.js环境）# 使用方法：chmod +x deploy.sh && ./deploy.sh# ----------------------------------# 配置区（根据实际情况修改）# ----------------------------------PROJECT_NAME=\"my-next-app\" # 项目名称PROJECT_PORT=3000 # Next.js服务端口PROJECT_GIT_REPO=\"https://github.com/yourusername/your-repo.git\" # Git仓库地址PROJECT_DIR=\"/var/www/$PROJECT_NAME\" # 项目部署目录NGINX_AVAILABLE=\"/etc/nginx/sites-available/$PROJECT_NAME.conf\" # Nginx配置路径NGINX_ENABLED=\"/etc/nginx/sites-enabled/$PROJECT_NAME.conf\" # Nginx启用链接# ----------------------------------# 颜色输出函数# ----------------------------------RED=\'\\033[0;31m\'GREEN=\'\\033[0;32m\'YELLOW=\'\\033[0;33m\'NC=\'\\033[0m\' # 恢复默认颜色success() { echo -e \"${GREEN}$1${NC}\"; }error() { echo -e \"${RED}$1${NC}\"; exit 1; }warning() { echo -e \"${YELLOW}$1${NC}\"; }# ----------------------------------# 1. 安装依赖# ----------------------------------install_dependencies() { success \"\\n[1/6] 安装系统依赖...\" # 安装Node.js（LTS版本） if ! command -v node &> /dev/null; then warning \"未安装Node.js，正在安装...\" curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - sudo apt-get install -y nodejs || error \"Node.js安装失败\" fi # 安装PM2 if ! command -v pm2 &> /dev/null; then sudo npm install -g pm2 || error \"PM2安装失败\" fi # 安装Nginx（可选） if ! command -v nginx &> /dev/null; then warning \"未安装Nginx，正在安装...\" sudo apt install -y nginx || error \"Nginx安装失败\" fi}# ----------------------------------# 2. 配置防火墙# ----------------------------------configure_firewall() { success \"\\n[2/6] 配置防火墙...\" sudo ufw allow $PROJECT_PORT/tcp # 开放Next.js端口 sudo ufw allow \'Nginx Full\' # 开放HTTP/HTTPS sudo ufw reload}# ----------------------------------# 3. 拉取项目代码# ----------------------------------clone_project() { success \"\\n[3/6] 拉取项目代码...\" if [ -d \"$PROJECT_DIR\" ]; then warning \"检测到已有项目目录，更新代码...\" cd $PROJECT_DIR git pull || error \"代码拉取失败\" else sudo mkdir -p $PROJECT_DIR sudo chown -R $USER:$USER $PROJECT_DIR git clone $PROJECT_GIT_REPO $PROJECT_DIR || error \"代码克隆失败\" cd $PROJECT_DIR fi}# ----------------------------------# 4. 安装依赖并构建# ----------------------------------build_project() { success \"\\n[4/6] 安装依赖并构建...\" npm install --production || error \"依赖安装失败\" # 检查环境变量文件是否存在 if [ ! -f .env.production ]; then warning \"检测到缺少 .env.production 文件，请手动创建！\" touch .env.production fi npm run build || error \"项目构建失败\"}# ----------------------------------# 5. 启动PM2进程# ----------------------------------start_pm2() { success \"\\n[5/6] 启动PM2进程...\" # 检查是否已存在同名进程 if pm2 list | grep -q $PROJECT_NAME; then pm2 reload $PROJECT_NAME || error \"PM2进程重启失败\" else pm2 start npm --name \"$PROJECT_NAME\" -- start || error \"PM2进程启动失败\" fi pm2 save pm2 startup # 提示用户执行生成的命令以设置开机启动}# ----------------------------------# 6. 配置Nginx反向代理# ----------------------------------configure_nginx() { success \"\\n[6/6] 配置Nginx反向代理...\" sudo bash -c \"cat > $NGINX_AVAILABLE << EOFserver { listen 80; server_name _; # 替换为实际域名或IP location / { proxy_pass http://localhost:$PROJECT_PORT; 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; } # 静态资源缓存 location /_next/static { alias $PROJECT_DIR/.next/static; expires 365d; access_log off; }}EOF\" # 创建启用链接 sudo ln -sf $NGINX_AVAILABLE $NGINX_ENABLED sudo nginx -t || error \"Nginx配置测试失败\" sudo systemctl restart nginx}# ----------------------------------# 主执行流程# ----------------------------------install_dependenciesconfigure_firewallclone_projectbuild_projectstart_pm2configure_nginxsuccess \"\\n✅ 部署完成！访问 http://服务器IP 查看站点\"warning \"提示：若需HTTPS，请手动修改Nginx配置添加SSL证书\"
1. 修改配置

打开脚本，修改顶部的配置区：
- PROJECT_NAME : 项目名称（用于PM2和Nginx配置
- PROJECT_PORT : Next.js服务端口（默认3000）
- PROJECT_GIT_REPO : 你的Git仓库地址（确保服务器有访问权限 ）
- PROJECT_DIR : 项目部署目录（默认/var/www/my-next-app ）

2. 赋予执行权限
chmod +x deploy.sh
3. 运行脚本
 ./deploy.sh
4. 后续操作

  • · 根据提示手动创建 .env.production 文件并填写生产环境变量

    cd /var/www/my-next-app nano .env.production # 示例内容：NEXT_PUBLIC_API_URL=http://api.example.com

  • · 执行 pm2 startup 生成的命令（设置开机自启）

  • · 日志监控： 使用 pm2 logs 查看实时日志：

    pm2 logs my-next-app
网络标签：

相关问题