前言
相信大多数前端人梦开始的地方，都是一个自己开发的 TodoList 应用，我也不例外，自己初学 React 和 Vue 开发的第一个应用都是一个 TodoList 。而当时开发完的喜悦和成就感、迫不及待想向朋友们展示的心情，至今都记忆深刻。
但作为一个初学者，如何展示自己的 TodoList 好像成了一个大问题：
-
本地服务，其他人无法访问，只能通过录屏的方式分享
-
Github Pages / Vercel 等方式部署：只能部署静态应用，无法与真实数据库交互
-
购买服务器部署：学习成本高，同时还要花钱购买服务器
当时写的 TodoList 是 MERN 架构的，为了分享，尝试过购买服务器部署：购买服务器，购买域名，配置服务器环境，克隆代码到服务器，打包，nginx 反向代理…… 一套流程下来，中途遇到了无数的问题，最终为了部署一个简单的 TodoList ，不仅花钱买了服务器和域名，还花了很多时间踩各种坑。
一年后的今天，我终于能为当时的自己提供一个完美的解决方案了。
Zeabur 介绍
Zeabur 是一个我和朋友独立开发的产品，可以帮助你轻松部署各种前后端服务、应用以及数据库的平台，支持多环境相互隔离，部署后也可以很方便地在 Zeabur 查看部署情况，内存用量，申请域名等等。
使用 Zeabur 部署服务，无论是 React / Vue 等前端应用，或是 Flask / Go / Spring Boot 等后端服务，或是 MongoDB / MySQL 等数据库，你都只需要通过几个简单的按钮，就能够轻松部署。
部署实操
话不多说，就让我们来看看在 Zeabur 上部署服务的体验吧！
第一步 登录
打开 Zeabur ，并使用 Github 登录。
登录成功后，你将会被自动导航到 Zeabur 的主站。
第二步 授权
根据引导，创建一个新的 Project
创建成功后，点击右上角的 Add new service 添加服务，然后点击 Deploy your source code。
对于初次使用的用户，需要在 Github 上进行授权：点击 Configure Github APP ，在弹出的新窗口中点击安装，选择你想要安装的 Name Space，选择 All repositories 并授予读写权限。
安装成功后，你就可以在 Zeabur 看到并选择你要部署的代码仓库。
第三步 导入仓库
选择自己要部署的代码仓库，点击 Import ，在下一个页面可以自定义服务的名称以及想要绑定的分支。
如图，我选择绑定默认的 master 分支。
点击 Deploy ，服务将开始进行部署。
第四步 服务配置
由于我的 TodoList 是一个前后端一体的 MERN 应用，我需要手动进行一些配置，来区分出前后端服务。
点击刚刚部署的 client 服务，选择设置页面，可以看到有一个 Root Directory 以及 Watch path 的设置。
Root Directory 为 Zeabur 指明服务所在的根目录，Watch Paths 则为 Zeabur 指明该服务监控的路径，路径内的代码更新，Zeabur 就可以自动进行重新构建更新。
因此，为我们的客户端服务设置根目录及监控路径为 /client
同理，再新建一个服务，重复上述步骤，将服务端的服务设置根目录及监控路径为 /server 即可。
等待 1-2 分钟，你的服务将会部署完毕，可以看到 Zeabur 已自动识别服务的类型和框架，前端为 Create-react-app 构建，后端则是一个简单的 Node 服务。
第五步 添加域名
要访问服务，自然需要为其添加一个域名。
但放心，你不再需要自己购买域名，Zeabur 提供了自动生成 Zeabur 后缀域名的能力。
点击服务，选择设置页面，点击 Generate Domain ，输入自己想为其绑定的域名，点击 Save 域名就将绑定到你的服务。
你也可以选择使用自己的域名，但需要手动去为它添加一个 DNS 记录。
按照这个步骤，为自己的客户端和服务端的服务绑定好域名。
此时，只要代码没有其他问题，你的服务就已经可以正常访问了。
第六步 添加数据库
前后端服务有了，下一步就是添加数据库了。
再次点击 Deploy new service ，不同的是，此次选择的是 Deploy Other Services ，然后选择 Deploy MongoDB ，Zeabur 将为你自动创建一个 MongoDB 数据库，并进行了一些基本的配置。
部署后，点击 Mongo 服务，你就会看到一个链接字符串，通过这个字符串，你就可以连接到部署在 Zeabur 上的数据库。
最后 修改代码配置
拿到了服务端域名、数据库地址，接下来要做的就只是修改前端代码中的 API 路径以及后端代码中的数据库地址。
const apiPath = 'https://your-server-domain'
const mongoURL = 'mongodb://your-mongo-url'
修改完毕后，提交新的代码，回到 Zeabur ，你将会看到自己的服务已经开始自动重新部署。
而等待部署完毕后，你的 MERN 应用即可正常使用。
结语
通过 Zeabur ，部署一个 MERN 应用的整套流程仅需短短的几分钟。
部署其他架构的服务也是如此，无需复杂的运维知识，无需购买服务器和域名，只需通过导入部署以及几个简单的配置，服务即可上线稳定运行。Zeabur 致力于帮你省下部署、运维的时间、精力与金钱成本。
部署完毕后，Zeabur 也提供了各种服务来协助你管理项目。
- 邀请成员共同管理项目
- 查看服务用量
- 创建相互隔离的环境
- 注入环境变量
- 更多功能等着你去探索
Zeabur 属于大学生创业产品，团队成员主要来自浙江大学，目前仍处于推广阶段，服务免费使用，后续则将采用免费额度 + 按量计费的模式。
如果你在使用 Zeabur 的过程中有什么想法或者遇到了一些问题，欢迎给予我们反馈和建议。
团队也处于扩张状态，如果你对 Zeabur 感兴趣，希望一起来改善这个产品，欢迎联系我们。
