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

我正在使用ExpressJS和EJS视图引擎开发一个web应用程序，它将部署在AWS Amplify上。在localhost中一切正常，但在Amplify上部署静态文件（css、js）时会遇到加载问题。该问题的详情如下所述：

1。问题描述：

|   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

• 在Amplify上，网站的根路径（/index）工作正常，静态文件被加载
• 但是当我转到另一个路径（例如/register）时，它无法加载静态文件
• 我注意到在加载静态文件时，路径名会自动添加到静态文件的所有路径中（在这种情况下，添加了

  /register

  ：真实路径为

  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（'public'））；

• 在register.ejs中，我当前设置了指向静态文件的链接，如下所示：

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

“build”：“del cli dist&&mkdir dist&&ncp public dist&&ncp views dist&©files app.js dist&©files package.json dist”

• 我使用Github存储我的源代码，并使用AWS Amplify Console部署我的应用程序，方法是创建一个应用程序并将其连接到Github存储库。此方法允许在我进行更改并推送到Github时始终重新部署我的应用程序。

  Amplify.yaml

  中的配置为：

前端：
阶段：
预构建：
命令：
-npm ci
建造：
命令：
-npm运行构建
人工产品：
基本目录：dist
文件夹：
- '**/*'
隐藏物：
路径：
-节点单元/**/*

3.我所做的尝试：我在stackorverflow上读了很多文章，并采纳了他们的建议，但没有任何效果

• 我已尝试将

  '/'

  或

  '../'

  添加到静态文件的链接中：

• 我试图通过前面提到的特定路径
• 我还尝试为公共文件夹（如资产、全局文件夹）设置静态，但没有更好的设置
• 我还将所有视图从views文件夹移动到public文件夹，并在源代码中更改视图设置，但结果仍然相同：在localhost中一切正常，但部署到AWS Amplify时失败。

---

如何解决此问题？如果您能提供任何建议，我将不胜感激。非常感谢！

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

---

您可以查看一下

您真正自动添加的路径名是什么？自动添加的路径名是否与您的项目文件夹名称或域或其他内容匹配？您的

应用程序集（'views'，'？？？'）是什么

@JackYu嗨，添加的

路径名与我路由到的视图名匹配，例如
/register
或
/login
视图
设置为
app.set（'views'，path.join（'views'））；
但我更改为
app.set（'views'，path.join（'dist'）；
仍然不起作用：）谢谢你的解决方案。我已经尝试过这个解决方案，但是当我像你说的那样在
dist
中创建文件夹结构时，Amplify将返回错误502错误，请求无法满足。正如我在构建日志中检查的那样，这个错误的原因是
index.html
不在
dist
文件夹中，我认为放大需要
index.html
在
dist
文件夹中，而不是在
dist
的任何子文件夹中。如果我将
index.html
移动到根文件夹，如
app.js
，即使在localhost中也无法加载主页。AWS Ampify是静态web托管服务（仅前端），不适用于nodejs+ejs。我认为你应该把你的网站放进EC2，而不是ampify。你也许可以看一看，但我不明白为什么我使用
.html
格式的所有视图，并将它们放在
公共
文件夹中，但仍然使用Express router时它会起作用。我会找到另一种方法，或者将
.html
与Express一起使用，因为我必须在无服务器环境中部署我的web应用程序。非常感谢@Jack Yu，因为您使用了
app.use（express.static（path.join（uu dirname，'public'））在express中，express将公开您分配的公用文件夹中的资源。将abc.html放入公用文件夹后，可以访问/abc.html。