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

一、服务器环境准备

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.git
cd 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" -- start
pm2 save
pm2 startup

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

1. 创建Nginx配置文件

· 新建文件 /etc/nginx/sites-available/next-app ，内容如下：
server {listen 80;server_name your-domain.com; # 替换为公司内部域名或IPlocation / {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-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

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; thenwarning "未安装Node.js，正在安装..."curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -sudo apt-get install -y nodejs || error "Node.js安装失败"fi# 安装PM2if ! command -v pm2 &> /dev/null; thensudo npm install -g pm2 || error "PM2安装失败"fi# 安装Nginx（可选）if ! command -v nginx &> /dev/null; thenwarning "未安装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/HTTPSsudo ufw reload
}# ----------------------------------
# 3. 拉取项目代码
# ----------------------------------
clone_project() {success "\n[3/6] 拉取项目代码..."if [ -d "$PROJECT_DIR" ]; thenwarning "检测到已有项目目录，更新代码..."cd $PROJECT_DIRgit pull || error "代码拉取失败"elsesudo mkdir -p $PROJECT_DIRsudo chown -R $USER:$USER $PROJECT_DIRgit clone $PROJECT_GIT_REPO $PROJECT_DIR || error "代码克隆失败"cd $PROJECT_DIRfi
}# ----------------------------------
# 4. 安装依赖并构建
# ----------------------------------
build_project() {success "\n[4/6] 安装依赖并构建..."npm install --production || error "依赖安装失败"# 检查环境变量文件是否存在if [ ! -f .env.production ]; thenwarning "检测到缺少 .env.production 文件，请手动创建！"touch .env.productionfinpm run build || error "项目构建失败"
}# ----------------------------------
# 5. 启动PM2进程
# ----------------------------------
start_pm2() {success "\n[5/6] 启动PM2进程..."# 检查是否已存在同名进程if pm2 list | grep -q $PROJECT_NAME; thenpm2 reload $PROJECT_NAME || error "PM2进程重启失败"elsepm2 start npm --name "$PROJECT_NAME" -- start || error "PM2进程启动失败"fipm2 savepm2 startup  # 提示用户执行生成的命令以设置开机启动
}# ----------------------------------
# 6. 配置Nginx反向代理
# ----------------------------------
configure_nginx() {success "\n[6/6] 配置Nginx反向代理..."sudo bash -c "cat > $NGINX_AVAILABLE << EOF
server {listen 80;server_name _;  # 替换为实际域名或IPlocation / {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_ENABLEDsudo nginx -t || error "Nginx配置测试失败"sudo systemctl restart nginx
}# ----------------------------------
# 主执行流程
# ----------------------------------
install_dependencies
configure_firewall
clone_project
build_project
start_pm2
configure_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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/30645.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据结构第七节：红黑树（初阶）

数据结构第七节：红黑树（初阶）

【本节要点】 红黑树概念红黑树性质红黑树结点定义红黑树结构红黑树插入操作的分析 一、红黑树的概念与性质 1.1 红黑树的概念 红黑树 &#xff0c;是一种 二叉搜索树 &#xff0c;但 在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是 Red和 Black 。 通过对 任何…
阅读更多...
读书报告」网络安全防御实战--蓝军武器库

读书报告」网络安全防御实战--蓝军武器库

一眨眼&#xff0c;20天过去了&#xff0c;刷完了这本书「网络安全防御实战--蓝军武器库」&#xff0c;回味无穷&#xff0c;整理概览如下&#xff0c;可共同交流读书心得。在阅读本书的过程中&#xff0c;我深刻感受到网络安全防御是一个综合性、复杂性极高的领域。蓝军需要掌…
阅读更多...
从传统到智能：Node-red工控机助力农业大棚高效监控

从传统到智能：Node-red工控机助力农业大棚高效监控

智慧农业逐渐成为现代农业发展的主流方向。在这一背景下&#xff0c;农业用工控机&#xff08;简称“农控机”&#xff09;作为智慧农业的核心设备之一&#xff0c;正在为农业大棚的智能化管理提供强有力的支持。本文将详细探讨农控机在智慧农业大棚监控中的应用&#xff0c;并…
阅读更多...
硬件学习笔记--48 磁保持继电器相关基础知识介绍

硬件学习笔记--48 磁保持继电器相关基础知识介绍

目录 1.磁保持继电器工作原理 2.磁保持继电器内部结构及组成部分 3.磁保持继电器主要参数 4.总结 1.磁保持继电器工作原理 磁保持继电器利用永磁体的磁场和线圈通电产生的磁场相互作用&#xff0c;实现触点的切换。其特点在于线圈断电后&#xff0c;触点状态仍能保持&#…
阅读更多...
WOA-Transformer鲸鱼算法优化编码器时间序列预测（Matlab实现）

WOA-Transformer鲸鱼算法优化编码器时间序列预测（Matlab实现）

WOA-Transformer鲸鱼算法优化编码器时间序列预测&#xff08;Matlab实现&#xff09; 目录 WOA-Transformer鲸鱼算法优化编码器时间序列预测&#xff08;Matlab实现&#xff09;预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现WOA-Transformer鲸鱼算法优化编…
阅读更多...
K8S学习之基础十九：k8s的四层代理Service

K8S学习之基础十九：k8s的四层代理Service

K8S四层代理Service 四层负载均衡Service 在k8s中&#xff0c;访问pod可以通过ip端口的方式&#xff0c;但是pod是由生命 周期的&#xff0c;pod在重启的时候ip地址往往会发生变化&#xff0c;访问pod就需要新的ip地址&#xff0c;这样就会很麻烦&#xff0c;每次pod地址改变就…
阅读更多...
R语言的基础命令及实例操作

R语言的基础命令及实例操作

> T & F [1] FALSE > T & T [1] TRUE > T | F [1] TRUE > F | F [1] FALSE > a <- c(T,F,T) > b <- c(F,F,T) > a & b [1] FALSE FALSE TRUE > a | b [1] TRUE FALSE TRUE 在 R 中&#xff0c;大小写是敏感的&#xff0c;也就是说…
阅读更多...
LLM 模型 Prompt 工程

LLM 模型 Prompt 工程

目录 1、Prompt 基础概念 2、Prompt 主要构成 3、Prompt 相关技术 3.1、思维链 3.2、自洽性 3.3、思维树 1、Prompt 基础概念 Prompt 工程是通过设计和优化自然语言提示&#xff08;Prompt&#xff09;&#xff0c;引导LLM生成符合特定任务需求的输出的技术。其核心目标是…
阅读更多...
Springboot基础篇(4):自动配置原理

Springboot基础篇(4):自动配置原理

1 自动配置原理剖析 1.1 加载配置类的源码追溯 自动配置的触发入口&#xff1a; SpringBootApplication 组合注解是自动配置的起点&#xff0c;其核心包含 EnableAutoConfiguration&#xff0c;该注解使用AutoConfigurationImportSelector 实现配置类的动态加载。 启动类的注…
阅读更多...
【大模型系列】开发工具Cursor使用配置及备忘

【大模型系列】开发工具Cursor使用配置及备忘

开发工具cursor使用过程的配置备忘 最近一段时间大模型开发工具cursor是比较火爆的&#xff0c;其提供的一个比较有价值的特性就是其ai辅助功能&#xff0c;其内部集成了若干大模型 提供免费使用期&#xff1b; 做大模型开发这个话题应该是绕不过的&#xff0c;就像开发java使…
阅读更多...
vtkAppendPolyData vtkMultiBlockDataGroupFilter 区别 合并数据

vtkAppendPolyData vtkMultiBlockDataGroupFilter 区别 合并数据

Summary: vtkAppendPolyData vtkMultiBlockDataGroupFilter 区别 两个都是合并数据&#xff1b; 用于处理多块数据集的两种不同的过滤器&#xff08;filters&#xff09;&#xff0c;它们在处理和合并多块数据集方面有不同的用途和实现方式。 Part2:区别 它们的主要区别在于…
阅读更多...
C++入门——输入输出、缺省参数

C++入门——输入输出、缺省参数

C入门——输入输出、缺省参数 一、C标准库——命名空间 std C标准库std是一个命名空间&#xff0c;全称为"standard"&#xff0c;其中包括标准模板库&#xff08;STL&#xff09;&#xff0c;输入输出系统&#xff0c;文件系统库&#xff0c;智能指针与内存管理&am…
阅读更多...
定制开发开源AI智能名片S2B2C商城小程序：以“晒”为桥，构建信任，助力社交新零售飞跃

定制开发开源AI智能名片S2B2C商城小程序：以“晒”为桥，构建信任，助力社交新零售飞跃

摘要&#xff1a;随着互联网的深入发展和社交媒体的普及&#xff0c;社交新零售逐渐成为商业领域的新热点。在这个充满机遇与挑战的时代&#xff0c;如何快速建立与陌生消费者的信任关系&#xff0c;成为决定商业成功的关键。本文将以定制开发开源AI智能名片S2B2C商城小程序为研…
阅读更多...
【Linux】Linux Progress Pulse-进度条

【Linux】Linux Progress Pulse-进度条

> &#x1f343; 本系列为Linux的内容&#xff0c;如果感兴趣&#xff0c;欢迎订阅&#x1f6a9; > &#x1f38a;个人主页:【小编的个人主页】 >小编将在这里分享学习Linux的心路历程✨和知识分享&#x1f50d; >如果本篇文章有问题&#xff0c;还请多多包涵&a…
阅读更多...
Zypher Network ：基于零知识证明方案为 AI 赋予可信框架

Zypher Network ：基于零知识证明方案为 AI 赋予可信框架

Zypher Network 提出的系列方案正逐步成为破解这一困局的关键&#xff0c;其不仅为 LLM 和 AI Agent 等采用提供了一个可信的框架&#xff0c;也为其在更广泛行业中的应用铺平了道路。 LLM 的 “黑盒特性” 像 ChatGPT、DeepSeek、Grok 等大型语言模型&#xff08;LLM, Large …
阅读更多...
从Manus到OpenManus：多智能体协作框架如何重构AI生产力？

从Manus到OpenManus：多智能体协作框架如何重构AI生产力？

文章目录 Manus&#xff1a;封闭生态下的通用AI智能体OpenManus&#xff1a;开源社区的闪速复刻挑战与未来&#xff1a;框架落地的现实边界当前局限性未来演进方向 OpenManus使用指南1. 环境配置2. 参数配置3. 替换搜索引擎4. 运行效果 协作框架开启AI生产力革命 Manus&#xf…
阅读更多...
深入理解与配置 Nginx TCP 日志输出

深入理解与配置 Nginx TCP 日志输出

一、背景介绍 在现代网络架构中&#xff0c;Nginx 作为一款高性能的 Web 服务器和反向代理服务器&#xff0c;广泛应用于各种场景。除了对 HTTP/HTTPS 协议的出色支持&#xff0c;Nginx 从 1.9.0 版本开始引入了对 TCP 和 UDP 协议的代理功能&#xff0c;这使得它在处理数据库…
阅读更多...
Python - 轻量级后端框架 Flask

Python - 轻量级后端框架 Flask

Flask是什么&#xff1f; Flask是一个轻量级的Python Web框架&#xff0c;用于构建Web应用程序和API。简单、灵活、易扩展&#xff0c;适合小型项目或需要快速开发的应用。 接口的输入和输出 输入&#xff1a;request GET参数、POST JSON数据、POST表单 from flask import…
阅读更多...
＜论文＞MiniCPM：利用可扩展训练策略揭示小型语言模型的潜力

＜论文＞MiniCPM：利用可扩展训练策略揭示小型语言模型的潜力

一、摘要 本文跟大家一起阅读的是清华大学的论文《MiniCPM: Unveiling the Potential of Small Language Models with Scalable Training Strategies》 摘要&#xff1a; 对具有高达万亿参数的大型语言模型&#xff08;LLMs&#xff09;的兴趣日益增长&#xff0c;但同时也引发…
阅读更多...
好玩的谷歌浏览器插件-自定义谷歌浏览器光标皮肤插件-Chrome 的自定义光标

好玩的谷歌浏览器插件-自定义谷歌浏览器光标皮肤插件-Chrome 的自定义光标

周末没有啥事 看到了一个非常有意思的插件 就是 在使用谷歌浏览器的时候&#xff0c;可以把鼠标的默认样式换一个皮肤。就像下面的这种样子。 实际谷歌浏览器插件开发对于有前端编程基础的小伙伴 还是比较容易的&#xff0c;实际也是写 html css js 。 所以这个插件使用的技术…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023