sed 流编辑器在前端部署中的作用

什么是 sed 流编辑器？为什么叫"流"编辑器？

sed（stream editor） 是 Linux/Unix 中的经典文本处理工具，中文叫 流编辑器。

stream（流） 代表数据不是先加载进编辑器，而是像水一样"流过 sed"，sed 边读边处理。
它不需要你打开文件，只需要写一条命令，它就能在"流过"的文本上做一次编辑，再输出结果。
常用来 查找、替换、删除、插入、格式化 文本。

因为它是命令行工具，你可以在脚本（Shell、CI/CD、中间件）里自动执行，没有任何交互成本，非常适合自动化部署。

sed 的典型使用方式

下面是你最常见、最需要掌握的。

1. 替换文本（最常见）

bash 复制代码

sed -i 's/old/new/g' file.txt

-i 代表直接修改文件
s = substitute（替换）
g = 全局替换

例如：把 .env.production 中的 API 地址替换成你的线上地址

bash 复制代码

sed -i 's|VITE_API=.*|VITE_API=https://api.xxx.com|' .env.production

2. 删除某一行

bash 复制代码

sed -i '3d' file.txt   # 删除第 3 行

3. 删除包含某关键词的行

bash 复制代码

sed -i '/DEBUG/d' file.txt

4. 插入行

bash 复制代码

sed -i '1i # 这是新插入的第一行' file.txt

sed 为什么能用于部署脚本？

因为部署脚本需要频繁做这些事：

✔ 动态注入环境变量

✔ 替换构建产物中的 API 地址

✔ CI/CD 中自动化修改配置

✔ Nginx 配置或 Dockerfile 中动态替换内容

✔ 替换版本号、构建时间、hash

你不可能手动打开文件修改，只能使用命令自动改，sed 正好是处理纯文本最强的工具之一。

你的构建产物、配置文件、shell 脚本、env 文件本质上都是文本文件，所以 sed 可以编辑它们。

在项目部署流程中，sed 通常运行在哪个环节？

下面以前端项目部署为例：

🟦 一般前端项目的部署流程

以下适用于 Vite、Webpack、Nuxt、Next 静态化产物等：

拉取代码（Git）
安装依赖（npm/pnpm/yarn）
编译构建（npm run build）
构建产物生成（dist/）
部署服务器 / Nginx
覆盖环境变量、配置文件（这里 sed 上场） ← 很关键！

📌 sed 通常在 "构建之后 / 部署之前" 执行

为什么？

因为你的 API 地址、CDN 地址、版本号等很多数据是：

构建阶段还不知道
但部署阶段已经明确

比如：

前端 build 时 API 地址是占位符：__API_URL__
部署到线上后要替换成生产地址：https://prod.api.com

你不会为了换环境变量重新 build，这是浪费时间。

所以 sed 在"部署阶段"对产物进行二次替换，正好解决这个问题。

具体例子：前端部署中 sed 的作用

假设你的 index.html 中有一个变量：

html 复制代码

<script>
window.API_BASE = "__API__";
</script>

你的部署脚本（如 build.sh）用 sed 自动替换：

bash 复制代码

sed -i 's|__API__|https://api.prod.com|g' dist/index.html

这时 sed 的作用就是：

✔ 把构建产物里的占位符替换成实际线上配置

✔ 保证同一套构建可以适配多个环境

✔ 避免每次变环境都重新构建

前端部署中 sed 的常见用途总结（非常实用）

1. 注入不同环境变量

bash 复制代码

sed -i "s|VITE_API=.*|VITE_API=$API_URL|" .env.production

2. CI 自动替换版本号

bash 复制代码

sed -i "s|__VERSION__|$CI_COMMIT_SHA|g" dist/index.html

3. 替换 Nginx 配置里的变量

bash 复制代码

sed -i "s|server_name .*;|server_name mysite.com;|" /etc/nginx/conf.d/default.conf

4. 在 Docker 镜像构建后动态注入配置

bash 复制代码

sed -i "s|__CDN__|$CDN_URL|g" /usr/share/nginx/html/assets/*.js

5. 生成动态脚本，比如 runtime-config.js

bash 复制代码

sed -i "s|__ENV__|$ENV|" dist/runtime-config.js

为什么前端部署特别需要 sed？

原因核心只有一个：

前端构建后的产物是纯静态文件，它不能在运行时读取 .env，只能通过文本替换注入配置。

后端有 Node/Python/Java，可以运行时读环境变量

前端没有！

所以前端只能：

◾ 要么构建时写死配置

◾ 要么部署时 sed 替换配置（最佳实践）

因此 sed 在前端部署中非常重要。

总结：用一句简单的话概括 sed 在部署中的作用

sed 是自动化部署中进行"文本替换和配置注入"的最强工具，用来在构建产物发布前动态修改配置，让你的前端项目能适配多个环境而无需重复构建。