我正在使用 Express JS 和 EJS 视图引擎开发一个 Web 应用程序,它将部署在 AWS Amplify 上。在 localhost 中一切正常,但在 Amplify 上部署静态文件(css、js)时出现问题。这个问题的详细描述如下:
1.问题描述:
- 在 Amplify 上,网站的根路径 ( /index ) 工作正常,并且加载了静态文件 ___.amplifyapp.com/
- 但是当我转到另一条路径(例如/register)时,它无法加载静态文件___.amplifyapp.com/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(__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>
- 我试图通过这篇文章提到的特定路径
- 我还尝试为公共文件夹设置静态,例如资产,全局但没有更好的
- 我还将所有视图从视图文件夹移动到公用文件夹并更改源代码中的视图设置,但结果仍然相同:在 localhost 中一切正常,但在部署到 AWS Amplify 时失败。
我该如何解决这个问题?我会很感激你的任何建议。非常感谢!