NodeJS 部署一个Express服务器,该服务器使用express.static为Vercel提供构建文件夹

dced5bon  于 2022-12-12  发布在  Node.js
关注(0)|答案(2)|浏览(226)

我已经实现了一个express服务器,它使用express.static来服务从静态docusaurus站点创建的build文件夹,以便应用基本身份验证来访问该站点。这在本地运行得很好,但在部署到Vercel时遇到了麻烦。
目前,我的配置允许vercel上的部署版本呈现基本的身份验证登录页面,但在成功登录后,我被定向到一个页面,该页面显示:“无法获取/”
我相信这可能是我的vercel.json配置或我的vercel模板设置的问题。
我的代码如下:

索引.mjs

import express from 'express';
import dotenv from 'dotenv';

dotenv.config();

const app = express();

app.use(express.json());

const authorize = ((req, res, next) => {

    const auth = {login: process.env.USERNAME, password: process.env.PASSWORD}

  
    const b64auth = (req.headers.authorization || '').split(' ')[1] || ''
    const [login, password] = Buffer.from(b64auth, 'base64').toString().split(':')
  
    
    if (login && password && login === auth.login && password === auth.password) {
     
      return next()
    }
  
    res.set('WWW-Authenticate', 'Basic realm="401"') 
    res.status(401).send('Authentication required.') 
});

app.use('/', authorize);
app.use('/', express.static('build'));

app.listen(3000);
console.log(`🚀 Server ready at http://localhost:3000`);

马塞尔.杰森

{
  "version": 2,
  "builds": [{
    "src": "./index.mjs",
    "use": "@vercel/node"
  }],
  "routes": [{"handle": "filesystem"},
    {
      "src": "/.*",
      "dest": "/"
    }
  ]
  

}

软件包.json -启动脚本

"start": "node --experimental-modules index.mjs",

我的vercel模板设置为other,启动脚本设置为npm start。
如有任何想法,将不胜感激!

ct2axkht

ct2axkht1#

我也遇到过类似问题:提供一些静态内容并使用/API路由。在本地开发中一切正常,但在vercel中抛出“Cannot GET/”。

我的解决方案。

  • 分别构建无服务器内容和静态内容。
  • /API调用和静态内容的路由调整。

我最后的vercel.json

{
    "version": 2,
    "builds": [
        {
            "src": "server.js",
            "use": "@vercel/node"
        },
        {
            "src": "public/**",
            "use": "@vercel/static"
        }
    ],
    "routes":[
        {
            "src": "/api/(.*)",
            "dest": "server.js"
        },
        {
            "src": "/",
            "dest": "public/index.html"
        },
        {
            "src": "/(.+)",
            "dest": "public/$1"
        }
    ]
}

备注

1.所有静态内容都在/public下(html、css、img、js等)

  1. server.js是主要应用程序:快车和路线的定义和你的差不多。
  2. vercel构建日志显示:
Generated build outputs:    
12:28:55.974     - Static files: 12
12:28:55.974     - Serverless Functions: 1
12:28:55.975     - Edge Functions: 0
...
12:28:58.142    Done with "server.js"

也许从这一点上你可以找到一个解决你的情况。

k2arahey

k2arahey2#

好的,我一直在寻找这个问题的解决方案,结果发现我们必须在express中显式地提供index.html:

app.get('/', (req: Request, res: Response) => {
  res.sendFile('index.html', {root: path.join(__dirname, 'public')});
});

因为您可能在公共文件夹中有index.html。这就为我解决了这个问题。

相关问题