[{"data":1,"prerenderedAt":934},["ShallowReactive",2],{"page-/post/knows/umami-website-watch":3,"surrounding-page":925},{"id":4,"title":5,"author":6,"body":7,"date":916,"description":39,"extension":917,"group":6,"lastmod":918,"meta":919,"navigation":120,"path":920,"rawbody":921,"seo":922,"showTitle":6,"stem":923,"tags":6,"versions":6,"__hash__":924},"content/post/knows/umami-website-watch.md","✨使用umami低成本监控网站流量",null,{"type":8,"value":9,"toc":900},"minimark",[10,15,27,30,33,41,44,49,56,61,69,74,77,80,83,150,164,168,173,182,185,204,207,239,243,250,260,271,290,297,301,309,312,340,347,371,374,384,388,391,397,407,414,417,426,429,432,442,448,453,456,463,468,475,480,483,488,491,497,504,611,622,628,631,640,689,703,709,712,722,740,747,779,792,831,834,864,867,873,887,893,896],[11,12,14],"h2",{"id":13},"什么是umami","👀什么是Umami",[16,17,18,22,23,26],"p",{},[19,20,21],"code",{},"Umami"," 是一款开源的、注重隐私的网络分析工具（基于NextJS），可作为 ",[19,24,25],{},"Google Analytics"," 的替代品。它提供有关网站流量、用户行为和性能的重要见解，同时优先考虑数据隐私。",[16,28,29],{},"与许多传统分析平台不同，Umami 不会收集或存储个人数据，从而避免了使用 cookie 的需求，并且符合 GDPR 和 PECR 标准。",[16,31,32],{},"Umami 设计轻巧、易于设置，可自托管，让用户完全控制自己的数据。",[16,34,35,36],{},"这是我部署后的界面：\n",[37,38],"img",{"alt":39,"src":40},"","https://img.zzao.club/article/202503191130622.png",[16,42,43],{},"同时包含了一些访客的浏览器、设备、操作系统等信息",[16,45,46],{},[37,47],{"alt":39,"src":48},"https://img.zzao.club/article/202503191130624.png",[16,50,51,52,55],{},"以及 ",[19,53,54],{},"ip"," 所在国家",[16,57,58],{},[37,59],{"alt":39,"src":60},"https://img.zzao.club/article/202503191130625.png",[16,62,63,64,68],{},"在",[65,66,67],"strong",{},"行为类别","中，还可以看到自己在网站中的埋点",[16,70,71],{},[37,72],{"alt":39,"src":73},"https://img.zzao.club/article/202503191130626.png",[16,75,76],{},"总结：  MIT开源、免费、独立部署的网站数据分析工具",[11,78,79],{"id":79},"安装",[16,81,82],{},"如果使用Docker那就非常简单了",[84,85,89],"pre",{"className":86,"code":87,"language":88,"meta":39,"style":39},"language-shell shiki shiki-themes github-light","# 直接在项目根目录运行\ndocker-compose up -d\n\n# 或者使用下面镜像 二选一\ndocker pull docker.umami.is/umami-software/umami:mysql-latest\ndocker pull docker.umami.is/umami-software/umami:postgresql-latest\n","shell",[19,90,91,100,115,122,128,140],{"__ignoreMap":39},[92,93,96],"span",{"class":94,"line":95},"line",1,[92,97,99],{"class":98},"sAwPA","# 直接在项目根目录运行\n",[92,101,103,107,111],{"class":94,"line":102},2,[92,104,106],{"class":105},"s7eDp","docker-compose",[92,108,110],{"class":109},"sYBdl"," up",[92,112,114],{"class":113},"sYu0t"," -d\n",[92,116,118],{"class":94,"line":117},3,[92,119,121],{"emptyLinePlaceholder":120},true,"\n",[92,123,125],{"class":94,"line":124},4,[92,126,127],{"class":98},"# 或者使用下面镜像 二选一\n",[92,129,131,134,137],{"class":94,"line":130},5,[92,132,133],{"class":105},"docker",[92,135,136],{"class":109}," pull",[92,138,139],{"class":109}," docker.umami.is/umami-software/umami:mysql-latest\n",[92,141,143,145,147],{"class":94,"line":142},6,[92,144,133],{"class":105},[92,146,136],{"class":109},[92,148,149],{"class":109}," docker.umami.is/umami-software/umami:postgresql-latest\n",[16,151,152,153,156,157,160,161,163],{},"因为我已经存在一个正在运行的 ",[19,154,155],{},"Mysql"," Docker服务了，所以下面以从源码安装，并以 ",[19,158,159],{},"PM2"," 运行 ",[19,162,21],{}," 为例",[165,166,167],"h3",{"id":167},"环境要求",[16,169,170],{},[19,171,172],{},"Node >= 18.18",[16,174,175,178,179],{},[19,176,177],{},"Mysql >= 8.0"," 或 ",[19,180,181],{},"PostgreSQL >= 12.14",[165,183,184],{"id":184},"安装yarn",[84,186,188],{"className":86,"code":187,"language":88,"meta":39,"style":39},"npm install -g yarn\n",[19,189,190],{"__ignoreMap":39},[92,191,192,195,198,201],{"class":94,"line":95},[92,193,194],{"class":105},"npm",[92,196,197],{"class":109}," install",[92,199,200],{"class":113}," -g",[92,202,203],{"class":109}," yarn\n",[165,205,206],{"id":206},"获取源代码",[84,208,210],{"className":86,"code":209,"language":88,"meta":39,"style":39},"git clone https://github.com/umami-software/umami.git\ncd umami\nyarn install\n",[19,211,212,223,231],{"__ignoreMap":39},[92,213,214,217,220],{"class":94,"line":95},[92,215,216],{"class":105},"git",[92,218,219],{"class":109}," clone",[92,221,222],{"class":109}," https://github.com/umami-software/umami.git\n",[92,224,225,228],{"class":94,"line":102},[92,226,227],{"class":113},"cd",[92,229,230],{"class":109}," umami\n",[92,232,233,236],{"class":94,"line":117},[92,234,235],{"class":105},"yarn",[92,237,238],{"class":109}," install\n",[165,240,242],{"id":241},"env-文件",".env 文件",[16,244,245,246,249],{},"创建一个 ",[19,247,248],{},".env"," 文件，用于数据库连接",[16,251,252,253],{},"如果你还没有Mysql服务，可以参考我这篇：",[254,255,259],"a",{"href":256,"rel":257},"https://blog.zzao.club/post/nuxt/local-init-mysql-by-docker",[258],"nofollow","【使用Docker启动Mysql】",[84,261,265],{"className":262,"code":263,"language":264,"meta":39,"style":39},"language-txt shiki shiki-themes github-light","DATABASE_URL=mysql://username:mypassword@localhost:3306/mydb\n","txt",[19,266,267],{"__ignoreMap":39},[92,268,269],{"class":94,"line":95},[92,270,263],{},[16,272,273,274,277,278,277,281,284,285],{},"将 ",[19,275,276],{},"username","、",[19,279,280],{},"password",[19,282,283],{},"mydb"," 都替换成自己的，其中mydb的创建可以参考：",[254,286,289],{"href":287,"rel":288},"https://blog.zzao.club/post/nuxt/prod-docker-mysql-config",[258],"安装后如何初始化库和新用户",[16,291,292,293,296],{},"还可以配置 ",[19,294,295],{},"PORT=4577","，端口号",[165,298,300],{"id":299},"pm2启动","PM2启动",[84,302,307],{"className":303,"code":305,"language":306},[304],"language-text","yarn global add pm2\ncd umami\npm2 start yarn --name umami -- start\npm2 startup\npm2 save\n","text",[19,308,305],{"__ignoreMap":39},[16,310,311],{},"如果配置了PORT，PM2命令要对应的修改为",[84,313,315],{"className":86,"code":314,"language":88,"meta":39,"style":39},"pm2 start yarn --name umami -- start-env\n",[19,316,317],{"__ignoreMap":39},[92,318,319,322,325,328,331,334,337],{"class":94,"line":95},[92,320,321],{"class":105},"pm2",[92,323,324],{"class":109}," start",[92,326,327],{"class":109}," yarn",[92,329,330],{"class":113}," --name",[92,332,333],{"class":109}," umami",[92,335,336],{"class":113}," --",[92,338,339],{"class":109}," start-env\n",[16,341,342,343,346],{},"如果不用 ",[19,344,345],{},"env"," 文件，可以直接传递变量",[84,348,350],{"className":86,"code":349,"language":88,"meta":39,"style":39},"pm2 start yarn --name umami -- start --port=6001\n",[19,351,352],{"__ignoreMap":39},[92,353,354,356,358,360,362,364,366,368],{"class":94,"line":95},[92,355,321],{"class":105},[92,357,324],{"class":109},[92,359,327],{"class":109},[92,361,330],{"class":113},[92,363,333],{"class":109},[92,365,336],{"class":113},[92,367,324],{"class":109},[92,369,370],{"class":113}," --port=6001\n",[16,372,373],{},"两种方式都可以。",[16,375,376,379,380,383],{},[19,377,378],{},"pm2 startup"," 则是为了设置开机自启，",[19,381,382],{},"save"," 会把当前配置保存起来",[165,385,387],{"id":386},"配置-nginx","配置 Nginx",[16,389,390],{},"此处仅作为作为参考，适用于配置多个子域名，共用一个泛域名证书",[84,392,395],{"className":393,"code":394,"language":306},[304],"http {\n    # umami\n    upstream upstream_umami{\n        server localhost:6001;\n    }\n    map $host $proxy_pass {\n        hostnames;  # 添加这行以优化域名匹配\n\n        # ...省略其他子域名\n        umami.xxx.com http://upstream_umami;\n    }\n    server {\n        listen 443 ssl; \n        server_name *.xxx.com; #泛域名\n        \n        ssl_certificate /etc/nginx/certs/xxx\n        ssl_certificate_key /etc/nginx/certs/xxx\n\n        fastcgi_param  HTTPS        on;\n        fastcgi_param  HTTP_SCHEME     https;\n\n        location / {\n            add_header X-Final-Destination $upstream_addr;\n            \n            proxy_set_header   X-Real-IP         $remote_addr;\n            proxy_set_header   Host              $http_host;\n            proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;\n            \n            proxy_pass $proxy_pass; \n        }\n\n    }\n}\n",[19,396,394],{"__ignoreMap":39},[16,398,399,400,403,404],{},"配置成功后，",[19,401,402],{},"nginx -t"," 检测是否有错误，如果没错就 ",[19,405,406],{},"restart nginx",[16,408,409,410,413],{},"然后再访问配好的子域名 ",[19,411,412],{},"umami.xxx.com"," 是否有效就可以了",[11,415,416],{"id":416},"使用",[16,418,419,422,423,425],{},[19,420,421],{},"umami"," 的使用也非常简单，首先打开 ",[19,424,412],{}," ，也就是自己配好的地址",[165,427,428],{"id":428},"基本配置",[16,430,431],{},"登录 => 设置 => 修改密码 + 修改语言",[433,434,435,439],"ul",{},[436,437,438],"li",{},"默认用户名: admin",[436,440,441],{},"默认密码：umami",[16,443,444,447],{},[37,445],{"alt":39,"src":446},"https://img.zzao.club/article/202503191130627.png","\n找到用户这里",[16,449,450],{},[37,451],{"alt":39,"src":452},"https://img.zzao.club/article/202503191130628.png",[16,454,455],{},"修改语言直接点击右上角的国际化图标即可",[16,457,458,459,462],{},"设置好后，在",[65,460,461],{},"设置 -> 网站 -> 添加网站","中，输入自己的网站名字和域名",[16,464,465],{},[37,466],{"alt":39,"src":467},"https://img.zzao.club/article/202503191130629.png",[16,469,470,471,474],{},"添加好点击",[65,472,473],{},"编辑","按钮",[16,476,477],{},[37,478],{"alt":39,"src":479},"https://img.zzao.club/article/202503191130630.png",[16,481,482],{},"然后就可以看到自己的网站lD、跟踪代码",[16,484,485],{},[37,486],{"alt":39,"src":487},"https://img.zzao.club/article/202503191130631.png",[16,489,490],{},"接下来就是要把跟踪代码添加到当前网站项目中",[16,492,493,494,163],{},"以 ",[19,495,496],{},"Nuxt",[16,498,499,500,503],{},"在 ",[19,501,502],{},"nuxt.config.ts"," 中，添加如下配置",[84,505,509],{"className":506,"code":507,"language":508,"meta":39,"style":39},"language-typescript shiki shiki-themes github-light","export default defineNuxtConfig({\n    app: {\n        head: {\n            script: [\n                {\n                    src: 'https://umami.xxx.com/script.js',\n                    defer: true,\n                    \"data-website-id\": \"your_data_website_id\"\n                }\n            ]\n        }\n    }\n})\n","typescript",[19,510,511,527,532,537,542,547,558,569,581,587,593,599,605],{"__ignoreMap":39},[92,512,513,517,520,523],{"class":94,"line":95},[92,514,516],{"class":515},"sD7c4","export",[92,518,519],{"class":515}," default",[92,521,522],{"class":105}," defineNuxtConfig",[92,524,526],{"class":525},"sgsFI","({\n",[92,528,529],{"class":94,"line":102},[92,530,531],{"class":525},"    app: {\n",[92,533,534],{"class":94,"line":117},[92,535,536],{"class":525},"        head: {\n",[92,538,539],{"class":94,"line":124},[92,540,541],{"class":525},"            script: [\n",[92,543,544],{"class":94,"line":130},[92,545,546],{"class":525},"                {\n",[92,548,549,552,555],{"class":94,"line":142},[92,550,551],{"class":525},"                    src: ",[92,553,554],{"class":109},"'https://umami.xxx.com/script.js'",[92,556,557],{"class":525},",\n",[92,559,561,564,567],{"class":94,"line":560},7,[92,562,563],{"class":525},"                    defer: ",[92,565,566],{"class":113},"true",[92,568,557],{"class":525},[92,570,572,575,578],{"class":94,"line":571},8,[92,573,574],{"class":109},"                    \"data-website-id\"",[92,576,577],{"class":525},": ",[92,579,580],{"class":109},"\"your_data_website_id\"\n",[92,582,584],{"class":94,"line":583},9,[92,585,586],{"class":525},"                }\n",[92,588,590],{"class":94,"line":589},10,[92,591,592],{"class":525},"            ]\n",[92,594,596],{"class":94,"line":595},11,[92,597,598],{"class":525},"        }\n",[92,600,602],{"class":94,"line":601},12,[92,603,604],{"class":525},"    }\n",[92,606,608],{"class":94,"line":607},13,[92,609,610],{"class":525},"})\n",[16,612,613,614,617,618,621],{},"把 ",[19,615,616],{},"src"," 和 ",[19,619,620],{},"data-website-id"," 替换成自己的即可",[16,623,624,625,627],{},"重新打包、发布Nuxt应用后，umami的统计就会立即生效了，可以前往 ",[19,626,412],{}," 去看访问数据",[165,629,630],{"id":630},"埋点",[16,632,633,634,636,637],{},"要想记录某个按钮的点击行为，以及传递一些用户信息来记录，需要用到 ",[19,635,21],{}," 的 ",[19,638,639],{},"Track Events",[84,641,645],{"className":642,"code":643,"language":644,"meta":39,"style":39},"language-html shiki shiki-themes github-light","\u003Cbutton id=\"signup-button\" data-umami-event=\"Signup button\" data-umami-event-id=\"123\">Sign up\u003C/button>\n","html",[19,646,647],{"__ignoreMap":39},[92,648,649,652,656,659,662,665,668,670,673,676,678,681,684,686],{"class":94,"line":95},[92,650,651],{"class":525},"\u003C",[92,653,655],{"class":654},"shJU0","button",[92,657,658],{"class":105}," id",[92,660,661],{"class":525},"=",[92,663,664],{"class":109},"\"signup-button\"",[92,666,667],{"class":105}," data-umami-event",[92,669,661],{"class":525},[92,671,672],{"class":109},"\"Signup button\"",[92,674,675],{"class":105}," data-umami-event-id",[92,677,661],{"class":525},[92,679,680],{"class":109},"\"123\"",[92,682,683],{"class":525},">Sign up\u003C/",[92,685,655],{"class":654},[92,687,688],{"class":525},">\n",[16,690,691,694,695,698,699,702],{},[19,692,693],{},"data-umami-event"," ：表示记录的事件名\n",[19,696,697],{},"data-umami-event-*"," ：表示给事件传递的属性 ",[19,700,701],{},"{ id： \"123\"}"," 会这样被记录下来",[16,704,705,706,708],{},"这种使用 ",[19,707,644],{}," 属性的方式，所有数据会保存为字符串，记录一些基本动作也是够用的",[16,710,711],{},"也可以使用 JS 的方式来主动调用",[16,713,714,715,718,719,721],{},"引入 ",[19,716,717],{},"umami/script.js"," 时，会在全局注入一个 ",[19,720,421],{}," 对象，所以直接使用：",[84,723,727],{"className":724,"code":725,"language":726,"meta":39,"style":39},"language-js shiki shiki-themes github-light","umami.track(event_name: string, event_data: object);\n","js",[19,728,729],{"__ignoreMap":39},[92,730,731,734,737],{"class":94,"line":95},[92,732,733],{"class":525},"umami.",[92,735,736],{"class":105},"track",[92,738,739],{"class":525},"(event_name: string, event_data: object);\n",[16,741,742,743,746],{},"如果不传 ",[19,744,745],{},"event_name","，记录的就是页面浏览事件，比如这样",[84,748,750],{"className":724,"code":749,"language":726,"meta":39,"style":39},"umami.track({ website: 'e676c9b4-11e4-4ef1-a4d7-87001773e9f2', url: '/home', title: 'Home page' });\n",[19,751,752],{"__ignoreMap":39},[92,753,754,756,758,761,764,767,770,773,776],{"class":94,"line":95},[92,755,733],{"class":525},[92,757,736],{"class":105},[92,759,760],{"class":525},"({ website: ",[92,762,763],{"class":109},"'e676c9b4-11e4-4ef1-a4d7-87001773e9f2'",[92,765,766],{"class":525},", url: ",[92,768,769],{"class":109},"'/home'",[92,771,772],{"class":525},", title: ",[92,774,775],{"class":109},"'Home page'",[92,777,778],{"class":525}," });\n",[16,780,781,782,617,785,788,789,791],{},"记录时只会记录 ",[19,783,784],{},"url",[19,786,787],{},"title"," ，如果要包含 ",[19,790,421],{}," 默认的属性",[84,793,795],{"className":724,"code":794,"language":726,"meta":39,"style":39},"umami.track(props => ({ ...props, url: '/home', title: 'Home page' }));\n",[19,796,797],{"__ignoreMap":39},[92,798,799,801,803,806,810,813,816,819,822,824,826,828],{"class":94,"line":95},[92,800,733],{"class":525},[92,802,736],{"class":105},[92,804,805],{"class":525},"(",[92,807,809],{"class":808},"sqxcx","props",[92,811,812],{"class":515}," =>",[92,814,815],{"class":525}," ({ ",[92,817,818],{"class":515},"...",[92,820,821],{"class":525},"props, url: ",[92,823,769],{"class":109},[92,825,772],{"class":525},[92,827,775],{"class":109},[92,829,830],{"class":525}," }));\n",[16,832,833],{},"所以刚才按钮的事件可以这样记录：",[84,835,837],{"className":724,"code":836,"language":726,"meta":39,"style":39},"umami.track('signup-button', { name: 'newsletter', id: 123 });\n",[19,838,839],{"__ignoreMap":39},[92,840,841,843,845,847,850,853,856,859,862],{"class":94,"line":95},[92,842,733],{"class":525},[92,844,736],{"class":105},[92,846,805],{"class":525},[92,848,849],{"class":109},"'signup-button'",[92,851,852],{"class":525},", { name: ",[92,854,855],{"class":109},"'newsletter'",[92,857,858],{"class":525},", id: ",[92,860,861],{"class":113},"123",[92,863,778],{"class":525},[11,865,866],{"id":866},"总结",[16,868,869,870,872],{},"以上就是 ",[19,871,21],{}," 的安装和在项目中的使用。",[16,874,875,876,879,880,882,883,886],{},"内存占用方面，使用 ",[19,877,878],{},"node"," 作为运行时，",[19,881,321],{}," 显示umami占用内存在 ",[19,884,885],{},"80 ~ 200"," mb之间，不知道流量比较大的站点内存消耗如何。",[16,888,889,890,892],{},"但作为安装、运行、使用上来说，",[19,891,421],{}," 集成非常简单易用，推荐大家使用",[16,894,895],{},"欢迎在评论区交流",[897,898,899],"style",{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .shJU0, html code.shiki .shJU0{--shiki-default:#22863A}html pre.shiki code .sqxcx, html code.shiki .sqxcx{--shiki-default:#E36209}",{"title":39,"searchDepth":102,"depth":102,"links":901},[902,903,911,915],{"id":13,"depth":102,"text":14},{"id":79,"depth":102,"text":79,"children":904},[905,906,907,908,909,910],{"id":167,"depth":117,"text":167},{"id":184,"depth":117,"text":184},{"id":206,"depth":117,"text":206},{"id":241,"depth":117,"text":242},{"id":299,"depth":117,"text":300},{"id":386,"depth":117,"text":387},{"id":416,"depth":102,"text":416,"children":912},[913,914],{"id":428,"depth":117,"text":428},{"id":630,"depth":117,"text":630},{"id":866,"depth":102,"text":866},"2025-03-19T00:00:00.000Z","md","2025-08-19T00:00:00.000Z",{},"/post/knows/umami-website-watch","---\ntitle: ✨使用umami低成本监控网站流量\ndate: 2025-03-19\nlastmod: 2025-08-19\n---\n## 👀什么是Umami\n\n`Umami` 是一款开源的、注重隐私的网络分析工具（基于NextJS），可作为 `Google Analytics` 的替代品。它提供有关网站流量、用户行为和性能的重要见解，同时优先考虑数据隐私。\n\n与许多传统分析平台不同，Umami 不会收集或存储个人数据，从而避免了使用 cookie 的需求，并且符合 GDPR 和 PECR 标准。\n\nUmami 设计轻巧、易于设置，可自托管，让用户完全控制自己的数据。\n\n这是我部署后的界面：\n![](https://img.zzao.club/article/202503191130622.png)\n\n同时包含了一些访客的浏览器、设备、操作系统等信息\n\n![](https://img.zzao.club/article/202503191130624.png)\n\n以及 `ip` 所在国家\n\n![](https://img.zzao.club/article/202503191130625.png)\n\n在**行为类别**中，还可以看到自己在网站中的埋点\n\n![](https://img.zzao.club/article/202503191130626.png)\n\n总结：  MIT开源、免费、独立部署的网站数据分析工具\n\n## 安装\n\n如果使用Docker那就非常简单了\n\n```shell\n# 直接在项目根目录运行\ndocker-compose up -d\n\n# 或者使用下面镜像 二选一\ndocker pull docker.umami.is/umami-software/umami:mysql-latest\ndocker pull docker.umami.is/umami-software/umami:postgresql-latest\n```\n\n因为我已经存在一个正在运行的 `Mysql` Docker服务了，所以下面以从源码安装，并以 `PM2` 运行 `Umami` 为例\n### 环境要求\n\n`Node >= 18.18`\n\n`Mysql >= 8.0` 或 `PostgreSQL >= 12.14`\n\n### 安装yarn\n\n```shell\nnpm install -g yarn\n```\n\n### 获取源代码\n\n```shell\ngit clone https://github.com/umami-software/umami.git\ncd umami\nyarn install\n```\n\n### .env 文件\n\n创建一个 `.env` 文件，用于数据库连接\n\n如果你还没有Mysql服务，可以参考我这篇：[【使用Docker启动Mysql】](https://blog.zzao.club/post/nuxt/local-init-mysql-by-docker) \n\n```txt\nDATABASE_URL=mysql://username:mypassword@localhost:3306/mydb\n```\n\n将 `username`、`password`、`mydb` 都替换成自己的，其中mydb的创建可以参考：[安装后如何初始化库和新用户](https://blog.zzao.club/post/nuxt/prod-docker-mysql-config)\n\n还可以配置 `PORT=4577`，端口号\n### PM2启动\n\n```\nyarn global add pm2\ncd umami\npm2 start yarn --name umami -- start\npm2 startup\npm2 save\n```\n\n如果配置了PORT，PM2命令要对应的修改为\n\n```shell\npm2 start yarn --name umami -- start-env\n```\n\n如果不用 `env` 文件，可以直接传递变量\n\n```shell\npm2 start yarn --name umami -- start --port=6001\n```\n\n两种方式都可以。\n\n`pm2 startup` 则是为了设置开机自启，`save` 会把当前配置保存起来\n\n### 配置 Nginx\n\n此处仅作为作为参考，适用于配置多个子域名，共用一个泛域名证书\n\n```\nhttp {\n\t# umami\n    upstream upstream_umami{\n        server localhost:6001;\n    }\n\tmap $host $proxy_pass {\n        hostnames;  # 添加这行以优化域名匹配\n\n\t\t# ...省略其他子域名\n        umami.xxx.com http://upstream_umami;\n    }\n\tserver {\n        listen 443 ssl; \n        server_name *.xxx.com; #泛域名\n        \n        ssl_certificate /etc/nginx/certs/xxx\n        ssl_certificate_key /etc/nginx/certs/xxx\n\n        fastcgi_param  HTTPS        on;\n        fastcgi_param  HTTP_SCHEME     https;\n\n        location / {\n            add_header X-Final-Destination $upstream_addr;\n            \n            proxy_set_header   X-Real-IP         $remote_addr;\n            proxy_set_header   Host              $http_host;\n            proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;\n            \n            proxy_pass $proxy_pass; \n        }\n\n    }\n}\n```\n\n配置成功后，`nginx -t` 检测是否有错误，如果没错就 `restart nginx`\n\n然后再访问配好的子域名 `umami.xxx.com` 是否有效就可以了\n## 使用\n\n`umami` 的使用也非常简单，首先打开 `umami.xxx.com` ，也就是自己配好的地址\n\n### 基本配置\n\n登录 => 设置 => 修改密码 + 修改语言\n\n- 默认用户名: admin\n- 默认密码：umami\n\n![](https://img.zzao.club/article/202503191130627.png)\n找到用户这里\n\n![](https://img.zzao.club/article/202503191130628.png)\n\n修改语言直接点击右上角的国际化图标即可\n\n设置好后，在**设置 -> 网站 -> 添加网站**中，输入自己的网站名字和域名\n\n![](https://img.zzao.club/article/202503191130629.png)\n\n添加好点击**编辑**按钮\n\n![](https://img.zzao.club/article/202503191130630.png)\n\n然后就可以看到自己的网站lD、跟踪代码\n\n![](https://img.zzao.club/article/202503191130631.png)\n\n接下来就是要把跟踪代码添加到当前网站项目中\n\n以 `Nuxt` 为例\n\n在 `nuxt.config.ts` 中，添加如下配置\n\n```typescript\nexport default defineNuxtConfig({\n\tapp: {\n\t\thead: {\n\t\t\tscript: [\n\t\t\t\t{\n\t\t\t\t\tsrc: 'https://umami.xxx.com/script.js',\n\t\t\t        defer: true,\n\t\t            \"data-website-id\": \"your_data_website_id\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n})\n```\n\n把 `src` 和 `data-website-id` 替换成自己的即可\n\n重新打包、发布Nuxt应用后，umami的统计就会立即生效了，可以前往 `umami.xxx.com` 去看访问数据\n\n### 埋点\n\n要想记录某个按钮的点击行为，以及传递一些用户信息来记录，需要用到 `Umami` 的 `Track Events`\n\n```html\n\u003Cbutton id=\"signup-button\" data-umami-event=\"Signup button\" data-umami-event-id=\"123\">Sign up\u003C/button>\n```\n\n`data-umami-event` ：表示记录的事件名\n`data-umami-event-*` ：表示给事件传递的属性 `{ id： \"123\"}` 会这样被记录下来\n\n这种使用 `html` 属性的方式，所有数据会保存为字符串，记录一些基本动作也是够用的\n\n也可以使用 JS 的方式来主动调用\n\n引入 `umami/script.js` 时，会在全局注入一个 `umami` 对象，所以直接使用：\n\n```js\numami.track(event_name: string, event_data: object);\n```\n\n如果不传 `event_name`，记录的就是页面浏览事件，比如这样\n\n```js\numami.track({ website: 'e676c9b4-11e4-4ef1-a4d7-87001773e9f2', url: '/home', title: 'Home page' });\n```\n\n记录时只会记录 `url` 和 `title` ，如果要包含 `umami` 默认的属性\n\n```js\numami.track(props => ({ ...props, url: '/home', title: 'Home page' }));\n```\n\n所以刚才按钮的事件可以这样记录：\n\n```js\numami.track('signup-button', { name: 'newsletter', id: 123 });\n```\n\n## 总结\n\n以上就是 `Umami` 的安装和在项目中的使用。\n\n内存占用方面，使用 `node` 作为运行时，`pm2` 显示umami占用内存在 `80 ~ 200` mb之间，不知道流量比较大的站点内存消耗如何。\n\n但作为安装、运行、使用上来说，`umami` 集成非常简单易用，推荐大家使用\n\n欢迎在评论区交流",{"title":5,"description":39},"post/knows/umami-website-watch","evPZae_YLZAd5fFM7ZQtoTJLeuBvq-5_zOyrBBBxmYM",[926,930],{"title":927,"path":928,"stem":929},"OpenClaw 安装入门（Windows）","/post/zzao/openclaw/openclaw-install-windows","post/zzao/openclaw/openclaw-install-windows",{"title":931,"path":932,"stem":933},"假设你是AI，你的Skill应该是什么样的","/post/zzao/ai-skill-structure","post/zzao/ai-skill-structure",1779005085962]