将React+Next.js的项目部署到服务器的方法

 # Ubuntu示例 curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - sudo apt-get install -y nodejs 

sudo npm install -g pm2 

sudo apt install 

sudo ufw allow 80 /tcp sudo ufw allow 443 /tcp sudo ufw allow 3000 /tcp sudo ufw reload

git clone https://your-repo-url.git
cd your-project

npm install --production

npm run build

pm2 start npm --name "next-app" -- start
pm2 save
pm2 startup

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

sudo ln -s /etc/nginx/sites-available/next-app /etc/nginx/sites-enabled/
sudo nginx -t  # 测试配置是否正确
sudo systemctl restart nginx

server {
    listen 443 ssl;
    server_name your-domain.com;
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/privkey.pem;
    # ...其他配置同上
}

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

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

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
RUN npm run build
CMD ["npm", "start"]

docker build -t next-app .
docker run -d -p 3000:3000 next-app

#!/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 << EOF
server {
    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_dependencies
configure_firewall
clone_project
build_project
start_pm2
configure_nginx
success "\n✅ 部署完成！访问 http://服务器IP 查看站点"
warning "提示：若需HTTPS，请手动修改Nginx配置添加SSL证书"

chmod +x deploy.sh 

 ./deploy.sh 

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

pm2 logs my-next-app