expo启动项目默认是使用的端口是19000,而且expo自带一个免费的隧道穿透功能。但是这个免费的隧道穿透毕竟是国外的不稳定。既然官方都支持隧道穿透了,自定义隧道应该也是可以的吧!
如何能稳定远程开发呢?我就在想自己搭建隧道吧!
建立隧道
目标:把本地的19000端口转发到外网地址。
钉钉隧道(免费)
用过的都说好,免费的甚至比收费的还稳还快!
使用方法详细见:https://blog.csdn.net/lxyoucan/article/details/112548798
这里就以钉钉隧道为例。
nohup /home/vncuser/.soft/ding/ding -config=/home/vncuser/.soft/ding/ding.cfg -log=stdout -log-level=INFO -proto=http -subdomain= justrn 19000> rn.out 2>&1 &
上面命令中的路径自行修改。
这样就行实现了:
访问http://exporn.vaiwan.com/
相当于访问本地的http://127.0.0.1:19000
然后把exp://exporn.vaiwan.com:80
放到expo
app中打开。
本以为这就结束了,发现实际上是无法正确打开的。
然后我就各种折腾找资料。
最终发现了无法正确打开的原因:
虽然外网可以访问这个了,但是app加载资源文件时还是从19000端口取,这就很难受了。😣
比如:访问http://exporn.vaiwan.com/ 结果如下:
{"name":"my-project","slug":"my-project","version":"1.0.0","orientation":"portrait","icon":"./assets/icon.png","splash":{"image":"./assets/splash.png","resizeMode":"contain","backgroundColor":"#ffffff","imageUrl":"http://exporn.vaiwan.com:19000/assets/./assets/splash.png"},"updates":{"fallbackToCacheTimeout":0},"assetBundlePatterns":["**/*"],"ios":{"supportsTablet":true},"android":{"adaptiveIcon":{"foregroundImage":"./assets/adaptive-icon.png","backgroundColor":"#FFFFFF","foregroundImageUrl":"http://exporn.vaiwan.com:19000/assets/./assets/adaptive-icon.png"}},"web":{"favicon":"./assets/favicon.png"},"_internal":{"isDebug":false,"projectRoot":"/home/vncuser/.wp/expo/my-project","dynamicConfigPath":null,"staticConfigPath":"/home/vncuser/.wp/expo/my-project/app.json","packageJsonPath":"/home/vncuser/.wp/expo/my-project/package.json"},"sdkVersion":"41.0.0","platforms":["ios","android","web"],"developer":{"tool":"expo-cli","projectRoot":"/home/vncuser/.wp/expo/my-project"},"packagerOpts":{"scheme":null,"hostType":"lan","lanType":"ip","devClient":false,"dev":true,"minify":false,"urlRandomness":"29-ybg","https":false},"mainModuleName":"node_modules/expo/AppEntry","bundleUrl":"http://exporn.vaiwan.com:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false","debuggerHost":"exporn.vaiwan.com:19000","logUrl":"http://exporn.vaiwan.com:19000/logs","hostUri":"exporn.vaiwan.com:19000","iconUrl":"http://exporn.vaiwan.com:19000/assets/./assets/icon.png","id":"@anonymous/my-project-e3a1d459-57f6-4499-90aa-9bdaa95ac382"}
发现里面很多资源还是访问19000的比如:
http://exporn.vaiwan.com:19000/assets/./assets/icon.png
https://stackoverflow.com/questions/49125697/host-expo-app-on-external-network
这篇文章给了我启发。
解决端口固定19000问题
在yarn start
之前运行以下命令,或者直接把下面内容放进环境变量之中。
export EXPO_MANIFEST_PROXY_URL="http://exporn.vaiwan.com"
export EXPO_PACKAGER_PROXY_URL="http://exporn.vaiwan.com"
然后在运行
yarn start
启动服务,这个时候访问http://exporn.vaiwan.com/发现里面资源文件中的端口已经正确了,如下:
{"name":"my-project","slug":"my-project","version":"1.0.0","orientation":"portrait","icon":"./assets/icon.png","splash":{"image":"./assets/splash.png","resizeMode":"contain","backgroundColor":"#ffffff","imageUrl":"http://exporn.vaiwan.com:80/assets/./assets/splash.png"},"updates":{"fallbackToCacheTimeout":0},"assetBundlePatterns":["**/*"],"ios":{"supportsTablet":true},"android":{"adaptiveIcon":{"foregroundImage":"./assets/adaptive-icon.png","backgroundColor":"#FFFFFF","foregroundImageUrl":"http://exporn.vaiwan.com:80/assets/./assets/adaptive-icon.png"}},"web":{"favicon":"./assets/favicon.png"},"_internal":{"isDebug":false,"projectRoot":"/home/vncuser/.wp/expo/my-project","dynamicConfigPath":null,"staticConfigPath":"/home/vncuser/.wp/expo/my-project/app.json","packageJsonPath":"/home/vncuser/.wp/expo/my-project/package.json"},"sdkVersion":"41.0.0","platforms":["ios","android","web"],"developer":{"tool":"expo-cli","projectRoot":"/home/vncuser/.wp/expo/my-project"},"packagerOpts":{"scheme":null,"hostType":"lan","lanType":"ip","devClient":false,"dev":true,"minify":false,"urlRandomness":"29-ybg","https":false},"mainModuleName":"node_modules/expo/AppEntry","bundleUrl":"http://exporn.vaiwan.com:80/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false","debuggerHost":"exporn.vaiwan.com:80","logUrl":"http://exporn.vaiwan.com:80/logs","hostUri":"exporn.vaiwan.com:80","iconUrl":"http://exporn.vaiwan.com:80/assets/./assets/icon.png","id":"@anonymous/my-project-e3a1d459-57f6-4499-90aa-9bdaa95ac382"}
然后把exp://exporn.vaiwan.com:80
放到expo
app中打开。发现可以正确使用啦!
- 安卓expo app上直接就可以使用了
- ios 模拟器上的expo模拟器目前不行,原因不清楚,后面在研究研究吧!
开发体验
已经问题,不清楚是不是因隧道穿透导致还是因为expo本身的bug.
- iOS模拟器,无法使用这种域名的穿透,但是我试过内网ip穿透成外网ip是成功的,不清楚是不是域名解析的问题
- android可以正常使用,但是遇到过一个小问题,在服务器按r,重启加载app会闪退(mumu模拟器),不清楚是不是BUG
iOS远程开发
上面提到了在iOS模拟器上使用上面的域名方式的穿透(钉钉)无法使用。但是还是需要调试iOS程度啊,怎么办呢?我是使用如下方法解决的:
-
使用frp把内网ip端口穿透到外网的ip相同端口上,比如:把内网ip:127.0.0.1:19000 映射到6.6.6.6:19000
这种方法很简单,缺点是外网端口要与内网的完全一样,端口资源比较稀少。有点浪费端口 -
使用frp安全地暴露内网服务
https://gofrp.org/docs/examples/stcp/
内网服务器19000==》外网服务器7000==》映射到本地端口19000
这样就会比较省端口资源
参考
https://stackoverflow.com/questions/49125697/host-expo-app-on-external-network