taro373
@taro373

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

Local(Local by Flywheel)に他のPCからもアクセスしたい

Q&A

Closed

解決したいこと

Local(Local by Flywheel)でWordpressのテスト環境を準備しました
詳細は、下記の記事にまとめました。

Site Hostの表示が「localhost:10003」になっていて、
Local が起動しているパソコンであれば、
http://localhost:10003でも http://127.0.0.1:10003でもローカルIPを指定してもアクセスできました。

これで、LAN内で確認しながらページの更新ができると考えたのですが、
同じLANに接続している別のPCで http://192.168.1.xx:10003
とアクセスすると、404エラーにはならず、ページにアクセスできますが、
フォーマットが崩れます。テキストだけが表示されている状態です。
cssや画像が読み込めていませんでした。

Site Hostの設定を変更した目的はLAN内の他のPCからも参照できるようにする、だったのですが、もともと無理な方法なのか、それとも、設定がまだ足りないのでしょうか?

この質問のタグには「hosts」をつけましたが、テキストだけは表示されているので、名前解決ができていない、ということではなさそうです。

0

6Answer

@tonberry1050 さん、失礼しました
ログインページ「wp-login.php」のソースを確認しました
cssの書き方がlocalhostになっていました  これを前提に、考えます!

スクリーンショット 2022-10-18 10.14.01.png

1Like

参照する側のpcでhostsファイルに下記を追記して
/etc $ tail -n 1 /etc/hosts
192.168.1.184 localhost
localhostで「Local」が起動しているPCを参照できるようにしました。
/etc $ ping -c 1 localhost
PING localhost (192.168.1.184): 56 data bytes

この設定で、Safariではきれいに表示されました(トリさんが左から右へ飛びました)
Firefoxでは、画像は表示されますがレイアウトが少し崩れました
Chromeでは、依然としてlocalhostは自分自身と認識されました
(これはChromeのセキュリティ???)

もしこれがWindows環境だったら対策はわかりませんが
ともかく、hostsファイルにlocalhostを追記してSafarであれば
LAN内で共同作業ができることが確認できました
ありがとうございました

1Like

私はこちらのツールを使ったことがないので役に立たない意見かもしれませんが、WEBサーバーを立てたときによくはまる場所は確認しましたでしょうか?

・まずはブラウザのキャッシュを無効にしてみる
別PCのブラウザが最初のアクセスできなかった状態や間違ったページ情報を持っている可能性もあるので、開発者ツールを開き、ネットワークタブからキャッシュ無効化してから再読込してみてください。案外これだけで解決することがあります。

・画像のURLに直接アクセスできるか試す
おそらくHTMLファイルにはアクセスできているので、ブラウザで直に画像などのURLを打ち込み確かめてみる。
これで開けたらHTML内の相対パスが間違っているか、メタタグの指定に問題があることがわかります。(ビルド方法あるいはツールの問題かは更に調査が必要)
開けなければリソースファイルが公開される場所に無さそうなことがわかります。(これもツールの問題なのか、利用方法の問題かは更に調査が必要)

どうぞよろしくお願いします

0Like

Comments

  1. 差し支えがなければhtmlファイルを一部公開してもらえると解決する可能性があります。

    (それがない場合「htmlファイル内のパスが"C:\Users\..."などで指定していませんか?」などから確認が必要になってしまいます)
  2. @taro373

    Questioner

    アドバイスありがとうございます。
    はじめに書いたように「Wordpressのテスト環境を準備しました」です。
    その中の画像(ヘッダ画像)のアドレスを取得してアドレスバーに入力すると
    鳥の画像が表示されました
    詳細は、この下に改めて投稿します

ip addr または ifconfig で自ipを確認してはどうでしょうか?  siteurl 固定ipで運用することをお勧めします。

0Like

Comments

  1. @taro373

    Questioner

    ipアドレスは問題ないと思われます テキスト部分は表示されていますし、詳細はこの下に改めて投稿しますが、Wordpressのサイトを削除して作り直したところ、
    cssは有効になりました

みなさん、ご教示ありがとうございます。
こちらの情報に従い「localhostモードへの切り替え」を実施して、
再度「WordPressサイトを作成」を行いました。
https://skillhub.jp/courses/241/lessons/1757
ご指摘いただいているような、アドレスの問題では無いと思われます。
現段階では表示できないのは、画像ファイルだけです。
昨日の段階では、cssも効いていなくてレイアウトが崩れテキストだけ表示されていました。

@tonberry1050さんから教えていただいた「画像のurl確認」を行ったところ
下記のアドレスで、twentytwentytwoテーマのトリさんが表示されました
http://192.168.1.184:10003/wp-content/themes/twentytwentytwo/assets/images/flight-path-on-transparent-d.png

「Local」を起動しているPCではテストができるので、この環境で作業を進めるか、「Local」はなかたものとして、開発環境をLAN内に準備するか別のPC(MacMini)で「Local」を稼働させてから再考します

スクリーンショット 2022-10-18 9.09.29.png
スクリーンショット 2022-10-18 9.47.10.png

0Like

localhost は特別なドメインを指すのでその解決方法はあまりよろしくないです。

正解はhtmlファイル内のパスをipに変更することです。
これがどこで変更するべきかWordpressのビルドステップに詳しくないので分からないのですが、Wordpressのドメインを指定する方法みたいながぐり方で出てくるはずです。

0Like

Comments

  1. また、ipのかわりに`www.wp-test.com`なんかを使い、それをhostsに記載するのはもう少し正しいです

    localhostをhostsに記載するような方法だけが間違っています
  2. @taro373

    Questioner

    はい、「Local(Local by Flywheel)」は本来は自分のPCで使うツールなのだと思わせる動きです。
    LAN内で見てもらうことをやめるか、もしくは、すなおにMAMPを使うか だと思います。
    「Local(Local by Flywheel)」では

    先に書きましたようにChromeではセキュリティ面からhostsのlocalhostを書き換えても無視されました。この部分でも“正しくない”方法だと思います。

    「Local」で、「Router Mode」を(ローカルサイトを共有するために)localとした上で、かつ、html内に「localhost:ポート番号」の書き方とならない方法があればいいのですが...

    もう少し調べて、ダメならあきらめます。
    「Router Mode」がSite Domainsになっていると、ローカルIP指定でも、(それができないなら当然ですが)hostsで指定しても、LAN内の他のPCからはアクセスできませんでした。

Your answer might help someone💌