將React+Next.js的項(xiàng)目部署到服務(wù)器的方法

更新時(shí)間：2025年03月11日 14:29:58 作者：low神

本文詳細(xì)介紹了將React+Next.js項(xiàng)目部署到服務(wù)器的步驟,包括服務(wù)器環(huán)境準(zhǔn)備、項(xiàng)目配置與構(gòu)建、啟動(dòng)服務(wù)、配置Nginx反向代理、HTTPS配置、驗(yàn)證與監(jiān)控以及高級(jí)優(yōu)化,感興趣的朋友一起看看吧

一、服務(wù)器環(huán)境準(zhǔn)備

1. 安裝依賴 Node.js ： · Next.js需要Node.js環(huán)境（建議使用LTS版本）。

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

· PM2 （進(jìn)程管理工具，用于保持應(yīng)用運(yùn)行）：

sudo npm install -g pm2

· Nginx （可選，用于反向代理和靜態(tài)資源處理）：

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

二、項(xiàng)目配置與構(gòu)建

1. 上傳代碼到服務(wù)器 · 通過Git克隆項(xiàng)目（確保服務(wù)器有訪問倉庫的權(quán)限）：

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

也可手動(dòng)上傳代碼壓縮包并解壓。

2.安裝依賴并構(gòu)建 · 安裝依賴：

npm install --production

·環(huán)境變量配置：在項(xiàng)目根目錄創(chuàng)建或更新 .env.production 文件。構(gòu)建時(shí)Next.js會(huì)讀取該文件（變量需以 NEXT_PUBLIC_ 前綴暴露到客戶端）。 · 構(gòu)建項(xiàng)目：

npm run build

2. 啟動(dòng)Next.js服務(wù)

· 使用PM2啟動(dòng)：

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

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

1. 創(chuàng)建Nginx配置文件 · 新建文件 /etc/nginx/sites-available/next-app ，內(nèi)容如下：

