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

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

　使用したもの ー 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で起動すると無事実機に送られていると思います！

　何かありましたら以下に
じぇい👨‍💻(@jyouj__)さん | Twitter

投げ銭も待ってまーす！-> jyouj__さんの投げ銭ビスケット募集中！

Hello!! Nuxt.js【電子書籍】[ 那須 理也 ]

Build your first website with Python and Django【電子書籍】[ Nigel George ]