普段の開発はVirtualBoxで動かしているゲストOS上で行っています。
今回はこのローカル開発環境に携帯実機でアクセスする方法をご紹介します。
ローカルで携帯サイトを開発する時の問題点
仮想化ソフトを使ってローカル開発環境を作れば、自分でDNSサーバーをたてたり、hostsを書き換えれば、ゲストOSの環境にブラウザでアクセスできます。
PCサイトだとこれで問題ないのですが、携帯サイトの場合はこれでは不十分に感じます。（例外もあるでしょうが）ソースがあるのは閉じたネットワークなので実機からインターネット経由ではアクセスできないためです。
そのため、実機で確認するためには外部からアクセスできる場所を用意し、ゾーン設定をして、環境を読み替えるロジックを用意して、そこにソースを配置しなくてはなりません。なにより変更点があれば、その都度ソースを転送する必要があります。
この毎回転送するというのが問題で、一回の作業は短く簡単でも、開発期間中の膨大な確認回数を考えると無視できない時間になるのではないでしょうか。
今回の作業の概要
「どうにかしてソースを外部のサーバーと同期させる。」という考え方もあるとは思いますが、今回は「どうにかして外部からローカルへアクセスさせる。」方向でいきたいと思います。具体的には外部のサーバーへのアクセスをSSHポートフォワードによって開発環境に転送させてみます。下記の様なアクセスになる予定です。
携帯→[インターネット]→アクセス可能なサーバー→[SSHトンネル]→ローカル開発環境
必要なもの
- 【ホストA】ローカル開発環境[http,ssh]
- 【ホストB】インターネット上のアクセス可能なサーバー[http,ssh](要root権限)
- ドメイン(サブドメイン可)
今回ご紹介する方法では以上のものが必要になってきます。
ゾーン設定
ローカル開発環境にアクセスするためのドメインを用意します。サブドメインでも大丈夫です。今回の説明には以下のものを使います。
dev.example.com # 開発環境にアクセスするためのサブドメイン
この「dev.example.com」をインターネット上でアクセスできるサーバーへ向けます。
【ホストB：リモート】ヴァーチャルホスト設定
上記で設定したドメイン「dev.example.com」でアクセスされた時の動作を設定します。
ウェブサーバーにはApacheを使っているのでmod_proxyを使ったポートフォワードの設定を記述します。、今回は「10080」にしてありますが転送するポートは被らなければ何でも良いです。
<VirtualHost *:80>
ServerName dev.example.com
ProxyRequests Off
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
ProxyPass / http://dev.example.com/
ProxyRemote http://dev.example.com/ http://localhost:10080
</VirtualHost>
これで「dev.example.com」へのアクセスは「localhost:10080」へ変換される様になりました。
SSHトンネル作成
上記のステップで変換された「localhost:10080」を受け取り【ホストA】ローカル開発環境へと転送するために、SSHトンネルを繋ぎます。なんとなく難しそうな名前ですが至って簡単です。
ssh -R10080:127.0.0.1:80 dev.example.com
接続先（ホストB）で「10080」ポートをリッスン（受け取り）しローカルの「80」ポートへ転送するという設定を「-R」オプションで実現しています。
【ホストA：ローカル】ヴァーチャルホスト設定
ここまでくれば後はカンタンで、「dev.example.com」でローカル開発環境のウェブサーバーにアクセスできる様にヴァーチャルホストの設定をするだけです。おそらくは既に開発に使っている設定があるでしょうから、そこに追加するだけではないでしょうか。
<VirtualHost *:80>
ServerAdmin root@example.com.vm
ServerName example.com.vm
ServerAlias dev.example.com.vm dev.example.com # ここに追加
実機確認の必要性
これで簡単に実機確認を行う準備ができました。携帯はまだまだ端末によって挙動が異なることが多いです。エミュレーターも宛にならないケースが多いです。実機でデバッグしてみるまで分からないバグも多くあるでしょう。できるだけ実機で確認する習慣をつけたいですね。
