エックスサーバーにて。サブディレクトリでは正常に表示されるが、サブドメインではhtmlしか反映されません。

前提・実現したいこと

エックスサーバーに作成したhtml,css,jsファイルをアップロードして表示させたいです。

現在、example.comでワードプレスを運営しています。
コーディングの練習用としてexample.comのサブドメインを取得しました。（ワードプレスで運用する予定はありません。）

html,CSS,js,imgファイルをすべてアップロードし、サブドメインでアクセスしたところ、htmlしか読み込まれません。

発生している問題・エラーメッセージ

ディベロッパーツールを利用してエラーを見たところ、次のように表示されています。

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

mosha-boot-1.min.css:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)

airbnb.png:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)

airbnb2.png:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)

mosha-boot-1.js:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)

Present%20Icon%20(1).png:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)

/favicon.ico:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)

mosha-boot-1.min.css:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)

試したこと

ローカル環境では表示されるので、アップロードの仕方が悪いのかと思い、自宅のパソコンのファイルと同じような階層にしましたが表示されませんでした。web-designがサブドメインのファイルです。サーバー上にあらかじめ作られていた場所にアップロードしました。

確認したこと

URLは、web-design.example.comにアクセスしています。
エックスサーバーのアクセスログをダウンロードしたところ、web-design.example.comの記載がありました。

ログは、以下のようになっていました。

web-design.example.com 103.26.153.116 - codelife [20/May/2019:22:29:41 +0900] "GET /web-design/js/bootstrap.min.js HTTP/1.1" 500 671 "http://web-design.example.com/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36"

サブドメインの設定は、エックスサーバーの指示通りに行いました。

また、ファイルは指定されたフォルダにいれました。下画像の説明から、public_htmlの中にあるweb-design（サブドメイン名）のフォルダに入れればいいと思い、そちらに入れています。

##サーバーの状態です。

pablic_htmlの.htaccecc

#SITEGUARD_PLUGIN_SETTINGS_START
#==== SITEGUARD_RENAME_LOGIN_SETTINGS_START
<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteBase /
    RewriteRule ^wp-signup.php 404-siteguard [L]
    RewriteRule ^wp-activate.php 404-siteguard [L]
    RewriteRule ^login_1414117(.*)$ wp-login.php$1 [L]
</IfModule>
#==== SITEGUARD_RENAME_LOGIN_SETTINGS_END
#==== SITEGUARD_ADMIN_FILTER_SETTINGS_START
<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteBase /
    RewriteRule ^404-siteguard - [L]
    RewriteRule ^wp-admin/css - [L]
    RewriteRule ^wp-admin/images - [L]
    RewriteRule ^wp-admin/admin-ajax.php - [L]
    RewriteRule ^wp-admin/load-styles.php - [L]
    RewriteCond %{REMOTE_ADDR} !^103.26.153.116$
    RewriteRule ^wp-admin 404-siteguard [L]
</IfModule>
#==== SITEGUARD_ADMIN_FILTER_SETTINGS_END
#SITEGUARD_PLUGIN_SETTINGS_END

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

上記「試したこと」部分のweb-designないの.htaccess

AuthUserFile "/home/アカウント名/example.com/htpasswd/web-design/.htpasswd"
AuthName "Member Site"
AuthType BASIC
require valid-user

サブディレクトリでアクセスしたところ、正常に表示されました。

サブドメインで作ろうと思っていたので、そちらでしかアクセスしていませんでしたが、拒否しない限りサブディレクトリでもアクセスできると知り試したところ、サブディレクトリでは正常に表示されました。

ディベロッパーツールでpageを確認すると、階層がおかしい？

一枚目がサブディレクトリでアクセスしたとき（正常：FTPソフトで見るのと同じ）。二枚目がサブドメインでアクセスしたときです。

これはつまり、サブドメインで運用する場合は、ディレクトリを自分で追加・整理する必要があるということでしょうか；

m.ts10806

2019/05/20 14:36

サブドメイン.example.com のようなURLにアクセスしているのでしょうか？サブドメインのWebルート設定はきちんとweb-designのフォルダを指定していますか？ 500はサーバー内のエラーなので別の問題も起きているのかもしれません。（まだ切り替え中とか）サーバーのログファイルも確認してみてください。

choco10

2019/05/20 15:17

ありがとうございます。ルート設定について調べたのですが、よくわからず、ファイルの場所ということでしょうか？example.comのアクセスログを確認したところ、サブドメイン名の記載がありました。

m.ts10806

2019/05/20 15:21

追加された画像の「アップロード先」というところが「サブドメイン」の設定と紐づいているところですね。「abc.example.comから始まるURLでアクセスすると /example/public_html/abc 配下のフォルダの内容を表示する」ことになります。 > example.comのアクセスログを確認したところ、サブドメイン名の記載がありました。実際のドメイン名はexampleにしてもらって構いませんのでどのようなログだったか質問に追記いただいてよろしいですか？

choco10

2019/05/20 15:37

理解できました。ありがとうございます。ログについて追記いたしました。

m.ts10806

2019/05/20 15:43 編集

>js/bootstrap.min.js ここで500になってるようですね。ちゃんとファイルアップロードされました？あ、ごめんなさい。「ファイル存在しない」なら404 NotFoundだから存在しないわけではないか・・

m.ts10806

2019/05/20 15:44

