LoginSignup
0
0

More than 1 year has passed since last update.

ローカルで開発中のページをhttpsでスマホからも見る

Last updated at Posted at 2021-06-29

やり方が分かったので、とりあえず忘れないうちにメモ。

サーバの設定

laragon をインストール。下記は chocolatey を使った場合。

chocolatey
cinst -y laragon

Laraon を起動し、Preferences の General よりDocument Rootを設定し、Auto Virtual hostsのチェックをオンにする。
image.png (110.5 kB)
Servises & Ports の https にチェックを入れる。SSL 証明書発行のために管理者権限を求めてくるので(Windows10 の場合)、随時昇格ダイアログの OK ボタンを押す。

プロキシサーバの設定

ローカル開発環境のhostsに書かれた内容をスマホやタブレットからも参照するため、laragon の中にプロキシサーバも立てる。

laragon の httpd.conf を開く。
image.png (94.8 kB)

次の3つのモジュールのコメントアウト(先頭の#記号)を外す。

httpd.conf
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule rewrite_module modules/mod_rewrite.so

httpd.confファイルの最後に以下の内容を追加する。

httpd.conf
<IfModule mod_proxy.c>
  ProxyRequests On
  ProxyVia On
  Listen 8080
  <Proxy *>
    Order deny,allow
    Deny from all
    Allow from all
  </Proxy>
</IfModule>

httpd.conf ファイルの編集を保存し、laragon の apache を再起動する。Reload ではなく、一度停止(Stop)から起動させた方ががよさそう。

スマホ・タブレット側のプロキシ設定

スマホ・タブレット側にプロキシ設定を行うことで、テスト用 PC のhostsに書かれているドメイン名で開発中ページを表示することができるようになる。

スマホやタブレットのプロキシ設定を行う。以下は iPhone の例。
サーバ欄にはプロキシサーバにしている PC の IP アドレスを入力し、ポート欄には上記設定でListenにある通り8080と入力する。

IMG_0043.PNG (72.5 kB)

以上でプロキシ設定を行ったスマホやタブレットや別 PC などからもhttps://プロジェクトディレクトリ名.test/でアクセスできるようになる。

注意

プロキシ設定中はインターネットやほかの PC へアクセスできなくなるかもしれない。(未検証)
また、プロキシサーバ設定はセキュリティを何も考えていないので、プロキシサーバを立てたまま公共的なネットワークに接続しないようにすること。

iPhone や iPad でアクセスするとオレオレ証明書に反応して警告画面が表示されるが、何度か「表示」や「進む」などのリンクやボタンを押せば開発中ページが表示されるようになる。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0