こんにちは。お久しぶりです!プログラマーの山中です。

今回は Disable Drupal 8 caching during development の日本語訳の記事(2017/3/7 更新時点)となります。 Drupal 8 の開発時には必ずやっておいたほうが良い設定ですので参考になれば幸いです。

また、英語は勉強中の身ですので、ニュアンスも含め原文通りの翻訳ではないとは思います。予めご了承ください。正確なニュアンスなどをお知りになりたい場合はこちらからご確認いただければと思います。 Disable Drupal 8 caching during development


テーマやモジュールの開発の際、変更を適用するために Drupal のキャッシュ ( レンダーキャッシュ、 ダイナミックページキャッシュ、 Twig キャッシュ) はクリアしなければなりません。開発におけるキャッシュは無効にすることができます。

もしターミナルが以下のようになるようであれば:

boris-laptop:www boris$ drush cr
Cache rebuild complete.                      [ok]
boris-laptop:www boris$ drush cr
Cache rebuild complete.                      [ok]
boris-laptop:www boris$ drush cr
Cache rebuild complete.                      [ok]
boris-laptop:www boris$ drush cr
Cache rebuild complete.                      [ok]
boris-laptop:www boris$ drush cr
Cache rebuild complete.                      [ok]
Et cetera

以下を試してみてください:

ローカル開発設定を有効にする

2. sites/example.settings.local.php をコピーして sites/default/settings.local.php に名前を変更・設置します。

$ cp sites/example.settings.local.php sites/default/settings.local.php

3. sites/defaultsettings.php を開き、次の行のコメントを外します。:

if (file_exists(__DIR__ . '/settings.local.php')) {
  include __DIR__ . '/settings.local.php';
}

これでローカルの設定ファイルが Drupal の設定ファイルの一部として含まれます。

4. settings.local.php を開き、以下の行のコメントを外し(無ければ追加して) null cache service を有効にします。:

$settings['container_yamls'][] = DRUPAL_ROOT . '/sites/development.services.yml';

development.services.yml にはデフォルトで Drupal のキャッシュを無効にする設定が含まれています:

services:
  cache.backend.null:
    class: Drupal\Core\Cache\NullBackendFactory

注釈: development.services.yml を作成しないでください。それは /sites の下に存在します。

5. settings.local.php の中で有効になっている CSS と JS アグリゲーション を使用する場合は以下の値を TRUE に変更します。: (山中注: アグリゲーション = Drupal 7 にもあった複数の JS ファイル、あるいは複数の CSS を1つのファイルにまとめてくれるやつだと考えていただければ OK です)

$config['system.performance']['css']['preprocess'] = FALSE;
$config['system.performance']['js']['preprocess'] = FALSE;

6. レンダーキャッシュを無効にし、ダイナミックページキャッシュを無効にするには、settings.local.php で以下の行のコメントを外します。:

$settings['cache']['bins']['render'] = 'cache.backend.null';
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';

もしテストモジュールやテストテーマをインストールしたくない場合は以下を FALSE に設定します。:

$settings['extension_discovery_scan_tests'] = TRUE;

7. sites フォルダーの development.services.yml を開き、次のブロックを追加して Twig キャッシュを無効にします。

parameters:
  twig.config:
    debug: true
    auto_reload: true
    cache: false

注釈: もし YML ファイルの中にこのパラメーターブロックが存在する場合は twig.config ブロックを追加します。

8. その後 Drupal キャッシュをリビルドする必要があります。そうしないと、ページリロード時に Web サイト上で予期しないエラーが発生します。これは drush で行うことができます。:

drush cr

あるいは Drupal 8 Web サイトから次の URL にアクセスしてください。

http://YOURSITE/core/rebuild.php

これで定期的に手動でキャッシュをリビルドすることなく Drupal 8で開発が進められるはずです。

最終的に development.services.yml は以下のようになります。 (インデントに気をつけて)

# Local development services.
#
# To activate this feature, follow the instructions at the top of the
# 'example.settings.local.php' file, which sits next to this file.
parameters:
  http.response.debug_cacheability_headers: true
  twig.config:
    debug: true
    auto_reload: true
    cache: false
services:
  cache.backend.null:
    class: Drupal\Core\Cache\NullBackendFactory

( 山中注: ここまで設定が完了したら開発に不要なキャッシュは全て無効化されています )

