RN_Expo云端开发_WebStorm配置（2）

前言

上节讲到如何在云服务器上部署expo的环境，本节将介绍在如何配置本地IDE环境，利用ftp/sftp插件功能来实现远程开发。做到本地修改工程代码，多端可见。

一、环境搭建

参考资料:

phpstorm/webstorm远程FTP服务端同步编辑文件(本文的配置部分参考来源)

安装清单:

(Required)
WebStorm：这里我选择的IDE是WebStorm，可供选择的IDE包括VS Code,notePad++,atom+Nuclide等等，依照个人喜好。WebStorm更适合对jetbrains公司产品（Android Studio,PhpStorm,Pycharm等等）熟悉的开发者。

步骤1：新建本地工程目录

在本地新建一个工程目录，用于同步服务端的工程文件。

新建本地工程目录、.png

步骤2：配置 FTP/SFTP

步骤2-1：选择Tool => Deployment => Configuration

配置sftp.png

步骤2-2：填写Connection下的表单

①选择Type为SFTP（默认端口为22,跟ssh端口一致，默认服务器都会开启。如果选择的是FTP端口为21,服务端还需要额外的配置，并且SFTP相对于FTP有更高的安全性）
②在SFTP host里填上服务器的ip
③在Root path里填上FTP/SFTP连接到的服务器的根目录位置,如果没有要求，可以点击右侧的Autodetect按钮自动配置。、
④输入登录服务器的User name和Password，这里推荐使用root用户登录，避免文件权限带来的麻烦。根据需要勾选Save password。（Auth type里还提供了OpenSSH和PuTTY等方式进行登录）
⑤点击SFTP host右侧的Test SFTP connection...查看配置是否成功

配置ftp.png

步骤2-3：填写Mappings下的表单

①Local path填写我们新建的目录位置即可
②Deployment path onserver ...填写本地项目希望同步的远程服务器的目录位置

配置相对路径.png

步骤2-4：选择Tools => Deployment => Browse Remote Host显示服务器文件目录

经过上面的配置后，如果配置出错上述的选项是不可点击状态的，需要进行检查重设。

服务器目录.png

步骤3：同步服务器目录文件

找到上一节我们在服务端新建的RN工程，这里是/etc/root/rn/EdwardRNPro,这里我们要同步的文件需要去除node_modules，该目录是RN下载的依赖库，我们可以只同步package.json,在本地进行下载，若进行同步需要耗费大量的下载时间。

除去Exclude_Path.png

在工程目录下右键选择Download from here进行同步，在控制台可以看到对应的下载情况，同步成功后将在左侧的目录下看到工程文件。

同步工程文件.png

可以看到同步后的工程文件里面没有node module目录

本地同步后的工程文件.png

步骤4：编辑修改并上传文件

步骤4-1：对工程下App.js文件进行修改

修改前

Open up App.js to start working on your app!

修改后

Hello World!

步骤4-2：上传修改的App.js文件，选择Tools => Deployment => Upload to ...

上传修改的文件.png

控制台可以看到,表示成功上传

上传控制台输入.png

步骤5：登录服务器，查看修改是否成功（参考上一节的调试）

①在服务器工程目录下命令行运行npm start
②并用expo客户端打开。

hello world.png

步骤6（可选）：修改上传文件时机

每次修改文件后都要手动去进行上传，是一件比较麻烦的事情。因此可以修改文件的时机来完成自动上传。
①点击Tools => Deployment => Options
②Upload changed files automatically to the default server选项中的Never改为On explicit save action(Ctrl+S),即按保存时自动上传
③摇一摇打开hot reloading,修改文件，保存，可以看到文本发生了更改。

更改保存时机.png

小结

本节讲述了怎么在本地远程编辑服务端的代码，实现一端修改，多端可见的效果。不足之处在于这种开发模式没有进行严格的版本控制，后续将探索跟进。