デバッグ時のアドレスがポート番号ではなくフォルダ名の場合のみphpが動作する

Question

前提

各種サイトにあるデバッグ方法のポート番号によるアドレスの記述だと、ページの表示とjava scriptの実行はされますがphpだけが実行されません。

Local host のポート番号の部分のみフォルダ名にするとPHPが動作します。
localhost:5500/dist/index.html →PHP動作しない
localhost/chari/dist/index.html →PHP動作する

どちらもmampは起動しています。
環境はmac, mamp, vscode(live server, php server)です。

phpがサーバ上でしか動作しないことは認識していますが、mamp(apache)を起動しているのでlocalhost:5500でも実行できると思っていました。

実現したいこと

• デバッグ時のアドレスはポート番号ではなくフォルダ名でもよいのか知りたい。
• ポート番号とフォルダ（vscodeではプロジェクト？）の関係を知りたい。

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

該当のソースコード

 // @param {string} no リンク番号
 // @param {object} prm {setType: string , cnctType: string, mkr: string, mdl: string, year: string}


export async function getDataFromPHP(no, prm) {
  let url;
  if (prm["cnctType"] === "dev") {
    url = "../dist/php/getGeo.php";
  } else {
    url = "../php/getGeo.php";
  }

  //URLSearchParamsは連想配列からクエリパラメータを作成してくれるAPI
  // const qPrm = new URLSearchParams(prm);

  //method:GETはパラメータを送らずにURLからデータを取得するだけ > パラメータがないのでbodyがない
  //method:POSTはパラメータを送って処理を実施後にURLから処理後のデータを取得する > パラメータがあるのでbodyが必須
  const params = {### ヘディングのテキスト
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(prm),
  };

  //awaitでpromiseが返ってくるのを待つ
  // const res = await fetch(`${url}?${qPrm}`).catch((err) => console.log(err));
  const res = await fetch(url, params).catch((err) => console.log(err));
  // console.log(res.text()); //Promisseの結果を表示、詳細なエラーが分かる
  const values = await res.json().catch((err) => console.log(err)); //今回のエラー発生箇所
  // console.log(values);
  setDataToMakerModel(prm["setType"], no, values);
  if (prm["setType"] === "geometry") {
    setDataToSize($("#size-table > tr"), no, values);
  }
}

フォルダ構成

ページ表示 localhost:5500

ページ表示 localhost/chari

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

mac, vscode, mamp

Comments

[KoichiSugiyama]

Webブラウザから
http://localhost:5500/dist/index.html
http://localhost/chari/dist/index.html
をそれぞれアクセスして、どちらでもindex.htmlページが表示されているということでしょうか。

[uda]

はい。どちらもページの表示とjava scriptの実行は問題ありません。
:5500だけphpが動作しません。

[dodox86]

質問の件名が指す内容が反対ですね。ローカルでhtmlとJavaScriptのみ動いている様です。

[m.ts10806]

フォルダ構成と各ファイルの配置、ファイルのコードも提示願います。
あと「実行されない」だけでは起きている現象分からないので、「何が起きているか」を記載してください。
エラー発生の有無、どういうURLでどういう風にアクセスして、何が起きているのか。

[uda]

すいません。言葉足らずでした。
Local host のポート番号の部分のみフォルダ名にするとPHPが動作するという事です。
ローカルのc¥aaa/bbb/ccc/index.htmlで実行はしてはいません。

[dodox86]

> Local host のポート番号の部分のみフォルダ名にするとPHPが動作するという事です。

URLではポート番号のところはホストの待ち受けポートに相当するところです。フォルダ、ディレクトリのPATHとは意味が異なります。、m.ts10806さんがコメントされた

> エラー発生の有無、どういうURLでどういう風にアクセスして、何が起きているのか。

に尽きますね。ローカルホストであろうとリモートであろうと例えばhttpなら既定でポート番号80です。
http://localhost:80/index.html と http://localhost/index.html は同等です。

404 Not found のHTTPステータスのエラーでしょうかね。

[編集済] URLのポート番号区切りを";"と誤記していたので、";"に修正。

[m.ts10806]

「動作する」「動作しない」では他者には何も伝わらないという指摘です。
他者が再現できるくらい具体的な内容である必要があります。でないと応えようがない。
（赤の他人はどんなに技術力や経験があっても赤の他人でしかなく、エスパーやあなたの画面を隣で見ている人ではないから）

例えば、
--------------------------------
ブラウザから実行すると画面に「test」と表示するプログラムを作っている。
書いたのは以下のコード
```
<?php
echo "test";
```
これをプログラムを ポート999に設定したApacheのDocumentRootであるhtdocsディレクトリ配下にtest.phpというファイルで保存して、
http://example.com:999/test.php
とChromeブラウザでアクセスするとブラウザに「test」と出力される。
http://example.com:8888/test.php
でアクセスするとサーバー接続できなかった旨のエラー（画面キャプチャなど込み）が表示される。
--------------------------------

