質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2359閲覧

<base href='/' />をすると/○○/123にアクセスできるようになりましたが、ダイレクトに/○○/123アクセス後、サイト内リンクをクリックすると/□□とならずに、/○○/123/□□と

kazuyu

総合スコア18

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/03/04 03:45

編集2018/03/04 04:03

【質問】

<base href='/' />に使うことでサイト内リンクアクセスがおかしくなる副作用の解決策を教えて下さい。 【詳細】 <base href='/' />をindex.htmlの<head>につけることで、/○○/123に アクセスできるようになりましたが、ユーザがindex.htmlに相当するトップページではなく、 例えば個別の、/○○/123に「URL直打ち」でアクセスした後に、サイト内リンク/□□/567をクリックすると、通常URLは、/□□/567になる筈ですが、これが、/○○/123/□□/567となってしまいます。 【<base href='/' />を使うに至った経緯】 react-router-domの<Link to='/○○/□□/098' component=・・・ />のようだとcssとimageが上手く表示されません。 正確に言いますと、/○○ならばアクセスできますが、/○○/□□のように入れ子・ネストすると正しく表示されません。 調べてみてnginxのsendfile offにすると解決するような記述を見つけてやりましたが結果は変わりませんでした。 以下リンク先で、<base href='/' />を設定すると解決するとの技術を目にしましたのでそのとおりにやってみると、/○○/□□でも正しく表示することができました。 https://teratail.com/questions/26245 【設定について】 【nginx.conf】 ``` location / { root /・・・; index index.html index.htm; try_files $uri $uri/ /index.html; ``` 【index.html】 ``` <head><base href='/' /></head> ・・・ <script src='/・・・/bundle.js'></script> ``` 【○○.jsx】 ``` ReactDOM.render( <Provider store={store}> <BrowserRouter> <Switch> ・・・ <Roue path='/・・・/:id' component={・・・} /> ・・・ </Switch> </BrowserRouter> </Provider> ``` 【nginx rewriteか、<base href='/' />のどちらがよいのか?】 私が試したのは、<base href='/' /> nginxのrewireを設定する記述も見かけましたが、設定が上手く行きませんでしたので戻しました。 本来、nginx rewriteか、<base href='/' />のどちらで設定するのがよいのでしょうか? 又、本件の問題解決が出来る、nginx.confの正しい設定についても教えて頂ければ幸甚です。 【nginx.conf】 ``` location / { root /・・・; index index.html index.htm; try_files $uri $uri/ /index.html rewrite ^/(.*)/(.+)$ /$1 break; } ```

以上、上記質問に係る解決策がお分かりでしたらご教示頂ければ幸甚です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

以下リンク先で、<base href='/' />を設定すると解決するとの技術を目にしましたので

リンク先を読んでみたのですが、

簡単な確認方法としては、index.html<head>内に<base href="/">を加えたうえで

とあるように、これはそもそもローカルでのテスト用の手法ではないかと思います。

投稿2018/03/04 03:52

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kazuyu

2018/03/04 03:56

ありがとうございます。 実用では、nginx rewriteのやり方が、良いと思うのですが上記ケースの場合、 nginx.confでどのような設定をするのがよいのでしょうか? 出来ましたらコードベースでご助言・ご指導頂ければ幸甚です。
kazuyu

2018/03/04 03:59

>これはそもそもローカルでのテスト用の手法ではないかと思います。 ということは、私の技術スキル云々ではなく、<base href='/' />では、本件の問題は解決不可との認識で正しいでしょうか?
kazuyu

2018/03/05 17:51 編集

重複するので削除する。
kazuyu

2018/03/05 17:51

>これはそもそもローカルでのテスト用の手法ではないかと思います。 恐れ入りますが、「ローカルでのテスト用の手法」だから何なのでしょうか? <base href='/' />は、きちんとしたリファレンスにもなっているので「テスト用の手法」と決めつける理由はないものと思われます。 大変失礼な回答になってしまうのですが「これはそもそもローカルでのテスト用の手法ではないかと思います」という誤りである恐れが高い、正しいという説明・理由が示されていないいい加減な回答は、混乱を招くだけの結果となっております。 単に点数稼ぎが目的のだけの根拠のない回答は、皆さんの迷惑になるだけですので控えて下さい。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/base
maisumakun

2018/03/05 22:28

自分としては、「私の技術スキル云々ではなく、<base href='/' />では、本件の問題は解決不可との認識」です。 リンクとリソースでパスの指定が違うのが主な原因と思われますので、<base>で無理に合わせようとしても、問題は解決しないのではないかと考えています。 なお、こんな情報もありました。 http://fukuchiharuki.me/wiki/index.php?%E9%9A%9C%E5%AE%B3%E3%83%A1%E3%83%A2/react-router-dom%E3%81%A7%E3%83%99%E3%83%BC%E3%82%B9URL%E3%81%8C%E6%8A%9C%E3%81%91%E3%82%8B
maisumakun

2018/03/05 22:30

CSSの指定部分が書かれていない以上、現状では再現して確認することもできない状況です。
kazuyu

2018/03/08 16:36 編集

再度丁寧な助言頂き、ありがとうございます。 お陰様で解決できました。 原因は、HTML/CSS/IMAGE、`Link to`、<script src>のリンク先を相対パスで指定していたことでした。 ルート相対パス /で始めることで解決できました。 【参考】http://phiary.me/root-path/ 私は、nginxのrewriteを設定していないために発生したバグだと思いましたがmaisumakunさんが、提示してくれた参考リンク先は、react-routerの設定に関するもので、まさかと思って色々調査して試した結果、解決できました。 素晴らしい情報提供です。感謝します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問