如何在Vercel/Netlify/Cloudflare正确部署weather-app项目？

核心问题纠正 #

你的项目是Node.js Express服务端项目，不是静态站点。之前配置Output Directory为public是错误的——public仅为静态资源目录，整个项目需要运行Node服务处理请求，需按Node服务类型配置平台参数。

package.json 修改建议 #

需要新增生产环境构建脚本，整合Tailwind CSS编译与PWA资源生成步骤，确保部署时静态资源就绪。修改后的scripts字段如下：

"scripts": {
  "start": "node ./bin/www",
  "dev": "nodemon ./bin/www",
  "tailwind dev": "npx tailwindcss -i ./src/css/input.css -o ./public/css/style.css --watch",
  "tailwind build": "npx tailwindcss -i ./src/css/input.css -o ./public/css/style.css --minify",
  "workbox build": "npx workbox-cli generateSW workbox-config.js",
  "build": "yarn tailwind build && yarn workbox build"
}

新增的build脚本会在部署阶段自动完成静态资源编译与PWA配置生成。

依赖补充说明 #

部分平台（如Cloudflare Pages）默认仅安装dependencies，若build脚本用到devDependencies中的包（如tailwindcss、workbox-cli），需二选一处理：

• 将上述依赖从devDependencies移至dependencies；
• 设置安装命令为yarn install --production=false，强制安装所有依赖。

各平台具体配置 #

Vercel #

1. Framework Preset：选择Other（或留空）
2. Install Command：留空（Vercel自动执行yarn install）
3. Build Command：yarn build
4. Output Directory：留空（无需指定，非静态站点）
5. Start Command：yarn start
6. 额外配置：若需指定Node版本，在项目根目录创建.nvmrc文件（如写入v18.x），Vercel会自动匹配。

Netlify #

1. Framework Preset：选择Node.js
2. Build Command：yarn build
3. Publish Directory：留空（不要填public）
4. Start Command：yarn start
5. 额外配置：
   • 若项目使用dotenv，在Netlify后台Site Settings > Build & Deploy > Environment中添加对应环境变量；
   • 确保Express服务监听端口为process.env.PORT（你的bin/www中已默认配置normalizePort(process.env.PORT || '3000')，符合要求）。

Cloudflare Pages #

1. Framework Preset：选择None
2. Install Command：yarn install --production=false（若依赖在devDependencies中）
3. Build Command：yarn build
4. Output Directory：留空
5. 额外配置：
   • Cloudflare Pages需通过Pages Functions托管Express服务，在项目根目录创建functions/[[path]].js文件，内容如下：

     import express from 'express';
     import app from '../app.js'; // 导入你的Express app实例
     
     const server = express();
     server.use(app);
     
     export function onRequest(context) {
       return new Promise((resolve) => {
         server(context.request, context.response, () => resolve(context.response));
       });
     }
     

   • 确保Express服务不监听固定端口，而是交由Cloudflare处理（你的现有代码已满足此要求）。

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