環境
- macOS Monterey 12.4
- node v16.15.1 ※インストール手順はこちら
- npm 8.11.0
http-server をインストール
# グローバルにインストール
$ npm install -g http-server
index.html を作成
# まずは任意の場所にディレクトリ作成
$ mkdir node-web
# ディレクトリへ移動する
$ cd node-web
# index.html を作成
$ echo "<html><head><title>Hoge</title></head><body><h1>Hoge</h1></body></html>" > index.html
webサーバーを起動
# ディレクトリの中で http-server を実行
$ http-server
- 起動すると デフォルトでは 8080 ポート
Starting up http-server, serving ./
http-server version: 14.1.1
http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none
Available on:
http://127.0.0.1:8080
http://192.168.11.9:8080
http://192.168.0.98:8080
Hit CTRL-C to stop the server
Webページを確認
ブラウザで http://127.0.0.1:8080 を開き Hoge が表示あれればOK
Android の設定
AndroidManifest.xml の application のところで HTTP も許可するよう修正
<application
// 省略
android:usesCleartextTraffic="true" // ★これを追加して HTTP を許可する。
// 省略
WebVeiw で URL をロードする。
エミュレーターから 127.0.0.1 localhost を開くには 10.0.2.2 を指定する。ポートの指定も忘れずにすること
// http://10.0.2.2:8080 を指定する。
webview.loadUrl("http://10.0.2.2:8080/")
| ネットワーク アドレス | 説明 |
|---|---|
| 10.0.2.1 | ルーター / ゲートウェイ アドレス |
| 10.0.2.2 | ホスト ループバック インターフェースへの特殊エイリアス（開発マシンの 127.0.0.1 など） |
| 10.0.2.3 | 1 番目の DNS サーバー |
| 10.0.2.4 / 10.0.2.5 / 10.0.2.6 | オプションの 2 番目、3 番目、4 番目の DNS サーバー（存在する場合） |
| 10.0.2.15 | エミュレートしたデバイスのネットワーク / イーサネット インターフェース |
| 127.0.0.1 | エミュレートしたデバイスのループバック インターフェース |
エミュレーターで WebView
- http://10.0.2.2:8080 を表示した結果
参考サイト
https://snowsystem.net/development/web-server-simple-launch/#