バックエンドDjango&フロントエンドNuxtで作ったものをWKWebViewを使いiPhoneで表示する ローカルホストを使って

公開日:2018-10-14
最終更新:2018-10-24
※この記事は外部サイト(https://jyouj.hatenablog.com/entry/2018/08...)からのクロス投稿です

 めちゃくちゃ苦労したので共有しようと思います。

 使用したもの ー Django, Nuxt, Swift

 Macのlocalhostで動かしています。実機とMacは同じWi-Fiの元にあることが条件です。

IPアドレスの確認

 「システム環境設定」>「ネットワーク」>「Wi-Fi」

 するとIPアドレス(192.168.------)が書かれてます。

Django側の設定

 settings.pyを開いて、

ALLOWED_HOSTS = ['調べたIPアドレス']

Nuxt側の設定

 nuxt.config.jsでlocalhostや127.0.0.1と書いているところを調べたIPアドレスに直す。例えば、axiosの設定とかだと

axios: {
    host: '調べたIPアドレス',
    port: 8000
  },

 次にpackage.jsonを編集していきます。

  "config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "3333"
    }
  },
  "scripts": {
    "dev": "nuxt",
     // 省略
 },

Swift側の設定

 Xcodeで実機と繋げるように設定しておきましょう。

 ViewController.swiftで


import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate {

    var webView: WKWebView!

    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        let myURL = URL(string: "http://IPアドレス:3333")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

 デフォルトだとhttp通信は許可されていないので、info.plistにNSAppTransportSecurityの項目を追加します。追加するとApp Transport Security Settingsに変換されるはずです。

 そして、その項目にNSAllowsArbitraryLoadsを追加してYESに変更します。これでローカルホストとの通信も許可されました。

起動

 Djangoの方のターミナルでは

$python manage.py runserver 0.0.0.0:8000

で起動します

 Nuxtの方は普通にyarn run devで起動します。

 Xcodeで起動すると無事実機に送られていると思います!

記事が少しでもいいなと思ったらクラップを送ってみよう!
104
+1
@jyoujの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする