如何通过终端将MERN栈项目部署至Google App Engine？

一、Google App Engine 合并部署流程 #

步骤1：构建React前端静态文件 #

进入frontend目录，执行构建命令生成生产环境静态文件：

npm run build

完成后会得到build文件夹，包含编译后的HTML/CSS/JS资源。

步骤2：整合静态文件到后端 #

将frontend/build文件夹复制到backend目录下，可重命名为public（保持路径统一更易维护）。

步骤3：调整Express后端配置 #

在后端入口文件（如server.js）中添加静态文件服务和SPA路由 fallback，确保前端路由和API请求都能被正确处理：

const express = require('express');
const path = require('path');
const app = express();

// 先配置原有中间件（如body-parser、数据库连接、CORS等）

// 服务前端静态文件
app.use(express.static(path.join(__dirname, 'public')));

// 挂载API路由（需放在静态文件服务之后，避免被覆盖）
app.use('/api', require('./routes/api'));

// SPA路由 fallback：所有非API请求返回前端index.html，解决刷新404问题
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

const PORT = process.env.PORT || 8080;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

注意：前端API请求需改为相对路径（如/api/users），去掉本地代理的localhost:8080前缀。

步骤4：配置app.yaml文件 #

在backend目录下创建/修改app.yaml，配置路由规则：

runtime: nodejs20 # 选择匹配本地环境的Node.js版本（如nodejs18）
env: standard
handlers:
  - url: /api/*
    script: auto # 转发API请求到Node.js后端
  - url: /*
    static_files: public/index.html # 其他请求返回前端入口文件
    upload: public/index.html

步骤5：本地测试整合后的项目 #

进入backend目录，安装依赖并启动服务：

npm install
node server.js

访问http://localhost:8080，验证前端页面正常显示且API请求能返回数据。

步骤6：VS Code终端部署到GAE #

确保已安装并初始化Google Cloud SDK（gcloud命令），在backend目录下执行：

gcloud app deploy

按照终端提示完成身份验证和部署确认即可。

二、简易替代服务推荐 #

如果觉得GAE配置繁琐，这些服务更适合快速部署全栈MERN项目：

• Vercel：支持一键部署React前端，同时可部署Node.js后端（Serverless/边缘函数），本地直接推送部署，免费额度足够个人项目使用。
• Render：支持将静态前端和Node.js服务部署在同一项目下，配置极简，提供免费永久部署额度。
• Netlify：主打静态站点部署，通过Netlify Functions可运行轻量级Node.js后端逻辑，部署流程简单直观。

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