LoginSignup
63
59

More than 5 years have passed since last update.

iPhone実機でRails開発環境にローカルアクセス

Last updated at Posted at 2015-12-02

はじめに

 Railsでwebアプリを作っている時、スマホのUIを修正する必要があった。
 スマホの画面を確認したいだけならブラウザの機能を使ったり、macを使っている場合はiOSシュミレーター使えばいいのだが、どうしてもiPhone実機のブラウザで動作確認をする必要があった。開発に使用しているOSはUbuntuだったが、Macでも同様にできたので記録しておく。

やり方は二つある。

1. IP直打ちでアクセス

サーバーを立てているPC(以下、サーバPC)とiPhoneで同じWiFiにアクセスして、サーバPCのIPアドレスをiPhoneのブラウザに入力する。
たとえば、自分のサーバPCのIPが192.168.1.4の場合、iPhoneのブラウザに192.168.1.4:3000などと打てばアクセスできる。
Rails4.2以降の場合は以下を参考に、-bのオプションをつける必要がある。
http://qiita.com/tmf16/items/bb789a45c0f456eac11f

サーバPCのIPアドレスは、ifconfigなどを使えば知ることができる。

2. プロキシを経由してアクセス

一つめの方法で大体の場合は事足りるのだが、以下の場合にアクセスすることができない。
・Webアプリでサブドメインを使用する場合
・DNSに登録してないが、ドメイン名でアクセスしたい場合

このような時は、アクセスしたい端末(この場合はiPhone)の/etc/hostsファイルにローカルIPとドメイン名を結びつける情報を書く必要がある.
しかし、iphoneは基本的にhostsは編集できない。

そこで、サーバーPCにプロキシサーバーを立てて、そこを経由して接続する。

具体的には、

・サーバPCの/etc/hostsファイルにその情報を書く
・サーバPCにプロキシサーバーを立てる
・iPhoneから、立てたプロキシサーバーを経由してWifiに接続する

という手順で行う。
こうすることで、iPhoneでドメイン名を入力してアクセスした際に、プロキシサーバーのhostsファイルを参照するのでサーバPCで起動しているRailsにアクセスすることができる。

実際にやってみる

それでは、二つめの方法を実際にやってみる。

準備

> rails new testApp

/etc/hostsファイルを編集

/etc/hostsに以下を追加

127.0.0.1       test.dev

この時点で、

rails s

でサーバーを起動し、http://test.dev:3000 にアクセスしてRailsのスタートページが表示されることを確認する。

squid3インストール

プロキシサーバーをたてる。プロキシサーバーにはSquidというアプリを使用する。
インストールにはHomebrewを利用する。Ubuntuはapt-getでインストールできる。

brew install squid

Squid設定

ubuntuの場合は/etc/squid3/squid.conf, macの場合は/usr/local/etc/squid.confに以下の設定を追加する。

# ローカルIP(自分の場合は192.168.1.0/24だった)からアクセスできるようにする
acl lan src ローカルIPアドレス
http_access allow lan

Squid起動

> sudo squid

起動していることを確認する

>sudo ps aux | grep squid
User      33798   0.0  0.0  2453268    792 s001  S+   10:41PM   0:00.00 grep --color=auto squid
User      33654   0.0  0.1  2471916  13976   ??  S    10:38PM   0:00.33 (squid-1)
User      33652   0.0  0.0  2469888    656   ??  Ss   10:38PM   0:00.00 squid

iPhone側でプロキシの設定

個別Wifi設定の一番下、HTTPプロキシのタブを手動にして、サーバPCのIPとSquidのポート(デフォルトで3128)を入力
IMG_0062.PNG

アクセスしてみる

iPhoneのブラウザでhttp://test.dev:3000 を入力する
IMG_0063.PNG

できた

参考

63
59
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
63
59