~まえがき~
本記事は個々の開発設定が大きくかかわってくるので、
参考程度にご覧ください。
また、理解度は△で応用できるまでは達していません。
※注意※この記事は
開発前の準備「とにかくローカルに表示する!プロジェクトに参加していく!」3の
➆「cssが効いてないんだけど!?ルーティング設定必要なサイトに当たってしまった!」にあたります。
また、単体記事で読んでいただくこともできます。
【この記事を読むのは、こんなことに困った時】
・通常のルーティングと異なっているサイトを表示させたい
・ユーザーがリクエストするURLとサイトのファイルパス構造が異なった作りになっている
・サイト表示まではできたが、CSSが反映されない
※今回の内容は以下の条件で独自にファイル構造を作成しているものを対象とした記事です。
・ユーザーが確認しない編集者用MENUのindex.htmlを作成
・index.htmlそこから複数のサイトへ移動できる構造になっている
・www/index.html階層と同じ階層に複数のサイトを作成し1つのプロジェクト内に収めている。
・ユーザーのリクエスト(URL)は構造と異なるURLを使用したいためルーティング設定作業が発生しています。
【環境構築手順メモ ーaccess_filter.php(ルーティング応用編)】
<前提>
PC:Windows
Webサーバー:IIS
言語:html css C# PHP
作成:HP
<きっかけ>
サイト引継ぎの際の環境構築。
通常と違った構造だと気づかずにcssが効かない問題や
画像だけ表示される問題にぶつかった。
そもそも、リモート管理下にない画像がダウンロードせずに表示されていることが正解だと思っていたのも間違いでした。
css効かない問題を解消しても画像非表示問題が発生したと勘違いして上記の作を行わず解決したと判断できるまでに苦労しました。
<実際のここまでの流れ>
通常サイトであれば正常に表示される作業が完了したあと。◀今ここ!問題発生!
※サイト立ち上げの流れを後日別記事で記述予定なので
今回は割愛。のちにリンク紐づけ予定。
<問題>
『サイト表示まではできたが、CSSが反映されない!他のサイトはできたのに?あれ?』
<原因>
IISで適切なルーティング設定がされていなかった。
access_filter.phpの記述に合わせたルーティング設定が必要だった。
※設定なしで正常に動いているサイトが複数あったため上記が原因の一つと考えます。
【解決手順】
「IISの『URL 書き換え』でルーティング設定を追加する」
➀WindowsでIISを開く
※以下の2方法(◆)どちらかを実行で可能
◆モニター下左端の「ここに入力して検索」に「IIS」と入力
↓ 「インターネット インフォメーション サービス (IIS) マネージャー」と出てくるのでそれをクリック
◆モニター下左端の「Windowsロゴ」をクリック
↓アルファベットごとの一覧が表示されるので Wまでさがり「Windows管理ツール」をクリック
↓「インターネット インフォメーション サービス (IIS) マネージャー」と出てくるのでそれをクリック
➁対象のサイトまで移動
- 左のリスト欄「接続」➡「DESKTOP-4AVNUIC(DESKTOP-4AVNUIC¥XXXXXXXX)」➡「サイト」➡
「対象のサイト名(例:XXXXX.com)」➡右の欄に「(XXXXX.com)ホーム」と表示されると対象サイトの設定ホーム画面に移動できている
➂IISの『URL 書き換え』へルーティング設定を追加する
-
「(XXXXX.com)ホーム」のしたのアイコン欄から「URL 書き換え」をダブルクリック
-
右端「操作」欄から「規則の追加」をクリック
-
「空の規則」をクリック
4.「受信規則の編集」の入力欄で設定する
名前:Routing (これは決まりはないがわかりやすい命名を。)
パターン(T): ^(.*)$
URLの書き換え(L): /access_filter.php?request_url=/{R:1}
【条件→追加クリック内】
※以下のパターンを見る感じこの条件設定をしないとcssの拡張子ファイルも書き換えられてしまうので機能しなくなりそうです。
条件の入力(C): {QUERY_STRING}
入力文字列が次の条件を満たしているかチェック: パターンに一致しない
パターン(T): ^(.*).(gif|png|jpg|jpeg|css|svg|icon|js|pdf|xml|mp4)$
大文字小文字の区別をしない: チェックをいれる
4.「受信規則の編集」に追加されているか確認
【完了!】
再度、サイトを開きなおし
立ち上げなおしてみてください。
CSSが作動していればOK!
【参考】
【気になるワード】---記事内でより理解を深めたいワード
- ルーティング設定
- URLの書き換え
- リクエストからの流れ
- 正規表現
- PHP