在使用 Visual Studio 開發 Web 專案時,因為客戶使用 iPad Mini 為操作界面,
雖然 Chrome 擁有 Device Mode & Mobile Emulation 功能,可以滿足大部份的視覺模擬。
但是在一些細微的視覺差異以及在硬體上,還是只能在實體機上面呈現。
然而,預設 Visual Studio Web 專案啟動時,使用的 IIS Express 是只能本地存取的 (localhost access only),所以我們只能一再的將修正後的程式部署到開發環境中的 IIS Server,在 iPad 上確認是否符合預期,如果不是則再重覆上面的動作,實在是很累人。
所以,決定上網尋找一下,能不能讓 Visual Studio 2013 IIS Express 支援遠端存取 (Remote Access),答案是可以!下面是修改步驟。
專案 > 屬性 > Web 頁面中,有個 專案 URL,原本是 localhost:54926 (54926 是隨機 port 號),改為 127.0.0.123:54926 ( 127.0.0.123 是電腦的 IP,或是 domain 也行)。
如果改完之後直接啟動,會出現
Bad Request - Invalid Hostname / HTTP Error 400. The request hostname is invalid.
這是正常的,還需要修改 IIS Express 設定,開啟這個檔案
%USERPROFILE%\My Documents\IISExpress\config\applicationhost.config
找到像這樣的設定:
<site name="WebSiteTest" id="1" serverAutoStart="true">
<application path="/">
<virtualDirectory path="/" physicalPath="E:\Project\WebSiteTest" />
</application>
<bindings>
<binding protocol="http" bindingInformation="*:54926:localhost" />
</bindings>
</site>
將上述中的 bindingInformation="*:54926:localhost" 改為 bindingInformation="*:54926:127.0.0.123"
重新啟動後,就可以看到網站,這時候就可以遠端存取了!
Reference
Connecting to Visual Studio debugging IIS Express server over the lan
Using Custom Domains With IIS Express
Allowing remote access to your IIS Express service