WebStorm部署云服务器-详细版

概要:在Webstorm中部署服务器,把WebStorm中的项目直接上传/下载至服务器,这样简化了中间的很多步骤

第一步:选择Tools>Deployment>Configuration,进入Deploment对话框;

在这里插入图片描述

第二步:在Deployment中点击左上方的“+”,选择SFTP,给server取一个名字;

在这里插入图片描述
在这里插入图片描述

第三步:在左边选择自己要设置的SFTP,默认打开的是Connection;

在这里插入图片描述

① 点击右边的“…”弹出添加服务器的对话框,点击左上方的“+”会出现右边的选项,Host表示服务器IP,User name表示服务器远程连接名称(注意:这里的名称不是实例主机名),Authentication type表示验证类型,这里我选择的是Password密码连接

在这里插入图片描述
如果忘记了服务器的连接名称和密码,第一种是去阿里云控制台>云服务器ECS>实例,如图所示,可以重置和修改密码;
在这里插入图片描述
第二种是Shell连接服务器的软件中查看,如图所示,这里只能查看服务器的连接名称,密码看看试吧;
在这里插入图片描述
在填入连接名称和密码后可以点击Test Connection进行连接测试。

②Root Path就是服务器中Tomcat下webapps的路径,如我的“/opt/apache-tomcat-9.0.10/webapps”;
③Web Server URL:就是浏览器访问得路径,如“http://www.xxx.com/daxigua”,这里需要注意下,填写这个路径后启动webstorm中这个项目会直接访问这里填写的路径,但不设置这个途径又不行,知道的朋友可以评论交流交流;
第四步:配置Mappings,如图所示,上传服务器中的文件夹名必须和Web Server URL路径最后的文件夹名相同,不然访问不到;

在这里插入图片描述

第五步:配置完后需要选中当前设置的SFTP,然后点击上方的“√”,这样才能设置为默认上传使用的SFTP;

在这里插入图片描述

第六步:在settings>Build…>Deployment>Options中设置什么时候把修改后的上传至服务器,这里有三个选项:

Never:手动上传的时候才会上传
Always:一旦本地文件更新就会自动上传
On Explicit save action :手动保存的时候才自动上传
在这里插入图片描述

第七步:所有的都部署好了后,需要先把整个项目上传一次

在这里插入图片描述
在这里webstorm部署云服务器就完成了,如果需要在服务器上下载项目到webstorm中,前面的配置都是一样的,只是需要在webstorm中创建一个文件夹,把这个文件夹设置为下载项目的文件夹,如图:
在这里插入图片描述
最后点击Download from…就可以了。

WebStorm 是一款由 JetBrains 开发的集成开发环境 (IDE),专门用于前端开发。以下是 WebStorm 的使用教程: 1. 安装和配置: - 下载并安装 WebStorm,可以从 JetBrains 官方网站上获取。 - 打开 WebStorm,按照提示进行基本配置,如选择主题、键盘布局等。 2. 创建项目: - 在 WebStorm 中,点击 "Create New Project"(新建项目)按钮或选择 "File" -> "New Project"(文件 -> 新建项目)来创建一个新的项目。 - 选择适当的项目类型和目录,然后点击 "Create"(创建)按钮。 3. 编辑代码: - 在 WebStorm 的编辑器中,你可以编写 HTML、CSS 和 JavaScript 代码。 - 代码自动补全:WebStorm 提供了智能代码补全功能,可以根据你的代码上下文自动完成代码。 - 代码导航:使用快捷键或鼠标点击,可以快速导航到代码中的不同部分。 - 代码重构:WebStorm 提供了一些有用的重构工具,如重命名变量、提取函数等。 4. 调试代码: - WebStorm 内置了强大的调试工具,可以帮助你调试 JavaScript 代码。 - 在编辑器中设置断点,然后点击 "Debug"(调试)按钮来启动调试会话。 - 在调试会话期间,你可以逐行执行代码,查看变量的值,并在需要时进行修改。 5. 本控制: - WebStorm 集成了常见的本控制系统,如 Git 和 SVN。 - 可以使用 WebStorm本控制工具来管理你的代码库,进行提交、拉取、推送等操作。 6. 运行和部署: - WebStorm 支持各种运行和部署选项,如运行 HTML 文件、启动本地服务器等。 - 通过点击 "Run"(运行)按钮,你可以在浏览器中查看你的网页。 这只是 WebStorm 的一些基本使用教程,你可以通过阅读官方文档或在线教程来深入了解更多功能和技巧。祝你在 WebStorm 中愉快地开发!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小场面丨不慌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值