インストール後、画像とスタイルシートは読み込まれません。テキストのみが表示され、グラフィックは表示されません
この記事では、Adobe Commerceのインストール後にスタイルシートと画像が読み込まれない問題の理由と解決策について説明します。
影響を受ける製品とバージョン
- Adobe Commerce 2.2.x, 2.3.x#キョウジ 2.2.x#
- Magento Open Source2.2.x, 2.3.x
問題
再現手順
- Adobe Commerceをインストールします。
- ストアフロントまたは管理者に移動します。
期待される結果
スタイルが適用されます。スタイルが見つからないような UI 要素はありません。
実際の結果
スタイルが正しく適用されず、グラフィックが欠落している。
原因：
ベース URL が正しくないか、サーバーの書き換え（CentOS、Ubuntu）が正しく設定されていないので、画像とスタイルシートへのパスが正しくありません。
その場合は、web ブラウザー検査を使用して静的アセットへのパスを確認し、それらのアセットがAdobe CommerceまたはMagento Open Sourceのファイルシステム上にあることを確認します。
静的アセットは、frontend ディレクトリと adminhtml ディレクトリ内の <magento_root>/pub/static/ の下にあります。
解決策
使用しているソフトウェアと問題の原因に応じて、次のような解決策が考えられます。
-
Apache web サーバーを使用している場合は、server rewrites の設定と、Adobe Commerce/Magento Open Sourceサーバーのベース URL を確認して、もう一度試してください。 Apache
AllowOverrideディレクティブの設定が正しくない場合は、静的ファイルが正しい場所から提供されません。 -
nginx web サーバを使用している場合は、必ず 仮想ホスト ファイルを設定してください。 nginx 仮想ホストファイルは、次の条件を満たす必要があります。
includeディレクティブは、Adobe Commerce/Magento Open Sourceのインストールディレクトリにあるサンプル nginx 設定ファイルを指している必要があります。 例：include /var/www/html/magento2/nginx.conf.sample;server_nameディレクティブは、Adobe Commerce/Magento Open Sourceをインストールするときに指定したベース URL と一致する必要があります。 例：server_name 192.186.33.10;
-
アプリケーションが 実稼動モードの場合は、
magento setup:static-content:deployコマンドを使用して静的ビューファイルをデプロイしてみてください。 静的ファイルのデプロイについて詳しくは、開発者ドキュメントの 静的ビューファイルのデプロイを参照してください。