Webページ制作の受託案件などで既存ページを改修して欲しいという場合で、サイト共通で使用されるcssファイルやjsファイルなどがルートパスで読み込まれているケースがあったりしますが、サイト共通のファイルは書き換えないので本番環境のファイルをコード自体は変えずにそのまま読み込みたいということがあると思います。そんな時にルートパスのままで開発環境から本番環境のファイルを読み込む方法を備忘録的に書いていきたいと思います。（.htaccessを利用するので、WebサーバはApacheを想定しています）

ルートパスで読み込まれているhoge.js

hoge.html

<script type="text/javascript" src="/hogedir/common/js/hoge.js"></script>

通常、ルートパスで読み込んでいるので、自身の開発環境のドキュメントルートの階層から/hogedir/common/js/hoge.jsを読み込みにいってしまいます。なので、本番環境のファイルを読み込ませるためには、読み込みファイルを書き換える必要があります。

.htaccessを使ってRewrite（リライト）

ルートパスで書かれているパスを.htaccessを使って書き換えることで本番環境のファイルを読み込ませることができます。ドキュメントルートに.htaccessファイルを作成して処理を書いていきます。

ルートパスで読み込まれるファイル全てを書き換えたい場合

読み込みファイルのパスにhogedirが含まれている各ファイルを本番環境へ

RewriteEngine on
RewriteRule ^(hogedir.*)\.((gif|png|jpe?g|css|ico|js|svg))$ https://{本番環境のドメイン}/$1.$2

上記コードで、パスにhogedirが含まれているgif,png,jpg,jpeg,css,ico,js,svgのファイル全てを本番環境へ読み込みにいくように変更させることができます。

特定のファイルは除外して開発環境のファイルを読み込ませたい場合

除外して開発環境から読み込ませるファイル

<!-- ファイルのパスは/var/www/html/devdir/hogedir/hogehoge.js -->
<script type="text/javascript" src="/hogedir/hogehoge.js"></script>

特定のファイルを除外したい場合は、RewriteCondディレクティブを使ってリライトのルール条件を追加させます。

/hogedir/hogehoge.jsを除外する場合

RewriteEngine on
#hogehoge.jsの除外をして、それ以外を本番環境のファイル読み込みにする
RewriteCond %{REQUEST_URI} !hogehoge.js$
RewriteRule ^(hogedir.*)\.((gif|png|jpe?g|css|ico|js|svg))$ https://{本番環境のドメイン}/$1.$2

#hogehoge.jsを/var/www/html/devdir/hogedir/から読み込むように書き換え
RewriteCond %{REQUEST_URI} hogehoge.js$
RewriteRule ^(hogedir.*)\.((gif|png|jpe?g|css|ico|js|svg))$ /var/www/html/devdir/$1.$2

参考

.htaccess の書き方（リダイレクト編） - Qiita