Azure 服务器找不到车把视图

Question

我使用车把在我的服务器上生成 html，并在用户降落在我的快速路线上时将其发送给他们。我的路线看起来像这样：

userRouter.get(
    '/template-reset-password/:from',
    async (req: Request, res: Response) => {
        return res.status(200).render('reset-password', { data: req.data });
    },
);

我已经设置了我的 Express 服务器来接受 handleBars 文件作为我的视图引擎。这是我的 index.ts 文件中的代码：

app.engine(
    'handlebars',
    engine({
        defaultLayout: false,
        layoutsDir: `${__dirname}/public/html`,
    }),
);
app.set('view engine', 'handlebars');
app.set('views', `${__dirname}/public/html`);

在我的本地计算机上，当我尝试访问此路由时，我的服务器正常向我发送 html，并且我的服务器可以找到存储我的车把文件的目录。但是，当我在 Azure 上托管的临时服务器上使用相同的代码时，服务器找不到文件并向我发送此错误：

Error: Failed to lookup view "reset-password" in views directory "/usr/src/server/public/html"
    at Function.render (/usr/src/server/node_modules/express/lib/application.js:597:17)
    at ServerResponse.render (/usr/src/server/node_modules/express/lib/response.js:1039:7)
    at /usr/src/server/adapters/primary/routes/user.route.js:114:28
    at Generator.next (<anonymous>)
    at /usr/src/server/adapters/primary/routes/user.route.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (/usr/src/server/adapters/primary/routes/user.route.js:4:12)
    at /usr/src/server/adapters/primary/routes/user.route.js:111:268
    at Layer.handle [as handle_request] (/usr/src/server/node_modules/express/lib/router/layer.js:95:5)
    at next (/usr/src/server/node_modules/express/lib/router/route.js:144:13)

我认为这可能与我的 azure 服务器配置不接受 .handlebar 文件类型并向我发送“未找到”错误有关。由于我是 azure 的新手，因此我希望获得有关如何解决此错误的深入解释。预先感谢。

编辑：在我对项目进行更改之前，有一些 html 文件运行得很好。但是，当我将这些文件更改为 .handlebars（也尝试使用 .ejs 扩展名）时，这些文件无法再在我的 azure 服务器上访问。

Answer 1

• 错误消息表明您的 Express 应用程序无法在指定的视图目录中找到

  reset-password

  视图，无法处理文件路径以及如何配置它来识别

  .handlebars

  文件。

• 检查

  index.ts

  文件中的文件路径。 Azure 环境可以有不同的基本目录，因此您应该使用

  path.join

  来构建文件路径。这确保了不同环境之间的兼容性。

index.ts：

import express from 'express';
import path from 'path';
import { engine } from 'express-handlebars';

const app = express();

app.engine('handlebars', engine({
    defaultLayout: false,
    layoutsDir: path.join(__dirname, '..', 'public', 'html'), // Correct path handling
}));
app.set('view engine', 'handlebars');
app.set('views', path.join(__dirname, '..', 'public', 'html'));

// Import and use routes
import userRouter from './routes/user.route';
app.use('/user', userRouter);

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

• 确保项目的

  reset-password.handlebars

  目录中存在

  /public/html

  文件。

用户.route.ts：

import { Router, Request, Response } from 'express';

const userRouter = Router();

userRouter.get('/template-reset-password/:from', async (req: Request, res: Response) => {
    console.log('Views directory:', req.app.get('views')); // Logging the views directory
    console.log('Trying to render: reset-password');
    return res.status(200).render('reset-password', { data: req.params.from });
});

export default userRouter;

• Azure 的文件系统区分大小写。确保文件名

  reset-password.handlebars

  与渲染调用中的大小写完全匹配。
• 确保您的部署过程正确包含所有必需的文件。
• 如果部署到 Windows 上的 Azure 应用服务，请在项目根目录中包含以下

  web.config

  文件。

web.config：

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".handlebars" mimeType="text/html" />
        </staticContent>
    </system.webServer>
</configuration>