用PHPStorm实现在本地实时编辑服务器端的代码

背景

我在在Mac上的虚拟机中搭建了一台LAMP服务器,在本地编辑完代码,还需要进行传输到服务器上,对源代码进行删除,复制等操作,非常麻烦,所以在想如何在本地即可实时编辑服务器上的代码,于是有了这篇文章。

前期准备

  1. 下载PHPStrom,下面是官方下载地址
https://www.jetbrains.com/phpstorm/download/
  1. 有一台远程服务器,无论是LNMP或者LAMP。

操作步骤

第一步 打开PHPStorm,选择Create New Project from Existing Files

用PHPStorm实现在本地实时编辑服务器端的代码_第1张图片
创建一个远程服务器存在的项目.png

第二步 选择模式,选择SFTP连接模式

用PHPStorm实现在本地实时编辑服务器端的代码_第2张图片
选择SFTP模式连接服务器.png

第三步 填写本地存储的项目名称

用PHPStorm实现在本地实时编辑服务器端的代码_第3张图片
本地存储的项目名称.png

第四步 进入配置页面

用PHPStorm实现在本地实时编辑服务器端的代码_第4张图片
配置页面.png
选项名称 解释
Name 服务器名称
Type 传输模式
FTP host 服务器地址
PORT 默认端口
Root path 根目录
Username 服务器用户名
Auth type Key pair
Private key file 私钥文件
Web server root URL 服务器根目录的Url

第五步 私钥生成与配置

5.1 此时你要连接服务器进行操作相关,mac上ssh连接可以帮到你。

用PHPStorm实现在本地实时编辑服务器端的代码_第5张图片
连接服务器.png

5.2 打开终端输入以下内容(这是连接服务器的命令)

ssh [email protected]

注:wangbaolong是用户名,192.168.20.63是服务器的IP地址

5.3 切换到root用户

sudo su

5.4 切换到root家目录,生成公钥和密钥(切换后默认为家目录)

cd ~
ssh-keygen

注:这时候,会让你输入一条加密语句,默认为空,直接回车即可。
输入此条命令查看私钥和公钥,你会看到.ssh文件,这里面只存储了公钥和私钥。进入里面,会看到id_rsa,id_rsa.pub。配图里多了两个文件,是后加的,后面讲到。

5.5 检查文件是否存在 .ssh

ls -al
用PHPStorm实现在本地实时编辑服务器端的代码_第6张图片
生成公钥和私钥.png

5.6 将公钥复制一份,并更名为authorized_keys(寻找公钥会默认找此文件)

cp id_rsa.pub authorized_keys

5.7 这一步实现的将私钥传到本地。这里提供一个工具scp命令。

# 服务器:将私钥复制一份到wangbaolong用户的家目录,ssh不支持root连接,只能用其他用户。
cp id_rsa /home/wangbaolong

# 还需要多用一步,改变权限
chmod 777 id_rsa

# 本地:打开终端(mac下的命令行),输入以下命令,将文件复制到本地的桌面
scp [email protected]:~/id_rsa Desktop

第六步 选择私钥文件,连接服务器(回到PHPStorm的配置页面)

选择私钥后要点击Autodetect,这个是自动检测服务器的目录。检测出来后自己选择一下服务器的根目录即可。下面是默认的根目录选择

/var/www/html

第七步 在服务器上拉项目

选择文件,点击Project Root即可

用PHPStorm实现在本地实时编辑服务器端的代码_第7张图片
拉项目.png

第八步 设定默认访问的目录,一般默认即可

用PHPStorm实现在本地实时编辑服务器端的代码_第8张图片
设置访问目录.png

第九步 设定command+s保存并上传到服务器。

用PHPStorm实现在本地实时编辑服务器端的代码_第9张图片
工具.png
用PHPStorm实现在本地实时编辑服务器端的代码_第10张图片
保存上传.png

第十步 测试一下吧。修改完成是不是服务器上文件立马更新了。恭喜!

我试验的时候,发生了几次Gateway和没有找到文件。究其原因都归结于,在配置服务器目录上出了问题,你可以在设定服务器目录那几个步骤上多看一下,加油!

你可能感兴趣的:(用PHPStorm实现在本地实时编辑服务器端的代码)