Angular SSR 在生产中“查找视图失败”（Ubuntu、Nginx）答案

【问题标题】：Angular SSR 'Failed to lookup view' on production (Ubuntu, Nginx)Angular SSR 在生产中“查找视图失败”（Ubuntu、Nginx）
【发布时间】：2018-09-13 09:23:23
【问题描述】：

按照官方 Angular 教程使用 Express 服务器设置 SSR： https://angular.io/guide/universal#configure-for-universal

本教程将设置如下路径：

...
const DIST_FOLDER = join(process.cwd(), 'dist');
...
app.set('views', join(DIST_FOLDER, 'browser'));

这在本地服务器上运行良好。

但是一旦部署在服务器上（由 Nginx 提供支持），就会出现错误：

错误：无法在视图目录中查找视图“索引” “/home/user_name/dist/浏览器” 在 Function.render (/var/proj_name/server.js:44670:17) 在 ServerResponse.render (/var/proj_name/server.js:53701:7) 在 /var/proj_name/server.js:121:9 在 Layer.handle [as handle_request] (/var/proj_name/server.js:46582:5) 在下一个（/var/proj_name/server.js:46330:13）在 Route.dispatch (/var/proj_name/server.js:46305:3) 在 Layer.handle [as handle_request] (/var/proj_name/server.js:46582:5) 在 /var/proj_name/server.js:45805:22 在参数 (/var/proj_name/server.js:45878:14) 在参数 (/var/proj_name/server.js:45889:14)

如何正确处理此问题，以便应用在本地（用于开发）和生产服务器上正常运行？

编辑：

也尝试过改用__dirname：

app.get('.', express.static(join(__dirname, 'browser')));

但这在本地和生产服务器上都失败了：

错误：无法在视图目录“/browser”中查找视图“索引”

EDIT2：

我已经设法通过将browser 文件夹移动到~/dist/browser 来完成这项工作。但我不希望应用以这种方式工作。

看起来失败的代码在 server.ts 中：

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', { req });
});

在本地运行时，const DIST_FOLDER = join(process.cwd(), 'dist'); 返回正确的输出。但是，当在真实服务器（Ubuntu，Nginx）上运行时，它会得到：/home/<user_name>/dist/browser。使用 __dirname 没有帮助。

所以需要一些方法来确保res.render('index', { req }); 获得正确的资源。

【问题讨论】：

通过 nginx 服务时，browser 目录的完整路径是什么？
@David 它是：/var//browser。添加 EDIT2 以获得更多发现。
您是否运行 2 个单独的节点实例？一种用于开发，另一种用于使用 nginx 进行测试？如果是这样并且如果你想使用process.cwd，你应该从/var/<project_name>/browser.运行节点
在本地我运行了与文章中相同的设置：angular.io/guide/universal#configure-for-universal。在远程服务器（托管公司提供的 VPS）上，我在 localhost:4000 中运行应用程序，然后使用 Nginx proxy_pass 并为网站用户提供应用程序。
您需要从您的项目根目录启动 pm2 命令...否则process.cwd 将解析为~（或/home/username）

标签： angular express nginx angular-universal server-side-rendering

【解决方案1】：

使用以下代码

const DIST_FOLDER = join(process.cwd(), 'dist');
app.set('views', join(DIST_FOLDER, 'browser'));

表示视图引擎会在这个目录中寻找视图：<currentWorkingDirectory>/dist/browser

因此，如果您希望您的代码在本地和 prod 环境中以相同的方式工作（使用 nginx），您需要确保您启动节点的目录始终是 dist/browser 目录的父目录

所以你应该从/var/<project_name>/运行node（或pm2）

【讨论】：

但是没有名为browser的文件夹？