といった具合に。現状の投稿内容だと想定する動作も、それを実現しようとして書いたコードも、具体的な操作も、起きている現象も何もないのが分かるかと思います。

面倒で省略する人も多いですが、見ている人に伝わらなければ結局ヒアリング（逆質問）を強いることになり、
お互い労力がかかるわけです。
そのための「質問テンプレート」であったはずですが、デフォルトの項目結構削られたみたいで、伝わりにくくなっています。
言い方は厳しいですが、「ここは関係ない”だろう”」という素人判断は悪い癖となって、今後のスキル向上の大きな壁になります。
省いた場所に実は問題がありました、なんてこと日常茶飯事です。（業務でも見落としとしてよくある）

[uda]

m.ts10806さん
大変申し訳ありませんでした。おっしゃるとおり、自身の勝手な判断で「ここは関係ないだろう」と思う箇所について省略しておりました。
ご指摘を受け、質問に追加の情報を記載しましたのでご確認頂けると幸いです。

[m.ts10806]

了解です。ただ、細かいですが、JavaとJavaScriptは全く別物なので、そこまで正確に記載いただけると。
また、PHPのコードが提示されてないのと、提示されたコードも手元のコードコピペではなく切り抜きに見受けられます。

[hoshi-takanori]

MAMP よく知りませんが、apache のポート番号はひとつしか指定できないように見えます。ポート番号 80 と 5500 で動いてるのは同じものですか？
https://pc-karuma.net/mamp-settings-mac/
あと、localhost はフォルダ名じゃなくてホスト名ですよね。

[m.ts10806]

そういえば、MAMPってデフォルトポート8888だったような。
ポート番号省略でアクセスしている＝ポート番号80です。そのような設定変更はしましたか？
また、5500は何にどのように設定したポート番号ですか？

もちろん、別ポートでのサーバ立ち上げは、MAMP（というかWebサーバ：Apache）を複数導入すれば可能ですが、質問者さんの段階でそのようなことをしているとは考え難いです。

[m.ts10806]

あぁ、なんとなくわかった。

[uda]

ご質問ありがとうございます。

アドレスのlocalhostはホスト名です。
mampはapache利用でポート番号は80に変更しています。
5500はvscodeの拡張機能のLiveServerで設定したものです。

Answer 1

調べた感じVisual Studio CodeのLive Serverプラグインを起動したときのデフォルトポートが5500のようですが、こちらはPHPなどWebサーバ上で動作する言語が実行できる環境ではないようです。
PHPを実行するためには、そのWebサーバにPHPインストールして紐づける必要があるからです。

調べてみるとPHP Serverというプラグインがあるようですが、.php拡張子のみPHPプログラムとして認識されるようで、使い勝手が良いとは言えないかもしれませんし（勉強段階くらいなら良いかもしれないけど、まとまったシステム開発には向かない疑似サーバーみたいなものかなと）、結局はWebサーバ上で動作させるので、MAMPに乗せている現状のままで良いのではないでしょうか。

結論としては、ポート5500で確認は現状ではできないし、無理に動作するように頑張る必要はないということです。
MAMPのポート番号を確認して、MAMPでのアクセスのみにしてください。

Comments

[uda]

m.ts10806さま　dodox86さま　hoshi-takanoriさま

たくさんのご指摘、ご回答ありがとうございました。
m.ts10806さまのご指摘どおりPHP Serverを利用しポート番号3000の"http://localhost:3000/dist/index.html"でphpの動作確認ができました。

また、試しにmampのapacheのポート番号を80から8080へ変更し"http://localhost:8080/chari/dist/index.html"でもphpの動作確認ができました。
※「ポート番号省略でアクセスしている＝ポート番号80」を知らず、なぜポート番号のないurl"http://localhost/chari/dist/index.html"でphpが動作するのか理解できていませんでした。

m.ts10806さまにはわざわざLive Serverのことまでお調べ頂き、本当にありがとうございました。

[m.ts10806]

調べた・・・というより、たまたまteratailの質問でそのようなの（プラグインのポートが出てた）を見た記憶がありコメントしてるうちに思い出し、
VSCodeのプラグイン観点でGoogle検索してみたらすぐヒットしたので（自身はVSCode重用者ではないのでそこだけ調べた）、
そこかなという、ある種勘でした。
あまり詳しくない状態でわざわざ5500というポートを指定するとは思えませんでしたしね（それでも5％くらい複数MAMPの可能性を持ってました）