ただ、/web-design/js/bootstrap.min.js となっているので、もし　～/web-design/　をサブドメインのルート（トップ）としたいのでしたらルートの設定が違ってるのかもしれません。いろいろ可能性が考えられるのでなかなか回答にできずすみません。

choco10

2019/05/20 15:52

いえ、ありがとうございます。今のお言葉で少しひっかかったのですが、example.com（ワードプレス）とweb-design.example.com（html練習用として）運用することは可能なのでしょうか？

m.ts10806

2019/05/20 15:58

どの部分が引っ掛かったのかわからないですが、ルートディレクトリをわければ全く別サイトとして動作させられるので可能です。 example.com/public_html/web ディレクトリなどを作ってexample.comにあてて example.com/public_html/design ディレクトリなどを作ってdesign.example.comにあてるイメージですね。初期ルートexample.com/public_html/にWordPressを入れてexample.comをあててしまうとその配下のディレクトリに影響があるかもしれないので、わけたほうが良いです。

choco10

2019/05/20 16:09

トップという言葉で、exampleがワードプレスなら、サブドメインもワードプレスでなければいけないのかと思いまして。教えていただきありがとうございます。勉強します。配下にワードプレスというのが気になったので、質問の方にいまのサーバーのフォルダの状態の画像を添付します。publicの下にwpがあるのは削除した方がいいのでしょうか。

Eggpan

2019/05/20 16:28

「試したこと」の画像を見た感じだと、.htaccessを設置されているので、そちらが影響している可能性もありそうです。 .htaccessの内容記載いただくことはできますでしょうか。エックスサーバはサブドメインなしでサイト運営している場合、サブドメインなのにサブディレクトリ内にファイル設置する必要ありそうですね・・。 https://www.xserver.ne.jp/manual/man_domain_subdomain_setting.php#link-a012

choco10

2019/05/20 17:06

>エックスサーバはサブドメインなしでサイト運営している場合、サブドメインなのにサブディレクトリ内にファイル設置する必要ありそうですね・・。 https://www.xserver.ne.jp/manual/man_domain_subdomain_setting.php#link-a012 Eggpanさんありがとうございます。上記説明を読んで、サブドメインではなく、サブディレクトリでアクセスを試したところ、正常に表示されました。

m.ts10806

2019/05/21 00:09

>publicの下にwpがあるのは削除した方がいいのでしょうか。今入っているWordPressが全部なくなってもいいのであれば・・。ドメインとルートの関係性を変更しておいて移行後でも良いと思います。ドメインとルートの紐づけがなくなったらブラウザからアクセスすることはできなくなりますので。

choco10

2019/05/21 00:26

>今入っているWordPressが全部なくなってもいいのであれば・・。バカこと考えていました。消えたら困ります；ルート設定の仕組みが理解できていないので勉強します。いろいろとご教授いただきありがとうございました。

m.ts10806

2019/05/21 00:34

なので、するなら「移行後」ですね。もし現在何かしら動作しているサイトがあるのでしたら、それこそ最初にサブドメインとしてテストサイト的に設置してファイルもデータも移行して正常確認してからサブドメインから本ドメインに切り替えるという手段もあります（運用中のサイトを根本の仕組みからリニューアルするときによくやる手段です）

yoshinavi

2019/05/21 02:54

「WordPress」関連であれば、タグにも付けると良いかと思います。

choco10

2019/05/21 14:03

mts10806さん大変勉強になりました。データの取り扱いには十分注意したいと思います。 yoshinaviさんありがとうございます。タグつけてみます。

行動規範の内容に同意します

回答1件

ベストアンサー

アクセスログからして、HTML内から外部ファイルを読み込ませる時に/web-design/js/bootstrap.min.jsのようにweb-designディレクトリをファイルパスに含めてるのではないかと思います。

HTML内では/js/bootstrap.min.jsのようにすれば参照できるようになるはずです。

投稿2019/05/21 15:02

yhg

総合スコア2161

choco10

2019/05/21 15:40

ありがとうございます。サブドメイン、サブディレクトリともに正常に表示されました。

choco10

2019/05/21 16:12

ローカル環境でわかりやすいよいにサブドメイン名でファイルを作っており、パスを書く際にもすべてにweb-designを含めておりました。その部分を./js/bootstrap.min.jsなどとすることにより、サブドメイン、サブディレクトリともにうまく表示されました。すみませんが、わたしの以下の解釈が正しいかお教えいただけないでしょうか。・サブディレクトリでは正常に表示されていたのは、たまたまうまく言っていただけ。・サブドメインでhtmlしか読み込まれなかったのは、ディレクトリと、ローカル環境で作成していたファイル名を同じしてしまっていたため、読み込むルートがおかしくなった。・ディレクトリ名をファイル名に使用するのはダメ。

yhg

2019/05/21 16:28 編集

サブドメインにしておかしくなったのは、ローカル環境のドキュメントルートがweb-designディレクトリではないのに対して、 Xサーバー環境（サブドメイン）でのドキュメントルートがweb-designディレクトリになっているためです。ローカル環境のドキュメントルートをweb-designディレクトリに設定すれば、Xサーバー環境とのズレがなくなって開発しやすくなるかと思います。サブドメインを設定せず、example.com/webdesign/としてアクセスする場合は、ドキュメントルートのズレがないので正常に表示されていたのだと思います。

choco10

2019/05/23 06:21

大変分かりやすく解説いただきありがとうございました。以後、ルート指定に気を付けて制作したいと思います。

行動規範の内容に同意します