WebStorm Deployment 实战:一键实时同步到腾讯云 ECS

WebStorm Deployment 实战:一键实时同步到腾讯云 ECS

关键词:WebStorm | SFTP | 腾讯云 | 实时同步 | 自动上传


1. 场景痛点

  • 本地开发 Node.js,手动 scp/rsync 麻烦
  • 保存 → 上传 → SSH → 重启 流程重复
  • 想要 「写几行代码立刻看效果」

2. 最终效果

操作 结果
Cmd + S 自动增量上传到 ECS /home/nodejs/<项目名>
右键项目根 一次性全量上传
配置 Exclude node_modules 等被永久忽略

3. 架构交互图

WebStorm macOS 腾讯云ECS:22 监听文件保存事件 SFTP(SSH 22) 增量上传 PM2 / node 重启(可选) 浏览器刷新即见效 WebStorm macOS 腾讯云ECS:22


4. 前置准备(一次性)

步骤 命令/操作 说明
① 创建密钥对 腾讯云控制台 → 密钥 → 新建 务必保存 .pem
② 绑定密钥 关机 → 绑定密钥 → 开机 仅首次
③ 修改权限 chmod 400 xxx.pem macOS 强制要求
④ 创建远程目录 mkdir -p /home/nodejs 项目落盘位置

5. WebStorm 配置总览(图文)

5.1 添加 SFTP 连接

复制代码
Settings → Build, Execution, Deployment → Deployment → +
Type: SFTP
SSH configuration: <create>
字段 示例值
Host 124.xxx.216.48
User root(CentOS)或 ubuntu
Auth Key pair → 选择 xxx.pem
Port 22

▶ 点击 Test Connection 显示 Successfully connected


5.2 映射关系(核心)

配置项 实际远程路径
Root path /home 基准目录
Deployment path ./nodejs/<项目名> 相对基准
Local path /Users/eric/Projects/<项目名> 本地根

拼接结果:/home/nodejs/<项目名>/...


5.3 流程图:上传逻辑

是 否 文件被保存 Automatic Upload 已开启? 计算相对路径 SFTP 上传至 Root+Deployment 等待手动 Upload 远程文件刷新


6. 常用操作速查

需求 入口
首次全量 右键项目根 → Deployment → Upload to ...
增量自动 Tools → Deployment → Automatic Upload (always)
排除目录 Settings → Deployment → Excluded Paths+
对比差异 Tools → Deployment → Compare with Deployed ...
下载远程 Tools → Deployment → Download from ...

7. 典型排除清单

复制代码
node_modules
.git
*.log
dist
build
.env
.vscode
.idea

8. 故障速解

现象 原因 解决
Permission denied 私钥权限过大 chmod 400 key.pem
A SFTP host is not specified 未选 SSH configuration 点击 <create> 新建并测试
上传后路径多一层 /root Root path 写成 /root 改成 /home 或目标基准
只传了单个文件 当前焦点是单文件 右键项目根再 Upload

9. 一键脚本(可选)

.zshrc 里加个别名,保存后顺手重启服务:

bash 复制代码
alias runnode='ssh -i ~/.ssh/xxx.pem root@124.xxx.216.48 "cd /home/nodejs/<项目名> && pm2 restart app"'

本地改完代码 Cmd+S → 终端 runnode → 浏览器刷新即可。


10. 结语

配置一次,终身"保存即部署 "。

把 Deployment 玩熟后,你也可以无缝切换到 VS Code SSHJetBrains Gateway ,但思路完全一致:「让工具替你搬运代码」


🎉 Happy Coding & 永不手动 SCP!


以我之思,借AI之力!

相关推荐
iOS开发上架5 天前
系统架构-信息系统
python·腾讯云
iOS开发上架5 天前
系统架构-进程管理
python·腾讯云
Diligently_5 天前
idea 中vm option 配置
java·ide·intellij-idea
我命由我123455 天前
在 Android Studio 中,新建 AIDL 文件按钮是灰色
android·ide·android studio·安卓·android jetpack·android-studio·android runtime
AC赳赳老秦5 天前
云原生AI故障排查新趋势:利用DeepSeek实现高效定位部署报错与性能瓶颈
ide·人工智能·python·云原生·prometheus·ai-native·deepseek
被制作时长两年半的个人练习生5 天前
claude code for vscode 配置 qwen3.5
ide·vscode·claude code·qwen3.5
圣心5 天前
Visual Studio Code 中的 AI 智能操作
ide·人工智能·vscode
吹牛不交税5 天前
关于vscode左侧资源管理器目录层级疑似异常的问题
ide·vscode·编辑器
xixi09245 天前
selenium IDE安装使用教程
ide·selenium·测试工具
诸神缄默不语5 天前
如何用腾讯云轻量应用服务器内置OpenClaw应用搭建OpenClaw并接入QQ、飞书机器人,下载skill,开启对话
大模型·腾讯云·qq机器人·智能助手·飞书机器人·clawdbot·openclaw