93258


以下のようなURLのサービスを作っているとします。  
<https://example.com/hoge-service/> ←ここがトップ画面  
<https://example.com/hoge-service/favorite>  
<https://example.com/hoge-service/user/123456> ユーザーページ  
<https://example.com/hoge-service/js/common.js>  
<https://example.com/hoge-service/image/banner.png>

<https://example.com/hoge-service/> がトップページで、そこより上へアクセスする事はありません  
<https://example.com/hoge-service-help> ←これは無い

この時、どのページを表示していても任意のURL、例えば `/hoge-service/js/common.js`への相対パスを作る方法を教えてください。

例えばトップページを基準に考えれば`<script src="./js/common.js">`で良いですが  
ユーザーページでは`<script src="./../js/common.js">`と記載する必要があります。  
scriptタグだけならテンプレートエンジンを書く時に注意する事も出来ますが、  
実際にはjsの中からfetchでapiをコールする時とか、  
スタイルシートの中でurl(./image/banner.png) にアクセスする時とか、  
htmlの中でimgタグを書く時とか、  
パスを書く場所は無数にあるので、そこを全てサーバー側で動的に作るのは骨が折れます。

`hoge-service`の部分は環境変数で動的に変更されるとします。  
サーバー側はnode+express+ejsである程度の自由は効きますが、  
html css jsの中の全てのパスをレスポンス時動的に差し替える というのは避けたいです。


CC BY-SA 4.0
2023-01-08T12:50:45.843
93250
2023-01-08T22:16:44.767
805
question
javascript html node.js express.js
webサイトの中で複数のページ共通の処理を書く時に相対パスはどう記述すれば良い？


私自身は試した事がなく、今回少し調べた程度なのですが、「絶対パス」「相対パス」の他に  
**ルート相対パス** という記述方法があるようです。

ドメイン名をルートとして、`/` 始まりでパスを記述します。  
対象ファイルの絶対パスが `https:/example.com/hoge-service/js/common.js` であるなら、ルート相対パスは
`/hoge-service/js/common.js` になります。

**参考:**  
[絶対パス、相対パス、ルート相対パスをわかりやすく解説！まずはイメージをつかもう！](https://d-fount.com/absolute-path-
and-relative-path/)


CC BY-SA 4.0
2023-01-08T16:45:31.770
93255
2023-01-08T16:45:31.770
3060
93250
answer


フロントエンドは専門外ですが、こちらは使えますか？

[未経験からのExpress.js入門｜静的ファイル -
wiblok](https://wiblok.com/js/node/express/express-static/)

[node.js - EJS include file relative to project root - Stack
Overflow](https://stackoverflow.com/questions/38487980/ejs-include-file-
relative-to-project-root)


CC BY-SA 4.0
2023-01-08T21:28:54.903
93257
2023-01-08T21:54:18.897
2023-01-08T21:54:18.897
4982
4982
93250
answer


ものすごくマイナーですが、HTMLには1.0からずっと[`<base>`: 文書の基底 URL
要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/base)があります。  
質問の例では、`<head>`の前の方（他に相対パスが出現するより前）に

[code]

    <base href="/hoge-service/">
    
[/code]

と書いておけば、html css js上の全ての相対パスは `/hoge-service/` を起点に処理されます。

ただし、MDNでも指摘されているように、ページ内アンカーまでもが文書の基底 URLに従ってしまい別ページへのリンクと解釈されるため注意が必要です。


CC BY-SA 4.0
2023-01-08T22:16:44.767
93258
2023-01-08T22:16:44.767
4236
93250
answer