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之力!

相关推荐
量子炒饭大师8 小时前
【一天一个计算机知识】—— VScode 极速搭建:打造你的全能代码武器库
ide·vscode·编辑器
gagaga....8 小时前
解决claude code for vscode对话返回 api error: 403 {“error“:{“type“:“forbidden“,“message“:.....的问题过程
ide·vscode·编辑器
hjx0510118 小时前
VSCode与Anaconda安装全攻略
ide·vscode·编辑器
小小管写大大码8 小时前
如何让vscode变得更智能?vscode接入claude实现自动编程
运维·ide·vscode·自动化·编辑器·ai编程·腾讯云ai代码助手
WarmSword18 小时前
mac上用cursor/vscode调试root权限进程
c++·ide·vscode·macos·mac
HAPPY酷20 小时前
构建即自由:一份为创造者设计的 Windows C++ 自动化构建指南
开发语言·c++·ide·windows·python·策略模式·visual studio
henysugar1 天前
Android studio编译aidl若干问题记录
android·ide·android studio·aidl
阿斌_bingyu7091 天前
FastAdmin 混合式语言包添加繁体中文(zh-tw)完整教程
android·ide
何中应1 天前
PyCharm报`Invalid Python SDK`错误
ide·python·pycharm
CSDN_RTKLIB2 天前
Visual Studio不改变文件编码情况下解决C2001
c++·ide·visual studio