Nuxt 3 + Laravel 网站上线部署及相关技术问题咨询

1. Nuxt 3网站的公网部署流程 #

根据你npm run build后的产物结构，这是Nuxt 3基于Nitro引擎的服务端渲染（SSR）或混合渲染产物，部署分两种场景：

• SSR/混合渲染部署
  1. 将build输出的public、server、nitro.json全部上传至支持Node.js环境的托管平台
  2. 在托管平台配置启动命令：node server/index.mjs（路径可根据平台要求微调）
  3. 配置环境变量（如前端调用API的地址NUXT_PUBLIC_API_BASE_URL）
  4. 启动服务，平台会自动处理请求路由
• 纯静态站点部署
  1. 修改nuxt.config.ts，设置ssr: false切换为纯静态模式，或直接执行npm run generate生成静态文件
  2. 生成的静态文件存放在.output/public目录，将该目录下所有内容上传至静态托管平台
  3. 配置平台指向静态文件根目录即可

2. 普通托管是否适用？需进行哪些配置？ #

普通托管是否适用取决于平台类型：

• 静态托管平台：仅支持纯静态文件的平台无法直接部署默认build产物，需按上述纯静态部署场景配置：
  • 开启ssr: false或执行npm run generate生成带index.html的静态文件
  • 上传.output/public目录内容到平台
• 支持Node.js的普通托管（如带Node环境的虚拟主机、轻量应用服务器）：可直接部署SSR产物，需配置：
  • 确保平台Node.js版本符合Nuxt 3要求（建议v18及以上）
  • 上传build全量文件，设置启动命令为node server/index.mjs
  • 平台通常会自动处理端口映射，若需手动配置则指定对应端口
• Git快速同步配置：
  • 将Nuxt代码托管到Git仓库
  • 在托管平台配置Git自动部署：指定仓库地址、目标分支，设置触发条件（如push到main分支自动构建）
  • 静态部署场景下，可在平台构建命令中添加npm install && npm run generate，自动生成并部署静态文件

3. 如何部署Laravel后端API？ #

Laravel API部署遵循常规PHP项目流程：

• 上传Laravel项目代码到支持PHP 8.0+、MySQL的托管平台
• 配置环境变量：复制.env.example为.env，生成并设置APP_KEY（执行php artisan key:generate --force）、填写数据库连接信息、设置APP_URL为API的访问地址
• 安装依赖：执行composer install --optimize-autoloader --no-dev
• 执行数据库迁移：php artisan migrate --force
• 配置Web服务器：将Nginx/Apache的根目录指向Laravel项目的public目录，确保所有请求转发到index.php
• 可选：若项目用到存储功能，执行php artisan storage:link创建软链接

4. 部署后是否仍为独立站点？如何访问？是否需外部域名？ #

• 部署后Laravel API仍为独立站点，与Nuxt前端完全分离
• 访问方式：
  • 子域名方案：配置api.yourdomain.com这类子域名，在域名服务商处添加A记录指向API服务器IP，再在Web服务器绑定该子域名
  • 同域名路径方案：通过Nginx反向代理，将yourdomain.com/api前缀的请求转发到Laravel API服务器
• 域名需求：无需额外外部域名，使用已有的主域名即可，通过子域名或路径区分前端和API
• 注意：需在Laravel的config/cors.php中配置允许前端域名的跨域请求，确保allowed_origins包含Nuxt站点的访问地址

内容的提问来源于stack exchange，提问作者nup