記事の詳細

…という経験をしたので記事にしてみました。

原因が分かってしまえば一瞬で治るのですが、原因が分からないと結構引っかかる問題だったりします。
ちなみに私は今回の問題で1時間程悩みました! …泣けます。

あまりにも悔しかったので、クイズっぽい感じの記事にして過去の自分に届けます(?)

あれ?XAMPP環境で動作確認したシステムがXserverにアップロードしたら動かない…?

とあるページをXAMPP環境で編集して動作確認をしていました。
実装のイメージとしては、下記のようにphpファイルとcssファイルを用意して同じディレクトリに格納しました。

■phpファイル
phpファイル

■cssファイル
cssファイル

■ディレクトリ構成
ディレクトリ構成

上記の構成でローカルのULRにアクセスすると下記のような表示になります。
ローカルの表示

スタイルシートも反映されていて想定通りの表示になりました。

作成が完了したので、早速Xserverにアップロードしてページにアクセスしてみます。
すると…

サーバーにアップロードした画面

変化が少ないので分かりづらいですが、CSSファイルが反映されていません。

「おかしいな?」と思ってファイルのエラー内容を見てみると…。
エラー内容

「i-sp-style.css」が読み込まれていないらしい…。

アップロードの失敗を疑いましたが、しっかりとサーバーにアップロードできていました。(※10回ほど上書きしてアップロードしました。)

ではCSSの読み込みの記述が間違っているのか? 再度確認してみましたが…。
phpファイル

パスも間違っていない…。
そもそもXAMPPで確認ができているので、アップロードの失敗以外で読み込みエラーになるのはおかしい…。

どういうことなの…?

…というバグに遭遇して、1時間も悩みました…(´;ω;`)

どうでしょうか、皆さんはこのバグの修正方法がわかりましたか?

早速、答えを見てみましょう!

バグの原因は「ファイルの大文字と小文字の違い」にありました

先程のディレクトリ構成をよく見てみるとcssのファイル名の頭文字が大文字になっています
バグの原因

これがスタイルシートが読み込めない原因となっていました。

ですが少し待ってください。XAMPP環境では問題なくスタイルシートは読めていました
何故ローカル環境とXserverの環境で表示が変わってしまったのでしょうか?

これはサーバーを構成するOS(※WindowsやLinuxの違い)によって、ファイル名の大文字/小文字を区別するかしないかの違いにありました。

参考記事:大文字/小文字の問題とマルチ・プラットフォームの開発 | 東陽テクニカ | “はかる”技術で未来を創る | ソフトウェア 開発支援

 

私のXAMPP環境はWindowsサーバーなので、ファイルの大文字と小文字を区別しません。一方で、XserverはLinuxサーバーなので、大文字と小文字を区別しています
このように、今回のバグはサーバーのOSの違いによって発生していたため、原因を突き止めるのに時間がかかってしまいました。

サーバーを構築したことのある方なら「こんなもの当然でしょ?」となるのですが、知識が浅いとこんな些細な問題に気づくのも一苦労でした…。

「もっとサーバーの勉強をしなさい!」というサーバーからのメッセージを受け取った気がします( ;∀;)

日々精進です!ではまた!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

Webサイト制作の際に活用するJavaScript、PHP等のプログラム関係を担当しています。過去にはC、C++、C#等を活用したソフトウェア開発も行っていました。小難しい記事を書くことが多いのですが、本人はそこまで小難しい性格……じゃなければ良いなぁと思ってます!

ほかの投稿も読んでみませんか?

コメントは利用できません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る