View・Reactでの実機テスト(localtunnel,Ngrok)の方法について

本記事は自分がView・Reactを使ってThree.jsを使ったAR表現サイトを作ろうとした際の最初につまずいた部分としてカメラを使うAR表現を行うためにはHTTPS通信が必要なため「実機テストどうすればええねん！！！」ってなったので書いて皆さんに共有することにしました。

結論として

先に結論としてどうすればいいのかを先に述べておくと
vite.config.js(ts)のserver:{}の内部に

vite.config.js

    allowedHosts: [
      '.loca.lt',
      '.ngrok-free.app'
    ],

を追加するだけです！！

以下に詳細を記述します。

現状の問題の確認

まずVite・Reactを選択してプロジェクトを開始します。

その状態で

terminal

npm run dev

にて開発モードを起動してlocaltunnel・ngrokを起動すると

PowerShell

lt --port 5137 
ngrok http 5137

それぞれ起動はできますが展開したサイトに入ろうとするとそれぞれ

↓Local Tunnel↓

↓Ngrok↓

このようなエラーが出て表示ができなかったできませんでした、、

解決手順

原因の分析

Viteでは　バージョン４以降では、不正なホストからのアクセスを防ぐために、localtunnelやNgrokのドメインが許可されていないホストとしてブロックされてしまっています。

解決法

上の原因からlocaltunnel,ngrokのドメインを明示的に許可することで解決できます！！

まずViteによって作成されたvite.config.js(ts)を開きます。
開くと

vite.config.js(ts)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()]
});

このように記述されています。

ここに許可したいドメインを

vite.config.js(ts)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 5173,
    allowedHosts: ['tired-parrots-wear.loca.lt'] // 許可したいドメインを挿入
  }
});

このように記述すると指定したドメインはブロックされることがなくなるので利用が可能になります。

localtunnelやngrokでは作成ごとにランダムなドメインが発行されるため、ワイルドカードを使用して

vite.config.js(ts)

export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 5173,
    allowedHosts: [
      '.loca.lt', // localtunnelのURLを許可
      '.ngrok-free.app' // ngrokのURLを許可
    ], 
  }
});

と記述すると無事利用することが可能になると思います！！