Git常用指令

第一部分：常用 Git 提交代码指令详解

Git 是目前最主流的分布式版本控制系统，以下是前端开发中常用的 Git 指令及其作用说明：

1. git init

初始化一个新的 Git 仓库（通常在项目根目录首次使用）。

git init

注意：一般从远程克隆项目时不需要手动执行此命令。

---

2. git clone <url>

克隆远程仓库到本地。

git clone https://github.com/yourname/your-project.git

---

3. git status

查看当前工作区状态（哪些文件被修改、新增、未跟踪等）。

git status

---

4. git add <file> 或 git add .

将文件添加到暂存区（staging area）。

• 添加单个文件：

  git add src/App.vue

• 添加所有变更：

  git add .

---

5. git commit -m "提交信息"

将暂存区的内容提交到本地仓库，并附带提交说明。

git commit -m "feat: 新增用户登录页面"

提交信息建议遵循 Conventional Commits 规范，如 feat:、fix:、docs:、style:、refactor: 等。

---

6. git push

将本地提交推送到远程仓库。

git push origin main

origin 是远程仓库的默认名称，main 是分支名（也可能是 master）。

---

7. git pull

从远程拉取最新代码并合并到当前分支（相当于 fetch + merge）。

git pull origin main

建议在推送前先执行 pull，避免冲突。

---

8. 其他实用命令

命令	说明
git log	查看提交历史
git branch	查看本地分支
git checkout <branch>	切换分支
git switch <branch>	（Git 2.23+）更安全的分支切换方式
git merge <branch>	合并指定分支到当前分支
git stash	临时保存工作区改动（不提交）
git reset --hard HEAD~1	回退到上一个提交（慎用！会丢失更改）

---

第二部分：前端项目部署到 Linux 服务器完整流程

---

📝 前端项目部署实战：从本地构建到 Linux 服务器上线（含 SSH + SCP + 解压）

---

一、准备工作

1. 本地环境：

   • 已完成 npm run build，生成 dist 文件夹。
   • 安装了 Git、Node.js、以及支持 SCP 的终端（如 Windows 的 PowerShell、Git Bash 或 WSL）。

2. 服务器环境：

   • IP：11.111.111.11
   • 用户：root
   • 密码：123123
   • Web 目录：/web/
   • 已安装 Nginx 并配置好站点

---

二、部署步骤详解

Step 1：清理旧版本（可选但推荐）

首先通过 SSH 登录服务器：

ssh root@11.111.111.11
# 输入密码：123123

进入 Web 目录，备份或删除旧的 dist：

cd /web/
ls -l          # 查看当前文件
rm -rf dist1   # 删除无用旧目录（根据实际情况）
mv dist dist20240126  # 将当前线上版本重命名备份（建议加上日期）

✅ 为什么重命名而不是直接删？

便于回滚。如果新版本出问题，可快速 mv dist20240126 dist 恢复。

退出 SSH：

exit

⚠️ 注意：不能在一个终端里既保持 SSH 会话又执行 SCP 。实际操作中，我们先退出 SSH，再用本地终端执行 scp。

---

Step 2：上传新构建包

在本地（Windows）执行：

scp C:\zhongzi\a-project-code\qzj-front\dist.zip root@11.111.111.11:/web

💡 如果使用 Git Bash，路径需改为 Unix 风格：

scp /c/zhongzi/a-project-code/qzj-front/dist.zip root@11.111.111.11:/web

输入密码后，文件将上传至服务器的 /web/dist.zip。

---

Step 3：解压并生效

重新 SSH 登录服务器：

ssh root@11.111.111.11
cd /web
unzip dist.zip    # 解压后生成 dist 目录

此时新代码已就位。若 Nginx 配置的 root 路径为 /web/dist，则刷新浏览器即可看到新版本。

🔁 可选：重启 Nginx（通常静态资源无需重启）

nginx -s reload

---

三、自动化建议（进阶）

为提升效率，可考虑：

1. 编写部署脚本 （如 deploy.sh）自动完成上传、解压、备份。
2. 使用 CI/CD（如 GitHub Actions + rsync）实现一键部署。
3. 使用 rsync 替代 scp，只同步差异文件，更快更省流量。

---

四、常见问题

• 权限问题 ：确保 nginx 用户有读取 /web/dist 的权限。
• 缓存问题 ：浏览器可能缓存旧 JS/CSS，建议在构建时启用 hash 文件名（如 app.a1b2c3.js）。
• SCP 失败 ：检查防火墙是否开放 22 端口，或改用 sftp。

---

五、总结

通过 SSH + SCP + unzip 三步，我们完成了前端项目的快速部署。虽然简单，但在小型项目或测试环境中非常高效。掌握这些基础命令，是每个前端工程师走向 DevOps 的第一步！

🌟 小贴士：生产环境建议使用 Docker + Nginx 容器化部署，更稳定可控。

---