4

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 リポジトリに接続することで、Github を使用してソースコードを保存し、AWS Amplify コンソールを使用してアプリケーションをデプロイします。この方法により、変更を加えて 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 にデプロイすると失敗しました。

この問題を解決するにはどうすればよいですか? アドバイスをいただければ幸いです。本当にありがとう！

4

1 に答える 1