Drupal コンソールの開発モードを使う

Drupal コンソール を使えばサイトを開発モードに切り替えることができます。:

site:mode コマンドを次のように使用します。:

drupal site:mode dev

コマンドはサイトの services.yml ファイルを上書きし、コンソールの出力ではどのパラメータが変更されたかを表示します。:

$ drupal site:mode dev
 Configuration name: system.performance
 ------------------------- ---------------- ----------------
  Configuration key         Original Value   Override Value
 ------------------------- ---------------- ----------------
  cache.page.use_internal                    false
  css.preprocess            true             false
  css.gzip                  true             false
  js.preprocess             true             false
  js.gzip                   true             false
  response.gzip                              false
 ------------------------- ---------------- ----------------

 Configuration name: views.settings
 -------------------------------- ---------------- ----------------
  Configuration key                Original Value   Override Value
 -------------------------------- ---------------- ----------------
  ui.show.sql_query.enabled        false            true
  ui.show.performance_statistics   false            true
 -------------------------------- ---------------- ----------------

 Configuration name: system.logging
 ------------------- ---------------- ----------------
  Configuration key   Original Value   Override Value
 ------------------- ---------------- ----------------
  error_level         hide             all
 ------------------- ---------------- ----------------


 Services files C:\xampp5629\htdocs\d825/sites/default/services.yml was
 overwritten


 New services settings
 ------------- ------------- -------
  Service       Parameter     Value
 ------------- ------------- -------
  twig.config   auto_reload   true
  twig.config   cache         true
  twig.config   debug         true
 ------------- ------------- -------

 cache:rebuild

 Rebuilding cache(s), wait a moment please.


 [OK] Done clearing cache(s).

$

注釈:

  • settings.phplocal.settings.php は有効にしません。
  • drupal site:mod prod コマンドで元に戻せます。

cache bins を見つける

(※山中注: Cache bins はキャッシュの一時的な格納場所と考えていただければOKです)

使用可能な(ただし必ずしも有効ではない)すべての cache bins を見つけるには:

find . -type f -name *.services.yml | \
xargs sed -E -n  's/.*cache\.(.*):.*/\2/p' | \
grep -v "backend\|html.twig" | \
sort -u | \
awk -vORS=\',\' '{ print $2 }' | \
sed "s/,'$//" | sed "s/^/'/"

OSX では、上記のコマンドを動作させるために、 awk ではなく gawk をインストールして実行する必要があるかもしれないということに注意してください。 brew を使えば gawk をインストールすることができます。:

brew install gawk

次に settings.php ファイルにコピー&ペーストして、次のようにキャッシングを無効にすることができます。:

$cache_bins = array('bootstrap','config','data','default','discovery','dynamic_page_cache','entity','menu','migrate','render','rest','static','toolbar');
foreach ($cache_bins as $bin) {
  $settings['cache']['bins'][$bin] = 'cache.backend.null';
}

キャッシュされた応答ヘッダーを無効にする

HTTP ヘッダーにキャッシュされたレスポンスヘッダー: Expires と Request Headers:Cache-Control が含まれている場合は、開発中にレスポンスヘッダーを無効にするとよいでしょう。:

MAMP 5+ では、 Apache の設定の cache_module をオフにします。 Apache を再起動する際に問題が発生した場合は、 disk_cache_modulemem_cache_module も無効にする必要があります。 MAMP 4+ を閉じて再度開きます。

ブラウザのキャッシュを無効化する

Drupal がキャッシュしなくても、ブラウザはキャッシュします。設定ファイル内のすべてのキャッシュの設定を無効にして、ウェブページのリロード後に CSS の変更が表示されない場合、混乱するかもしれません。たとえば、Google Chromeでは、開発ツールが開かれている間にキャッシュを無効にすることができます:

図: ブラウザの Google Chrome でブラウザのキャッシュ機能を無効化する2 図: ブラウザの Google Chrome でブラウザのキャッシュ機能を無効化する3


いかがでしたでしょうか。開発時には ローカル開発設定を有効にする セクションと、 ブラウザのキャッシュを無効化する セクションの内容を対応すればキャッシュをリビルドすることなく開発が進められるはずです。


共に働く新しい仲間を
募集しています

スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート&フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎!ぜひお気軽にご連絡ください。