Magento2 では静的ファイル（CSS, JavaScript, 画像, フォント等）の配置場所が改められました。
それに伴い、Magento1.x の時とはWebサーバーの設定だけでなく、運用時の注意点も増えています。

このエントリでは、静的ファイルの配置がどのように改められ、かつ環境構築時と運用時にどのように気をつけるべきかについて解説します。

静的ファイルは全て pub ディレクトリに集約

Magento2 では、静的ファイルは全て pub ディレクトリ以下に集約されることになりました。

  • pub/media
  • pub/static

という2つのディレクトリが主に静的ファイルを格納し、配信する役割を担っています。

Magento1.x では

  • skin
  • js
  • media

だったものが1つのディレクトリ配下に集約されたと考えてもらえればよいでしょう。

pub/media と pub/static の役割

さて、2つの新設されたディレクトリは、明確に役割が異なります。

pub/media

pub/media には

  • 商品画像
  • カテゴリの見出し画像
  • WYSIWYGエディタを介してアップロードされた画像
  • ダウンロード商品のファイル

などが格納されます。Magento1.x のmedia ディレクトリと同じ役割と思ってもらえればよいでしょう。

pub/static

pub/static にはテーマを構成する以下のファイルが格納されます。

  • CSS
  • JavaScript
  • 画像
  • フォント
  • JavaScript のテンプレート

Magento2 で新しく導入された要素としては、JavaScript のテンプレートでしょう。
これは Knockout.js というライブラリを Magento2 が利用しているために必要になったものです。

動作モードとデプロイの必要性

Magento2 には下記の表の通り、動作モードがあります。

 defaultdeveloperproduction
エラー出力 なし あり なし
コード自動生成 あり あり なし
クラスの定義 リフレクションベース リフレクションベース 事前コンパイル
静的ファイルの配信 あり あり 事前配信
ページキャッシュデバッグ情報 なし あり なし
設定ファイルの検証 なし あり なし
テーマの自動登録 あり あり なし

developer モードで Magento2 を動かしている間は問題ないのですが、production モードで動かす場合は注意が必要です。
pub/static 以下に配置されるコンテンツは、magento コマンドで setup:static-content:deploy をしないと更新されません。
もともと production モードの場合は他の定義データも動的に更新されないようになっているので、運用時の手順をどうするかよく検討しておく必要があるでしょう。

developer モードで pub/static のファイルが更新されない場合は

開発をしている最中に、時折静的ファイルの更新をしたにもかかわらず、反映が行われない場合があります。
このようなときは、Magentoの管理画面から、「静的ファイルのキャッシュ」をクリアすると良いでしょう。