server {
    listen 80;
    server_name your-domain.com; # 替換為公司內(nèi)部域名或IP
    location / {
        proxy_pass http://localhost:3000; # 轉(zhuǎn)發(fā)到Next.js服務(wù)
        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;
    }
    # 靜態(tài)資源緩存（可選）
    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  # 測(cè)試配置是否正確
sudo systemctl restart nginx

四、HTTPS配置（可選）

使用Let’s Encrypt申請(qǐng)證書（需公網(wǎng)域名）或公司內(nèi)部CA簽發(fā)。修改Nginx配置監(jiān)聽443端口并添加SSL證書路徑：

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

五、驗(yàn)證與監(jiān)控

1. 檢查服務(wù)狀態(tài)

pm2 status       # 查看PM2進(jìn)程狀態(tài)
systemctl status nginx  # 檢查Nginx是否運(yùn)行

2. 查看日志

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

六、高級(jí)優(yōu)化（可選）

1. 使用Docker容器化部署 · 創(chuàng)建 Dockerfile ：

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

· 構(gòu)建鏡像并運(yùn)行：

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

2. 配置CI/CD

· 通過Jenkins/GitLab CI自動(dòng)觸發(fā)部署腳本。

環(huán)境變量 ：確保生產(chǎn)環(huán)境變量（如API地址）正確配置，敏感信息不要提交到代碼庫。
資源限制 ：Node.js可能需調(diào)整內(nèi)存限制，可在啟動(dòng)時(shí)添加 –max-old-space-size=4096 。
備份與回滾 ：部署前備份舊版本，便于快速回滾。

完成以上步驟后，訪問服務(wù)器的IP或域名即可查看部署成功的應(yīng)用。

完整部署腳本：

以下是為Node.js環(huán)境設(shè)計(jì)的完整部署腳本，包含依賴安裝、項(xiàng)目構(gòu)建、進(jìn)程管理及Nginx反向代理配置，可直接保存為 deploy.sh 并執(zhí)行：

#!/bin/bash
# 部署腳本：自動(dòng)部署Next.js項(xiàng)目到本地服務(wù)器（Node.js環(huán)境）
# 使用方法：chmod +x deploy.sh && ./deploy.sh
# ----------------------------------
# 配置區(qū)（根據(jù)實(shí)際情況修改）
# ----------------------------------
PROJECT_NAME="my-next-app"       # 項(xiàng)目名稱
PROJECT_PORT=3000                # Next.js服務(wù)端口
PROJECT_GIT_REPO="https://github.com/yourusername/your-repo.git"  # Git倉庫地址
PROJECT_DIR="/var/www/$PROJECT_NAME"     # 項(xiàng)目部署目錄
NGINX_AVAILABLE="/etc/nginx/sites-available/$PROJECT_NAME.conf"  # Nginx配置路徑
NGINX_ENABLED="/etc/nginx/sites-enabled/$PROJECT_NAME.conf"      # Nginx啟用鏈接
# ----------------------------------
# 顏色輸出函數(shù)
# ----------------------------------
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[0;33m'
NC='\033[0m' # 恢復(fù)默認(rèn)顏色
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] 安裝系統(tǒng)依賴..."
    # 安裝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. 拉取項(xiàng)目代碼
# ----------------------------------
clone_project() {
    success "\n[3/6] 拉取項(xiàng)目代碼..."
    if [ -d "$PROJECT_DIR" ]; then
        warning "檢測(cè)到已有項(xiàng)目目錄，更新代碼..."
        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. 安裝依賴并構(gòu)建
# ----------------------------------
build_project() {
    success "\n[4/6] 安裝依賴并構(gòu)建..."
    npm install --production || error "依賴安裝失敗"
    # 檢查環(huán)境變量文件是否存在
    if [ ! -f .env.production ]; then
        warning "檢測(cè)到缺少 .env.production 文件，請(qǐng)手動(dòng)創(chuàng)建！"
        touch .env.production
    fi
    npm run build || error "項(xiàng)目構(gòu)建失敗"
}
# ----------------------------------
# 5. 啟動(dòng)PM2進(jìn)程
# ----------------------------------
start_pm2() {
    success "\n[5/6] 啟動(dòng)PM2進(jìn)程..."
    # 檢查是否已存在同名進(jìn)程
    if pm2 list | grep -q $PROJECT_NAME; then
        pm2 reload $PROJECT_NAME || error "PM2進(jìn)程重啟失敗"
    else
        pm2 start npm --name "$PROJECT_NAME" -- start || error "PM2進(jìn)程啟動(dòng)失敗"
    fi
    pm2 save
    pm2 startup  # 提示用戶執(zhí)行生成的命令以設(shè)置開機(jī)啟動(dòng)
}
# ----------------------------------
# 6. 配置Nginx反向代理
# ----------------------------------
configure_nginx() {
    success "\n[6/6] 配置Nginx反向代理..."
    sudo bash -c "cat > $NGINX_AVAILABLE << EOF
server {
    listen 80;
    server_name _;  # 替換為實(shí)際域名或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;
    }
    # 靜態(tài)資源緩存
    location /_next/static {
        alias $PROJECT_DIR/.next/static;
        expires 365d;
        access_log off;
    }
}
EOF"
    # 創(chuàng)建啟用鏈接
    sudo ln -sf $NGINX_AVAILABLE $NGINX_ENABLED
    sudo nginx -t || error "Nginx配置測(cè)試失敗"
    sudo systemctl restart nginx
}
# ----------------------------------
# 主執(zhí)行流程
# ----------------------------------
install_dependencies
configure_firewall
clone_project
build_project
start_pm2
configure_nginx
success "\n? 部署完成！訪問 http://服務(wù)器IP 查看站點(diǎn)"
warning "提示：若需HTTPS，請(qǐng)手動(dòng)修改Nginx配置添加SSL證書"

1. 修改配置

打開腳本，修改頂部的配置區(qū)：
- PROJECT_NAME : 項(xiàng)目名稱（用于PM2和Nginx配置
- PROJECT_PORT : Next.js服務(wù)端口（默認(rèn)3000）
- PROJECT_GIT_REPO : 你的Git倉庫地址（確保服務(wù)器有訪問權(quán)限）
- PROJECT_DIR : 項(xiàng)目部署目錄（默認(rèn)/var/www/my-next-app ）

2. 賦予執(zhí)行權(quán)限

chmod +x deploy.sh

3. 運(yùn)行腳本

 ./deploy.sh

4. 后續(xù)操作

· 根據(jù)提示手動(dòng)創(chuàng)建 .env.production 文件并填寫生產(chǎn)環(huán)境變量

cd /var/www/my-next-app 
nano .env.production # 示例內(nèi)容：NEXT_PUBLIC_API_URL=http://api.example.com

· 執(zhí)行 pm2 startup 生成的命令（設(shè)置開機(jī)自啟）
· 日志監(jiān)控：使用 pm2 logs 查看實(shí)時(shí)日志：

pm2 logs my-next-app

到此這篇關(guān)于如何將React+Next.js的項(xiàng)目部署到服務(wù)器的文章就介紹到這了,更多相關(guān)React Next.js部署到服務(wù)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: