vercel 部署网站统计工具 Umami

Umami 是一款开源网站统计工具,可以通过插入一行前端代码来实现网站访问量统计。

image.png

本文介绍如何使用 vercel 部署 Umami。

Fork Umami 官方仓库

Umami 的官方仓库地址:umami-software/umami: Umami is a simple, fast, privacy-focused alternative to Google Analytics. (github.com)

点击 Fork,将该仓库 Fork 到自己的 github 账号中。

image.png

创建数据库

Umami 需要数据库,支持 postgresql、mysql 等数据库,这里我们使用 vercel 提供的 postgresql 数据库服务。

登录vercel,切换到 Storage 界面。点击 Create Database

image.png

选择 Postgres

image.png

出现以下界面则说明创建成功,复制 postgres url

image.png

部署项目

切换到 Overview 页面,点击 Add New...,选择 Project

image.png

Import Git Repository 中选择我们刚刚 fork 的仓库,点击 Import

image.png

Environment Variables 中添加环境变量

Key:DATABASE_URL
Value (Will Be Encrypted): 刚才复制的 postgres url

image.png

点击 Deploy,等待部署完成即可,大约需要两分钟。部署完成后会显示 Congratulation 页面,点击右上角 Go to Dashboard 可以看到 vercel 提供的访问域名。

访问该域名,打开 Umami,初次登录输入默认用户名 admin 与默认密码 umami,即可使用网站统计服务。

image.png

### 部署网站Vercel平台 为了在Vercel平台上成功部署网站,开发者需经历几个重要环节。首先,在本地开发环境中完成项目创建与配置之后,确保项目的结构和文件符合所选框架的要求[^3]。 对于采用Next.js构建的应用程序而言,由于Next.js已经为开发者处理了所有客户端工具链并针对生产环境做了高度优化,因此只需关注应用逻辑本身而不必操心诸如Webpack配置、代码分割以及路由设定等细节问题[^2]。 #### 准备工作 - **安装必要的依赖**:确认已安装Node.js及其包管理器npm或yarn。 - **初始化Git仓库**:如果尚未这样做,则应在项目根目录下执行`git init`命令来初始化一个新的Git仓库,并提交初始版本的源码。 #### 创建Vercel账户并与GitHub/GitLab/Bitbucket关联 访问[Vercel官网](https://vercel.com/)注册账号后登录,通过OAuth授权连接个人使用的代码托管服务提供商(如GitHub)。这一步骤允许Vercel自动拉取存储库中的最新更改用于后续部署操作。 #### 导入现有项目至Vercel 进入Vercel仪表板点击“Import Project”,按照提示输入目标仓库名称选择对应的分支,默认情况下master/main会被选用作为主要发布线。接着指定构建脚本位置通常位于package.json内的scripts字段里定义好的build指令;最后设置环境变量以便于安全地传递敏感数据给运行时环境使用。 一旦上述步骤顺利完成,Vercel将会立即启动一次完整的CI/CD流程,包括但不限于克隆代码库、解析配置项、编译静态资源直至最终上线新版本站点供公网访问。 ```bash # 使用NPM npm run build # 或者使用Yarn yarn build ``` 当一切准备就绪以后,就可以分享由Vercel分配的独特URL链接让用户们体验精心打造的作品啦!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值