Webstorm 快速部署 dist 包至远程服务器技术文档
本文详细介绍通过 Webstorm 自带的 Deployment 功能，将本地项目打包后的 dist 目录快速部署到远程服务器的完整操作流程，实现本地 dist 包与远程服务器的上传、下载、同步操作，提升项目部署效率。
一、前期准备
- 本地项目完成打包构建，生成dist 目录（确保为最新打包版本）；
- 准备远程服务器有效连接信息：服务器 IP 地址（Host）、登录账号/密码，或.pem 格式等密钥文件、服务器用于存放项目的目标路径；
- 已安装并打开 Webstorm，且成功打开待部署的本地项目工程。
二、配置远程服务器连接信息
- 打开 Webstorm 顶部菜单栏，依次选择 Tools -> Deployment -> Configuration，进入部署配置页面；
-
在配置页面左上角点击加号，选择远程连接的Type 类型，常用类型包含 FTP/FTPS/SFTP，根据实际服务器配置选择（推荐 SFTP）；
-
自定义填写New server name，名称可随意设置，用于区分不同的远程部署配置，方便后续查找；
-
配置Connection模块的核心连接参数，参数说明及填写要求如下：
-
Host：填写远程服务器的 IP 地址，示例：192.168.2.xxx；
-
Root path：填写服务器端用于保存项目的根路径，即 dist 包上传后在服务器的基础存放路径；
-
Web server URL：在远程服务器 IP 地址前添加
http://，示例：192.168.2.xxx； -
User name：填写远程服务器的登录账号；
-
Authentication：选择认证方式，支持Password（密码）和Key pair（密钥）两种：
- 选择 Password：直接填写服务器对应的登录密码；
- 选择 Key pair：上传.pem 等格式的密钥文件完成身份认证；
-
可选操作：点击Test Connection测试服务器连接是否成功；
-
-
所有连接信息配置完成后，点击Apply保存配置，完成远程服务器的连接配置。
三、配置本地 dist 路径与服务器路径的映射关系
-
在上述部署配置页面中，切换至Mappings标签页；
-
配置本地与远程的路径映射参数，三项核心参数说明及填写要求如下：
- Local path：选择本地项目中dist 目录的绝对路径；
- Deployment path：填写 dist 包在远程服务器的具体存放路径，该路径为相对路径，基于第二步中配置的 Root path；
- Web path：填写相对路径，基于第二步中配置的 Web server URL；
-
路径配置无误后，点击Apply+OK保存映射配置，完成本地 dist 路径与远程服务器路径的关联。
四、执行 dist 包部署至远程服务器操作
完成服务器连接配置和路径映射后，即可执行 dist 包的部署操作，具体步骤如下：
-
确认本地项目已重新打包，dist 目录为最新的项目构建文件；
-
在 Webstorm 的项目目录结构中，找到打包生成的dist 文件夹；
-
右键点击 dist 文件夹，在弹出的右键菜单中选择Deployment，根据实际需求选择对应的操作选项：
- upload to [配置的服务器 Name] ：将本地最新的 dist 包上传至远程服务器指定路径，覆盖服务器原有文件；
- download from [配置的服务器 Name] ：将远程服务器上的 dist 文件下载至本地，适用于从服务器拉取最新项目版本；
- sync with deployed [配置的服务器 Name] ：将本地 dist 包与远程服务器的对应文件进行同步，保证两端文件版本一致；
-
选择对应操作后，Webstorm 会自动执行部署动作，等待操作进度完成即可。
五、注意事项
- 配置 Root path 时，需确保该路径在远程服务器上已存在，且登录账号拥有该路径的读写权限，否则会导致部署失败；
- Mappings 标签页中，Local path 必须为 dist 目录的绝对路径，Deployment path 为相对 Root path 的路径，不可填写绝对路径；
- 若使用 Key pair 密钥认证方式，需确保密钥文件未损坏，且服务器端已配置对应的公钥，避免出现身份认证失败；
- 执行上传、同步操作前，建议先备份远程服务器上的原有 dist 文件，防止本地错误文件覆盖服务器正常文件；
- 部署完成后若服务器端无法访问项目，需检查 Web server URL、路径映射配置及服务器的 Web 服务配置是否匹配；
- 可勾选Save password保存服务器登录密码，避免每次部署重复输入，提升操作效率。
