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 SSH 或 JetBrains Gateway ,但思路完全一致:「让工具替你搬运代码」。


🎉 Happy Coding & 永不手动 SCP!


以我之思,借AI之力!

相关推荐
风华同学8 小时前
vscode远程连接
ide·vscode·编辑器
kiss strong10 小时前
idea显示前进后退按钮
java·ide·intellij-idea
ShuiShenHuoLe11 小时前
Visual Studio 2022 Community 下载指南
ide·visual studio
腾讯云大数据13 小时前
腾讯云数据智能体TCDataAgent升级:大数据平台不只“给人用”,也要“给Agent用”
大数据·云计算·腾讯云
一路向北he1 天前
trae或者vscode定义了文件,但是文件不亮是灰的
ide·vscode·编辑器
sunburn-1 天前
Java 排序算法详细教学:从冒泡排序到快速排序
java·开发语言·数据结构·ide·算法
life码农1 天前
PhpStorm或Pycharm中 如何从某个位置全选文字到文件末尾
ide·pycharm·phpstorm
神一样的老师2 天前
RA-Eco-RA4M2-100PIN-V2.0 开发环境:VSCode + FSP 从新建工程到点亮 LED
ide·vscode·编辑器
围炉聊科技2 天前
你从IDE切到ADE了吗?智能体开发环境赛道地图——智能体基建系列
ide·人工智能
passion2 天前
CnPack IDE专家包发布1.8.1正式版!
ide·delphi·cnpack