Expo使用隧道穿透远程开发记录

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放到expoapp中打开。
本以为这就结束了，发现实际上是无法正确打开的。
然后我就各种折腾找资料。
最终发现了无法正确打开的原因：
虽然外网可以访问这个了，但是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放到expoapp中打开。发现可以正确使用啦！

• 安卓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

https://breuer.dev/tutorial/react-native-expo.io