はじめに

IntelliJ IDEAやWebStormなどJetbrains製のIDEを用いてwebページを開発する際にルートパスを使う方法です。
筆者の環境はIntelliJ IDEAですが、WebStormなどにも一部通じるところがあるかと。

TL;DR

IntelliJ IDEAで開発しているWebページでルートパスを使おうとしたら次の2つの問題が発生した。

コード補完でパスが通らない
LiveEdit機能を使用したデバッグでパスが通らない

次の2点の設定又は変更により解決した。

ドキュメントルートに設定したいディレクトリを右クリックし、Mark Directory as > Sources Rootと設定する
内蔵サーバーではなくnginxによるローカルサーバーを使用する

背景

IntelliJ IDEAで開発しているWebページでルートパスを使おうとしたら事故った。

ディレクトリ構造が大きく関わってくるので具体的な内容の前にディレクトリ構造を…
プロジェクトルートとドキュメントルートが異なるのが諸悪の根源です。

project/ #プロジェクトルート
 ├ .idea/
 ├ public/ #ドキュメントルート
 ├ .gitignore
 └ project.iml

で、本題の事故の内容はこんな感じです。

コード補完でパスが通らず怒られる
LiveEdit機能を使用したデバッグでパスが通らない

環境

Windows10 Pro
IntelliJ IDEA 2019.3.1 (Ultimate Edition)
nginx 1.16.1

コード補完でパスが通らず怒られる

概要

IntelliJ IDEAではコード補完機能で、(デフォルトでは)プロジェクトルートからのパスを自動補完してくれます。
また、その際存在しない(パスの通らない)ファイルを参照しようとするとエラーを出して知らせてくれます。

しかし、今回のディレクトリ構造では、プロジェクトルートとドキュメントルートが異なるため、ルートパスで正しいパスを記述しても、上手く認識されず、パスが通らないと判断され、エラー表示が出ます。

解決方法(WebStorm/PHPSrorm向け)

こちらの記事によると、/public/をResource Rootとして設定すればいいとのこと。
具体的には、Project Structure > Project Settings > Modulesにて/public/をResource Root(紫色のアイコン)に設定する感じです。

なお、IntelliJ IDEAでは、このように設定するも、相変わらずルートパスは認識されませんでした。

解決方法(IntelliJ IDEA向け)

ドキュメントルートに設定したいディレクトリを右クリックし、Mark Directory as > Sources Rootと設定することで解決。
(Sources Root / Resources Root / Test Sources Root / Test Resources Root の何れでも大丈夫でした。)

IntelliJ IDEAの機能としてのディレクトリ設定(imlファイルに記載)が優先され、WebStormの機能である.idea/webResources.xmlの記載内容が無効になったものだと考えられます。
~~素直にWebStormを使えという神の思し召し~~

LiveEdit機能を使用したデバッグでパスが通らない

概要

IntelliJ IDEAなどにはテスト用のサーバーが内蔵されており、別途サーバーを建てずともJavaScriptなどの開発が行なえます。
本来なら。
結論から言うと別途サーバーを建てないとダメでした…
昔は出来た… っぽい記事を見かけたんですが…
(内蔵サーバーで実装する方法をご存じの方が居られましたらご教授いただけると幸いです…)

解決に向けて(原因など)

内蔵サーバーではlocalhost:[自動選択のポート番号]/[プロジェクト名]/[プロジェクトルート]/public/hoge.htmlのようなディレクトリ構造となります。
しかし、ルートパスを使用する以上、localhost:[自動選択のポート番号]/hoge.htmlのように配置される必要があります。
これは、(私が試した限りでは)内蔵サーバーでは実装できそうにありませんでした…

幸いにもIntelliJ IDEAやWebStormなどでは変更内容をリアルタイムで外部サーバーに反映させる機能があります。

ということで、同一PC上にnginxのサーバーを建ててテスト環境を構築することに。

テスト用nginxサーバー構築

既にnginxの環境がある方は適当に読み飛ばして下さい。

nginxをダウンロード&展開して、適当な場所に配置します。

展開した中のnginx-1.xx.x/conf/nginx.confのhttpブロック内に以下のように記述します。

nginx.conf

server {
    listen 8080; #任意のポート番号(well-knownポート以外が良いかと)
    server_name localhost;

    root D:/Develop/www/project; #サーバーのルートディレクトリ(プロジェクトごとに分けることを前提に配置すると吉)
    location / {
        index  index.html index.htm index.php; #PHP対応は別途設定が必要
    }
}

あとはnginx.exeと同じディレクトリに起動用バッチファイルを配置すれば完成です。
以下のファイルは参考程度にしていただければと…

startNginx.bat

@ECHO OFF
MODE CON COLS=34 LINES=6
ECHO.
ECHO !!! Nginx Start !!!
ECHO.
nginx

stopNginx.bat

@ECHO OFF
taskkill /F /IM nginx.exe

(諸事情によりstopNginx.batでは力技で停止させているので、あまり推奨はされないかと思います…)

IDE側設定

File > Settings > Build, Execution, Deployment > DeploymentにてAddを押し、Local or mounted folderを選択します。
サーバー名は自分がわかればいいので適当で大丈夫です。(各プロジェクトで1つしか建てることも無いでしょうし…)

Connectionタブが開いているかと思うので、サーバーの所在などの設定を行います。
設定内容は以下の通りです。

項目	設定内容
Folder	nginxサーバーのrootとして設定したディレクトリ
Web server URL	`http://localhost:[ポート番号]`

Mappingsタブを開き、サーバーと開発環境のディレクトリの対応付けを行います。
設定内容は以下の通りです。

項目	設定内容
Local path	プロジェクト内のドキュメントルート
Deployment path	nginxサーバーのrootとして設定したディレクトリ
Web path	`/`

続いて更新内容の反映自動化を設定します。
File > Settings > Build, Execution, Deployment > Deployment > Optionsを開き、設定の中央付近にあるUpload changed files automatically to the default serverをAlwaysに設定します。

最後にLiveEditで参照するURLを設定したサーバーに切り替えます。
Runボタン横にあるRun/Debug configurationsにてJavaScript Debugを追加し、URLをhttp://localhost:[ポート番号]と設定します。

後はRunボタンやDebugボタンを押せばLiveEdit機能でリアルタイムにデバッグが行なえます。

参考文献

プロジェクト構造の設定 - ヘルプ | WebStorm
ローカルサーバー構成を作成する - ヘルプ | WebStorm

IntelliJ IDEAでWeb開発する際のルートディレクトリ設定