使用 EJS 的 ExpressJS 在 AWS Amplify 上部署时无法加载静态资产

Posted 2023-02-19

【中文标题】使用 EJS 的 ExpressJS 在 AWS Amplify 上部署时无法加载静态资产

【英文标题】：ExpressJS using EJS fail to load static assets when deployed on AWS Amplify

【发布时间】：2021-03-08 09:42:38

【问题描述】：

我正在使用 Express JS 和 EJS 视图引擎开发一个 Web 应用程序，它将部署在 AWS Amplify 上。在 localhost 中一切正常，但在 Amplify 上部署静态文件（css、js）时出现问题。该问题的详细描述如下：

1.问题描述：

在 Amplify 上，网站的根路径 (/index) 工作正常，并且加载了静态文件 ___.amplifyapp.com/ 但是当我转到另一个路径（例如/register）时，它无法加载静态文件___.amplifyapp.com/register 我注意到在加载静态文件时，路径名会自动添加到静态文件的所有路径中（在本例中为 /register添加了 em>：真正的路径是 https://myuser.amplifyapp.com/global/js/Base.js/ 而不是 https://myuser.amplifyapp.com/register/global/js/Base.js/)

2。我的源代码结构是这样的：

|   app.js
|   package-lock.json
|   package.json
+---bin
+---dist
|   |   app.js
|   |   error.ejs
|   |   index.html
|   |   package.json
|   |   register.ejs
|   |   verify.ejs
|   +---assets
|   +---global
|   +---javascripts
+---node_modules
+---public
|   +---assets
|   +---global
|   +---javascripts
|   index.html
+---routes
\---views

在 app.js 中，我已经为 'public' 设置了静态文件夹：

app.use(express.static(path.join(__dirname, 'public')));

在 register.ejs 中，我目前将链接设置为静态文件，如下所示：

<link rel="stylesheet" href="global/vendor/animsition/animsition.css">
<script src="global/vendor/animsition/animsition.js"></script>

我在 package.json 中设置的构建命令（它复制了部署所需的所有文件和文件夹）：

"build": "del-cli dist && mkdir dist && ncp public dist && ncp views dist && copyfiles app.js dist && copyfiles package.json dist"

我使用 Github 存储我的源代码并使用 AWS Amplify 控制台部署我的应用程序，方法是创建一个应用程序并将其连接到 Github 存储库。这种方法允许我在进行更改并推送到 Github 时始终重新部署我的应用程序。 amplify.yaml 中的配置是：

frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

3.我的尝试：我在 stackorverflow 中阅读了很多问题并遵循了他们的建议，但没有任何效果。

我已经尝试将'/' 或'../' 添加到静态文件的链接中：

<link rel="stylesheet" href="/global/vendor/animsition/animsition.css">
<script src="/global/vendor/animsition/animsition.js"></script>

我试图通过this post 提到的特定路径 我还尝试为 public 中的文件夹设置静态，例如 assets、global，但没有更好的方法 我还将所有视图从 views 文件夹移动到 public 文件夹并更改源代码中的视图设置，但结果仍然相同：

Everything在 localhost 中运行良好，但在部署到 AWS Amplify 时失败。

我该如何解决这个问题？我会很感激你的任何建议。非常感谢！

【问题讨论】：

您真正自动添加的路径名是什么？自动添加的路径名是否与您的项目文件夹名称或域或其他内容匹配？你的app.set('views', '???')是什么@

@JackYu 嗨，pathname 添加与我路由到的视图名称匹配，例如/register 或 /login。 views 设置为 app.set('views', path.join(__dirname, 'views')); 但事件我更改为 app.set('views', path.join(__dirname, 'dist')); 它仍然不起作用:)

【参考方案1】：

AWS Amplify 是静态 Web 托管服务（仅限前端），不适用于 nodejs + ejs。 这意味着您无法在 amplify with express 中创建具有特定端口号的服务器，但 amplify 允许您使用 express 构建 REST api 但不能渲染页面。 我认为您应该将您的网站放入 EC2，而不是放大。 你可以看看Amplify faqs

【讨论】：

感谢您的解决方案。我已经尝试过这个解决方案，但是当我像你说的那样在dist 中创建文件夹结构时，Amplify 将返回错误 502 ERROR The request could not be compatible. 当我在构建日志中检查时，此错误的原因是index.html 不在dist 文件夹中，我认为Amplify 需要index.html 在dist 文件夹中，而不是在dist 的任何子文件夹中。如果我将index.html 移动到像app.js 这样的根文件夹，即使在本地主机中也无法加载主页。

AWS Ampify 是静态 Web 托管服务（仅前端），不适用于 nodejs + ejs。我认为您应该将您的网站放入 EC2，而不是 ampify。你可以看看aws.amazon.com/amplify/faqs

可能，但我不明白为什么当我使用.html 形式的所有视图并将它们放在public 文件夹中并仍然使用 Express 路由器时它会起作用。我会找到另一种方式，或者将 .html 与 Express 一起使用，因为我必须在无服务器环境中部署我的 Web 应用程序。非常感谢@Jack Yu

因为你在express中使用app.use(express.static(path.join(__dirname, 'public')));，express会将你分配的public文件夹中的资源公开。将 abc.html 放入公用文件夹后，即可访问 /abc.html。