Improved README and deployment scripts
This commit is contained in:
906051999
parent
59ed0ed1f0
commit
07a95a1d73
109
README.md
109
README.md
@ -1,58 +1,75 @@
|
||||
# Web Analytics with Cloudflare + Huno + D1 database
|
||||
[简体中文](./README.zh-CN.md) · **English**
|
||||
|
||||
[Cloudflare D1 Doc](https://developers.cloudflare.com/d1/get-started/)
|
||||
# Web Visitor Analytics Service Based on Cloudflare + Huno + D1
|
||||
|
||||
## Setup
|
||||
[Demo Site](https://webviso.yestool.org/)
|
||||
|
||||
### Log in
|
||||
## Deployment Steps
|
||||
|
||||
### Install Dependencies
|
||||
|
||||
```bash
|
||||
npm install -g wrangler
|
||||
npm install hono
|
||||
```
|
||||
|
||||
### Login
|
||||
|
||||
Redirect to the Cloudflare web authorization page.
|
||||
|
||||
```bash
|
||||
npx wrangler login
|
||||
```
|
||||
|
||||
### Create Database
|
||||
### Create D1 Database: [web_analytics]
|
||||
|
||||
> The database name should be `web_analytics`, consistent with the name in `package.json`.
|
||||
|
||||
```bash
|
||||
npx wrangler d1 create web_analytics
|
||||
```
|
||||
|
||||
After successful creation, it will display:
|
||||
|
||||
```
|
||||
npx wrangler d1 create <DATABASE_NAME>
|
||||
|
||||
---------
|
||||
✅ Successfully created DB '<DATABASE_NAME>'
|
||||
✅ Successfully created DB web_analytics
|
||||
|
||||
[[d1_databases]]
|
||||
binding = "DB" # available in your Worker on env.DB
|
||||
database_name = "<DATABASE_NAME>"
|
||||
database_name = "web_analytics"
|
||||
database_id = "<unique-ID-for-your-database>"
|
||||
|
||||
```
|
||||
|
||||
### Bind Worker to D1 database
|
||||
### Configure Worker and Bind D1 Database
|
||||
|
||||
in **wrangler.toml**
|
||||
Write the `unique-ID-for-your-database` returned from the previous step into `wrangler.toml`.
|
||||
|
||||
```toml
|
||||
name = "analytics_with_cloudflare"
|
||||
main = "src/index.ts"
|
||||
compatibility_date = "2024-06-14"
|
||||
|
||||
```
|
||||
[[d1_databases]]
|
||||
binding = "DB" # available in your Worker on env.DB
|
||||
database_name = "<DATABASE_NAME>"
|
||||
database_name = "web_analytics"
|
||||
database_id = "<unique-ID-for-your-database>"
|
||||
```
|
||||
|
||||
### Initialize the D1 Database Schema
|
||||
|
||||
|
||||
### init database
|
||||
|
||||
```
|
||||
```bash
|
||||
npm run initSql
|
||||
```
|
||||
|
||||
|
||||
### Deploy
|
||||
|
||||
```bash
|
||||
npm run deploy
|
||||
```
|
||||
$ npm run deploy
|
||||
|
||||
After successful deployment, it will display:
|
||||
|
||||
```
|
||||
> analytics_with_cloudflare@0.0.0 deploy
|
||||
> wrangler deploy
|
||||
|
||||
@ -69,16 +86,48 @@ Published analytics_with_cloudflare (4.03 sec)
|
||||
Current Deployment ID: xxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||
```
|
||||
|
||||
## How to Use
|
||||
|
||||
## Use
|
||||
> - `data-base-url` default value: `https://webviso.yestool.org`
|
||||
> - `data-page-pv-id` default value: `page_pv`
|
||||
> - `data-page-uv-id` default value: `page_uv`
|
||||
|
||||
inclout js and add `<span id='page_pv'>?</span> <span id='page_uv'>?</span>`
|
||||
```
|
||||
<script src="/front/dist/index.min.js" data-base-url="https://analytics_with_cloudflare.xxxxx.workers.dev"></script>
|
||||
<script src="/front/dist/index.min.js" data-base-url="diy Url"></script>
|
||||
<script src="/front/dist/index.min.js" data-base-url="diy Url" data-page-pv-id="page_pv" data-page-uv-id="page_uv"></script>
|
||||
### 1. Include the Script
|
||||
|
||||
Add the following `<script>...</script>` segment before the closing `</body>` tag in your HTML.
|
||||
|
||||
- Using the online JS file:
|
||||
> With the defer attribute, the browser will execute these scripts after all content is loaded.
|
||||
|
||||
```html
|
||||
<script defer src="//webviso.yestool.org/js/index.min.js"></script>
|
||||
```
|
||||
|
||||
- data-base-url: Default value is `https://webviso.yestool.org`
|
||||
- data-page-pv-id: Default value is `page_pv`
|
||||
- data-page-uv-id: Default value is `page_uv`
|
||||
- Using a local JS file:
|
||||
|
||||
```html
|
||||
<script src="/front/dist/index.min.js"></script>
|
||||
```
|
||||
|
||||
- If you have deployed your backend, use your service address to send requests to your own service.
|
||||
> Change `your-url` to your worker address, like `https://analytics_with_cloudflare.workers.dev`, and ensure there is no trailing `/`.
|
||||
|
||||
```html
|
||||
<script defer src="//webviso.yestool.org/js/index.min.js" data-base-url="your-url"></script>
|
||||
```
|
||||
|
||||
### 2. Display Data
|
||||
|
||||
- Add tags with the ID `page_pv` or `page_uv` to show `Page Views (pv)` or `Unique Visitors (uv)` respectively.
|
||||
|
||||
```html
|
||||
Page Views on this page:<span id="page_pv"></span>
|
||||
|
||||
Unique Visitors on this page:<span id="page_uv"></span>
|
||||
```
|
||||
|
||||
- You can edit the script parameters to adjust the tag IDs.
|
||||
|
||||
```html
|
||||
<script defer src="//webviso.yestool.org/js/index.min.js" data-base-url="your-url" data-page-pv-id="page_pv" data-page-uv-id="page_uv"></script>
|
||||
```
|
||||
|
||||
125
README.zh-CN.md
Normal file
125
README.zh-CN.md
Normal file
@ -0,0 +1,125 @@
|
||||
[English](./README.md) · **简体中文**
|
||||
|
||||
# 基于 Cloudflare + Huno + D1 的网页访客统计服务
|
||||
|
||||
[参考演示站点](https://webviso.yestool.org/)
|
||||
|
||||
## 部署步骤
|
||||
|
||||
### 安装依赖
|
||||
|
||||
```
|
||||
npm install -g wrangler
|
||||
npm install hono
|
||||
```
|
||||
|
||||
### 登录
|
||||
|
||||
跳转cloudflare网页授权
|
||||
```bash
|
||||
npx wrangler login
|
||||
```
|
||||
|
||||
### 创建D1数据库：[web_analytics]
|
||||
|
||||
> 数据库名称为`web_analytics`，与`package.json`内保持一致
|
||||
|
||||
```
|
||||
npx wrangler d1 create web_analytics
|
||||
```
|
||||
|
||||
成功后显示：
|
||||
```
|
||||
✅ Successfully created DB web_analytics
|
||||
|
||||
[[d1_databases]]
|
||||
binding = "DB" # available in your Worker on env.DB
|
||||
database_name = "web_analytics"
|
||||
database_id = "<unique-ID-for-your-database>"
|
||||
```
|
||||
|
||||
### 配置worker和D1数据库绑定
|
||||
|
||||
将上个步骤返回的`unique-ID-for-your-database`写进`wrangler.toml`中
|
||||
|
||||
```
|
||||
name = "analytics_with_cloudflare"
|
||||
main = "src/index.ts"
|
||||
compatibility_date = "2024-06-14"
|
||||
|
||||
[[d1_databases]]
|
||||
binding = "DB" # available in your Worker on env.DB
|
||||
database_name = "web_analytics"
|
||||
database_id = "<unique-ID-for-your-database>"
|
||||
```
|
||||
|
||||
|
||||
### 初始化D1数据库的表结构
|
||||
|
||||
```
|
||||
npm run initSql
|
||||
```
|
||||
|
||||
|
||||
### 发布
|
||||
|
||||
```
|
||||
npm run deploy
|
||||
```
|
||||
|
||||
成功后显示：
|
||||
```
|
||||
> analytics_with_cloudflare@0.0.0 deploy
|
||||
> wrangler deploy
|
||||
|
||||
Proxy environment variables detected. We'll use your proxy for fetch requests.
|
||||
⛅️ wrangler 3.18.0
|
||||
-------------------
|
||||
Your worker has access to the following bindings:
|
||||
- D1 Databases:
|
||||
- DB: web_analytics (<unique-ID-for-your-database>)
|
||||
Total Upload: 50.28 KiB / gzip: 12.23 KiB
|
||||
Uploaded analytics_with_cloudflare (1.29 sec)
|
||||
Published analytics_with_cloudflare (4.03 sec)
|
||||
https://analytics_with_cloudflare.xxxxx.workers.dev
|
||||
Current Deployment ID: xxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||
```
|
||||
|
||||
|
||||
## 如何使用
|
||||
> - `data-base-url` 默认值： `https://webviso.yestool.org`
|
||||
> - `data-page-pv-id` 默认值： `page_pv`
|
||||
> - `data-page-uv-id` 默认值： `page_uv`
|
||||
### 1.引入脚本
|
||||
在html的body标签前加入下面的 `<script>...</script>` 段落即可
|
||||
|
||||
- 使用网络js文件：
|
||||
> 使用 defer 属性时，浏览器会在加载完所有内容后再执行这些脚本
|
||||
```
|
||||
<script defer src="//webviso.yestool.org/js/index.min.js"></script>
|
||||
```
|
||||
- 使用本地js文件：
|
||||
```
|
||||
<script src="/front/dist/index.min.js"></script>
|
||||
```
|
||||
- 如果已经部署了后端，使用你的服务地址将请求发送到自己的服务
|
||||
> 将`your-url`更改为你的worker地址，如`https://analytics_with_cloudflare.workers.dev`，注意结尾不要有`/`
|
||||
|
||||
```
|
||||
<script defer src="//webviso.yestool.org/js/index.min.js" data-base-url="your-url"></script>
|
||||
```
|
||||
|
||||
### 2.展示数据
|
||||
|
||||
- 加入id为`page_pv` 或 `page_uv`的标签，即可显示 `访问人次(pv)` 或 `访问人数(uv)`
|
||||
```
|
||||
本页访问人次:<span id="page_pv"></span>
|
||||
|
||||
本页访问人数:<span id="page_uv"></span>
|
||||
```
|
||||
- 可以编辑脚本参数，调整标签id
|
||||
```
|
||||
<script defer src="//webviso.yestool.org/js/index.min.js" data-base-url="your-url" data-page-pv-id="page_pv" data-page-uv-id="page_uv"></script>
|
||||
```
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
"dev": "wrangler dev",
|
||||
"start": "wrangler dev",
|
||||
"initSqlLocal": "npx wrangler d1 execute web_analytics --local --file=./schema.sql",
|
||||
"initSql": "npx wrangler d1 execute web_analytics --file=./schema.sql"
|
||||
"initSql": "npx wrangler d1 execute web_analytics --file=./schema.sql --remote"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@cloudflare/workers-types": "^4.20231121.0",
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
name = "analytics_with_cloudflare"
|
||||
main = "src/index.ts"
|
||||
compatibility_date = "2023-12-03"
|
||||
compatibility_date = "2024-06-14"
|
||||
|
||||
[[d1_databases]]
|
||||
binding = "DB" # i.e. available in your Worker on env.DB
|
||||
database_name = "<DATABASE_NAME>"
|
||||
database_id = "<unique-ID-for-your-database>"
|
||||
binding = "DB" # available in your Worker on env.DB
|
||||
database_name = "web_analytics"
|
||||
database_id = "<unique-ID-for-your-database>"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user