前言
上节讲到如何在云服务器上部署expo的环境,本节将介绍在如何配置本地IDE环境,利用ftp/sftp插件功能来实现远程开发。做到本地修改工程代码,多端可见。
一、环境搭建
参考资料:
phpstorm/webstorm远程FTP服务端同步编辑文件(本文的配置部分参考来源)
安装清单:
(Required)
WebStorm:这里我选择的IDE是WebStorm,可供选择的IDE包括VS Code,notePad++,atom+Nuclide等等,依照个人喜好。WebStorm更适合对jetbrains公司产品(Android Studio,PhpStorm,Pycharm等等)熟悉的开发者。
步骤1:新建本地工程目录
在本地新建一个工程目录,用于同步服务端的工程文件。
步骤2:配置 FTP/SFTP
步骤2-1:选择Tool
=> Deployment
=> Configuration
步骤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...
查看配置是否成功
步骤2-3:填写Mappings
下的表单
①Local path
填写我们新建的目录位置即可
②Deployment path onserver ...
填写本地项目希望同步的远程服务器的目录位置
步骤2-4:选择Tools
=> Deployment
=> Browse Remote Host
显示服务器文件目录
经过上面的配置后,如果配置出错上述的选项是不可点击状态的,需要进行检查重设。
步骤3:同步服务器目录文件
找到上一节我们在服务端新建的RN工程,这里是/etc/root/rn/EdwardRNPro
,这里我们要同步的文件需要去除node_modules
,该目录是RN下载的依赖库,我们可以只同步package.json
,在本地进行下载,若进行同步需要耗费大量的下载时间。
在工程目录下
右键
选择Download from here
进行同步,在控制台可以看到对应的下载情况,同步成功后将在左侧的目录下看到工程文件。
可以看到同步后的工程文件里面没有
node module
目录
步骤4:编辑修改并上传文件
步骤4-1:对工程下App.js
文件进行修改
修改前
<Text>Open up App.js to start working on your app!</Text>
修改后
<Text>Hello World!</Text>
步骤4-2:上传修改的App.js
文件,选择Tools
=> Deployment
=> Upload to ...
控制台可以看到,表示成功上传
步骤5:登录服务器,查看修改是否成功(参考上一节的调试)
①在服务器工程目录下命令行运行npm start
②并用expo客户端
打开。
步骤6(可选):修改上传文件时机
每次修改文件后都要手动去进行上传,是一件比较麻烦的事情。因此可以修改文件的时机来完成自动上传。
①点击Tools
=> Deployment
=> Options
②Upload changed files automatically to the default server
选项中的Never
改为On explicit save action(Ctrl+S)
,即按保存时自动上传
③摇一摇打开hot reloading
,修改文件,保存,可以看到文本发生了更改。
小结
本节讲述了怎么在本地远程编辑服务端的代码,实现一端修改,多端可见的效果。不足之处在于这种开发模式没有进行严格的版本控制,后续将探索跟进。