首先配置SSH免密登录，生成密钥对并复制公钥至远程服务器，确保无密码安全连接；接着使用rsync通过SSH加密通道同步文件，利用增量传输提升效率，并可添加--delete和--progress参数实现目录一致与进度查看；然后创建本地部署脚本deploy.sh，封装构建与同步命令，赋予执行权限后一键自动化部署；最后在远程服务器上设置目标目录的所有者为www-data并配置755权限，确保Web服务正常访问。
如果您需要在远程服务器上部署HTML+CSS静态资源，并确保文件同步的高效与安全，可以使用rsync通过SSH进行传输。这种方式不仅加密传输过程，还能实现增量同步，极大提升部署效率。以下是具体操作步骤：
一、配置SSH免密登录
为了实现自动化部署，避免每次输入密码，需配置本地主机到远程服务器的SSH免密登录。该方法基于公钥认证机制，提升连接的安全性与便捷性。
1、在本地终端执行 ssh-keygen -t rsa -b 4096 生成SSH密钥对，按提示保存至默认路径。
2、使用命令 ssh-copy-id user@remote_host 将公钥复制到目标服务器，替换 user 为远程用户名，remote_host 为服务器IP或域名。
立即学习“前端免费学习笔记（深入）”；
3、测试连接：运行 ssh user@remote_host，若无需密码即可登录，则配置成功。
二、使用rsync通过SSH同步文件
rsync结合SSH可在加密通道中高效同步本地HTML+CSS文件至远程服务器。其支持差异传输，仅发送变更部分，显著减少部署时间。
1、执行基础同步命令：rsync -avz -e ssh ./dist/ user@remote_host:/var/www/html/，其中 ./dist/ 为本地构建目录，/var/www/html/ 为远程网站根目录。
2、添加 --delete 参数以删除远程端多余文件，保持目录完全一致：rsync -avz --delete -e ssh ./dist/ user@remote_host:/var/www/html/。
3、如需查看传输进度，加入 --progress 参数，实时显示每个文件的同步状态。
三、设置本地脚本自动化部署
将重复的rsync命令封装为本地脚本，可一键完成构建与部署，适用于频繁更新的前端项目。
1、在项目根目录创建部署脚本 deploy.sh，写入构建与同步指令。
2、脚本内容示例：
#!/bin/bash
npm run build
rsync -avz --delete -e ssh ./dist/ user@remote_host:/var/www/html/
3、赋予脚本执行权限：chmod +x deploy.sh，之后运行 ./deploy.sh 即可自动完成全流程。
四、配置远程服务器目录权限
确保远程服务器上的目标目录具有正确的读写权限，防止因权限不足导致同步失败或网页无法访问。
1、登录远程服务器，执行 sudo chown -R www-data:www-data /var/www/html/ 将目录所有者设为Web服务用户（如www-data）。
2、设置安全权限：sudo chmod -R 755 /var/www/html/，保证文件可读但不可随意修改。
3、确认SELinux或AppArmor等安全模块未阻止文件访问，必要时调整策略规则。
