前端错误日志上报及网站统计(sentry+matomo)

发布于

本文配合 rancher1.6(手头一个测试集群没升级到最新的 2.x)讲解如何搭建并配置日志错误上报框架Sentry及网站统计分析框架matomo 的搭建及接入 vue(本文以iview-admin为例)项目。

背景简述

  • sentry 项目运行过程中，难免出现 bug，前端不像后端可以很方便的采集项目日志(比如 log4j + elk)，导致每次出问题后还原车祸现场费时费力。另外现在随着 vue 等兴起，构建项目时打成 min.js，无疑又加大了前端定位问题的难度。而 sentry 是一款专注于错误采集的框架，支持常见的主流语言image.png采集，聚合，并推送错误信息。注意，sentry 并不是日志平台(e.g. log4j + elk)，也不是监控平台，sentry 专注于项目中的 Error 信息的采集，聚合，报警。
  • matomo 前身 Pwiki，是一款开源的 web 网站分析利器。类似于 Google Analytics。具体的特性，参见 Premium Web Analytics ，比如绘制页面热力图，录制会话，访问漏斗，A/B Test 等(这几样都是收费插件功能)。

注意：本文假设你已经有 rancher1.6 的环境

安装

matomo

rancher 创建 matomo

在 rancher 主机上

## 创建必要文件夹
mkdir -p /data/matomo/{config,logs,php,maxmind}/

## 安装maxmind ip数据库
wget -P /tmp/ https://github.com/maxmind/geoipupdate/releases/download/v4.0.3/geoipupdate_4.0.3_linux_amd64.deb
dpkg -i /tmp/geoipupdate_4.0.3_linux_amd64.deb
mv /etc/GeoIP.conf{,.bak}
cat << EOF | sudo tee -a /etc/GeoIP.conf
AccountID 0
LicenseKey 000000000000
EditionIDs GeoLite2-Country GeoLite2-City GeoLite2-ASN
DatabaseDirectory /data/matomo/maxmind
EOF

## 下载最新maxmind数据库
geoipupdate
ls -lah /data/matomo/maxmind/
总用量 67M
drwxr-xr-x 2 root root 4.0K 7月   7 17:25 .
drwxr-xr-x 6 root root 4.0K 7月   7 17:23 ..
-rw------- 1 root root    0 7月   7 17:25 .geoipupdate.lock
-rw-r--r-- 1 root root 6.3M 7月   7 17:25 GeoLite2-ASN.mmdb
-rw-r--r-- 1 root root  57M 7月   7 17:25 GeoLite2-City.mmdb
-rw-r--r-- 1 root root 3.7M 7月   7 17:25 GeoLite2-Country.mmdb

## 定时更新ip数据库
cat << EOF | sudo tee -a /etc/cron.d/geoipupdate
50 2 * * 4 root /usr/bin/geoipupdate
EOF

## 设置php.ini
cat << EOF | sudo tee -a /data/matomo/php/php.ini
upload_max_filesize = 128M
post_max_size = 128M
max_execution_time = 200
memory_limit = 256M
EOF

docker-compose.yaml

version: "2"
services:
  matomo:
    image: matomo:latest
    stdin_open: true
    volumes:
      - /data/matomo/config:/var/www/html/config
      - /data/matomo/logs:/var/www/html/logs
      - /data/matomo/php/php.ini:/usr/local/etc/php/php.ini
      - /data/matomo/maxmind/GeoLite2-City.mmdb:/var/www/html/misc/GeoLite2-City.mmdb
      - /data/matomo/maxmind/GeoLite2-Country.mmdb:/var/www/html/misc/GeoLite2-Country.mmdb
      - /data/matomo/maxmind/GeoLite2-ASN.mmdb:/var/www/html/misc/GeoLite2-ASN.mmdb
    tty: true
    ports:
      - 80:80/tcp
      - 443:443/tcp

rancher-compose.yaml

version: "2"
services:
  matomo:
    scale: 1
    start_on_create: true
    health_check:
      response_timeout: 2000
      healthy_threshold: 2
      port: 80
      unhealthy_threshold: 3
      initializing_timeout: 60000
      interval: 2000
      strategy: recreate
      reinitializing_timeout: 60000

image.png

配置 matomo

选择中文
image.png
系统检查
image.png
配置数据库
image.png
自动建表完成
image.png
创建管理员用户(忘记截图了)
设置分析网站(可以随便创建，后边再进行修改),注意跟进实际情况修改时区
image.png
复制跟踪代码
image.png
配置 matomo
image.png
登陆
image.png

Sentry

rancher 创建 Sentry

docker-compose.yml

version: "2"
services:
  cron:
    image: sentry:9
    environment:
      SENTRY_MEMCACHED_HOST: memcached
      SENTRY_REDIS_HOST: redis
      SENTRY_POSTGRES_HOST: postgres
      SENTRY_EMAIL_HOST: smtp
      SENTRY_SECRET_KEY: SENTRY_SECRET_KEY_XXX
    stdin_open: true
    volumes:
      - /data/sentry-data:/var/lib/sentry/files
      - /data/sentry-data/config.yml:/etc/sentry/config.yml
    tty: true
    command:
      - run
      - cron
  memcached:
    image: memcached:1.5-alpine
  web:
    image: sentry:9
    environment:
      SENTRY_MEMCACHED_HOST: memcached
      SENTRY_REDIS_HOST: redis
      SENTRY_POSTGRES_HOST: postgres
      SENTRY_EMAIL_HOST: smtp
      SENTRY_SECRET_KEY: SENTRY_SECRET_KEY_XXX
    stdin_open: true
    volumes:
      - /data/sentry-data:/var/lib/sentry/files
      - /data/sentry-data/config.yml:/etc/sentry/config.yml
    tty: true
    ports:
      - 9000:9000/tcp
  worker:
    image: sentry:9
    environment:
      SENTRY_MEMCACHED_HOST: memcached
      SENTRY_REDIS_HOST: redis
      SENTRY_POSTGRES_HOST: postgres
      SENTRY_EMAIL_HOST: smtp
      SENTRY_SECRET_KEY: SENTRY_SECRET_KEY_XXX
    stdin_open: true
    volumes:
      - /data/sentry-data:/var/lib/sentry/files
      - /data/sentry-data/config.yml:/etc/sentry/config.yml
    tty: true
    command:
      - run
      - worker
  redis:
    image: redis:3.2-alpine
  postgres:
    restart: unless-stopped
    image: postgres:9.5
    volumes:
      - /data/postgresql/data:/var/lib/postgresql/data
    ports:
      - 5432:5432/tcp

注意把 SENTRY_SECRET_KEY 换成 sentry 的实际 secret key

rancher-compose.yml

version: "2"
services:
  cron:
    scale: 1
    start_on_create: true
  memcached:
    scale: 1
    start_on_create: true
  web:
    scale: 1
    start_on_create: true
    health_check:
      response_timeout: 2000
      healthy_threshold: 2
      port: 9000
      unhealthy_threshold: 3
      initializing_timeout: 60000
      interval: 2000
      strategy: recreate
      reinitializing_timeout: 60000
  worker:
    scale: 1
    start_on_create: true
  redis:
    scale: 1
    start_on_create: true
  postgres:
    scale: 1
    start_on_create: true
    health_check:
      response_timeout: 2000
      healthy_threshold: 2
      port: 5432
      unhealthy_threshold: 3
      initializing_timeout: 60000
      interval: 2000
      strategy: recreate
      reinitializing_timeout: 60000

先将 docker-compose.yml 保存到服务器上，用来初始化 db 和创建账号

docker-compose run --rm web upgrade
Would you like to create a user account now? [Y/n]: y
Email: anjia0532@gmail.com
Password:
Repeat for confirmation:
Should this user be a superuser? [y/N]: y
## 直到输出
Migrated:
 - sentry
 - sentry.nodestore
 - sentry.search
 - social_auth
 - sentry.tagstore
 - sentry_plugins.hipchat_ac
 - sentry_plugins.jira_ac
Creating missing DSNs
Correcting Group.num_comments counter
## 并退出

配置 Sentry

image.png
image.png
image.png
image.png
image.png
image.png
image.png

配置 vue

本文以 iview-admin 为例

git clone https://gitee.com/anjia/iview-admin.git
cd iview-admin

sentry

注意，网上很多文档，以讹传讹的使用过时的工具，raven-js .从 5.x 后官方建议使用@sentry/browser 和@sentry/integrations

npm install --save @sentry/integrations
npm install --save @sentry/browser

修改 iview-admin\src\main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import router from "./router";
import store from "./store";
import iView from "iview";
import i18n from "@/locale";
import config from "@/config";
import importDirective from "@/directive";
import { directive as clickOutside } from "v-click-outside-x";
import installPlugin from "@/plugin";
import "./index.less";
import "@/assets/icons/iconfont.css";
import TreeTable from "tree-table-vue";
import VOrgTree from "v-org-tree";
import "v-org-tree/dist/v-org-tree.css";
import * as Sentry from "@sentry/browser";
import * as Integrations from "@sentry/integrations";
// 实际打包时应该不引入mock
/* eslint-disable */
if (process.env.NODE_ENV !== "production") require("@/mock");

Vue.use(iView, {
  i18n: (key, value) => i18n.t(key, value),
});
Vue.use(TreeTable);
Vue.use(VOrgTree);
/**
 * @description 注册admin内置插件
 */
installPlugin(Vue);
/**
 * @description 生产环境关掉提示
 */
Vue.config.productionTip = false;
/**
 * @description 全局注册应用配置
 */
Vue.prototype.$config = config;
/**
 * 注册指令
 */
importDirective(Vue);
Vue.directive("clickOutside", clickOutside);

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  i18n,
  store,
  render: (h) => h(App),
});

Sentry.init({
  dsn: "https://xxx@xxx.xxx.com/xxx",
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true,
    }),
  ],
});
npm install
npm run dev

打开 http://localhost:8080/error_store/error_store_page
分别点击两个按钮，模拟出错
image.png
打开 sentry 发现已经有错误上报了，并且对错误进行聚合。
image.png
image.png点开查看详细内容。

如果需要生成 source-map ,可以参考官方文档 https://docs.sentry.io/platforms/javascript/sourcemaps/

matomo

image.png
image.png
image.png

npm install --save vue-matomo

修改 iview-admin\src\main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import router from "./router";
import store from "./store";
import iView from "iview";
import i18n from "@/locale";
import config from "@/config";
import importDirective from "@/directive";
import { directive as clickOutside } from "v-click-outside-x";
import installPlugin from "@/plugin";
import "./index.less";
import "@/assets/icons/iconfont.css";
import TreeTable from "tree-table-vue";
import VOrgTree from "v-org-tree";
import "v-org-tree/dist/v-org-tree.css";
import * as Sentry from "@sentry/browser";
import * as Integrations from "@sentry/integrations";
import VueMatomo from "vue-matomo";

// 实际打包时应该不引入mock
/* eslint-disable */
if (process.env.NODE_ENV !== "production") require("@/mock");

Vue.use(iView, {
  i18n: (key, value) => i18n.t(key, value),
});
Vue.use(TreeTable);
Vue.use(VOrgTree);
/**
 * @description 注册admin内置插件
 */
installPlugin(Vue);
/**
 * @description 生产环境关掉提示
 */
Vue.config.productionTip = false;
/**
 * @description 全局注册应用配置
 */
Vue.prototype.$config = config;
/**
 * 注册指令
 */
importDirective(Vue);
Vue.directive("clickOutside", clickOutside);

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  i18n,
  store,
  render: (h) => h(App),
});

Sentry.init({
  dsn: "https://xxx@xxx.xxx.com/xxx",
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true,
    }),
  ],
});
Vue.use(VueMatomo, {
  // Configure your matomo server and site by providing
  host: "//xxxx.xxxx.com/",
  siteId: xx,

  // Changes the default .js and .php endpoint's filename
  // Default: 'piwik'
  trackerFileName: "matomo.js",

  // Overrides the autogenerated tracker endpoint entirely
  // Default: undefined
  trackerUrl: "//xxxx.xxxx.com/matomo.php",

  // Enables automatically registering pageviews on the router
  router: router,

  // Enables link tracking on regular links. Note that this won't
  // work for routing links (ie. internal Vue router links)
  // Default: true
  enableLinkTracking: true,

  // Require consent before sending tracking information to matomo
  // Default: false
  requireConsent: false,

  // Whether to track the initial page view
  // Default: true
  trackInitialView: true,

  // Whether or not to log debug information
  // Default: false
  debug: false,
});

// or
window._paq.push;

// or through
window.Piwik.getTracker;

打开 http://localhost:8080, 随便访问几个菜单,然后打开 matomo
image.png
image.png
路由已经有数据了
image.png
并且将用户的常规数据聚合起来

更多

其实本文只是 sentry 和 matomo 简单介绍
更深入的使用，比如 sentry，推送邮件，文中一带而过的 sourcemap，单点登录(集成内部的权限认证)，自定义上报内容(将错误与用户 id 关联起来)，,敏感数据脱敏等
比如 matomo, 每日发送分析报表，增加 kafka 插件，进行更深层次的挖掘，自定义上报内容(购物车等),大数据量情况下的优化，优化用户设备指纹，使用了 nginx 等反代软件后，如何正确识别真实 ip，热力图，A/B test,漏斗图等

来源：https://anjia0532.github.io/2019/07/07/sentry-and-matomo-install/

评论

发表评论

此博客中的热门博文

防盗门/安全门选购攻略

发布于
一.综合答疑篇 问：防盗门的选购原则是什么 答 ：三个不要：不要纠结品牌，不要看广告，不要百度。这三样东西越看越迷糊。 选购原则看三点 一看级别   看门和锁芯的级别 甲门C锁 是目前 安全系数最高的组合。这个大前提能确保各位家门不会以最简单的方式被打开 二看填充物 聚氨酯发泡>岩棉板>铝箔蜂窝板>松木蜂窝板>纸板蜂窝板   填充物的材料能影响到防盗门门板的抗冲击能力 ，门整体的隔音能力，保暖能力和整体的使用寿命。 三看门板材料 铸铝门>铜门>锌合金钢板>镀锌钢板>冷轧钢板   门板选材 不仅影响到防盗门抗冲击能力 ，门整体的隔音能力与保暖能力。最重要的影响的是门板的抗氧化能力，即防锈。 四看门扇厚度 10CM>9CM>9CM以下   门扇厚度关系到整体的用料量和厂家的工艺处理体系，高端防盗门和入户门都是以每平方单价来算价格的。当然，蜂窝板填充的防盗门买再厚也没意义 问：为什么说 甲门C锁 是目前 安全系数最高的组合 答：这个问题是大家可以在百度，抖音，小红书，知乎上可以轻易查到的。我回答过很多次，知乎上很多家装类的大佬也都回答过很多次的问题，我也不想浪费太多笔墨。 特别强调:C级锁扮演着比甲级门更重要的角色 甲级门定义： 根据国标安全门通用技术条件GB 17565－2007的描述总结： 甲级门是一扇 门框>2mm 外面板>1mm 内面板>1mm 防破坏时间 >30min 闭合锁点个数 通常为（中锁+天地锁+侧边锁）组合 合计12个以上的防盗门 注：各位看第二张图，甲级门标准是照着乙级门标准定的，只要超过乙级标准，就是甲级。也是市面上王力盼盼等流水线产品的主流标准。 C级锁定义： 根据机械防盗锁标准GA／T73-92015中描述总结 C级锁是一种无论从防钻，防锯，防撬，防拉，防冲击都需要30分钟以上，防技术开启需要十分钟以上。 C级锁钥匙相比于A级 B级锁简单的单子排列，拥有更复杂的叶片结构和内外铣凸槽。该锁即使通过机器也难以复制，互开率低于0.01%，通过强扭工具会引发锁芯锁死。 c级别钥匙 从以上角度来说，C级锁扮演着比甲级门更重要的角色，我国有许多家庭并不在意门体等级而更关注锁具等级，使用乙级门作为防盗门的情况也很普遍。 A B级钥匙 以下...
阅读全文

kubernetes运行一个有状态的应用程序(使用StatefulSet)

发布于
该页面显示如何使用 StatefulSet 控制器去运行一个有状态的应用程序。此例是一主多从的 MySQL 集群。 请注意 这不是生产配置 。 重点是， MySQL 设置保留在不安全的默认值上，使重点放在 Kubernetes 中运行有状态应用程序的常规模式。 教程目标 使用 StatefulSet 控制器部署复制的 MySQL 拓扑。 发送 MySQL 客户端流量。 观察对宕机的抵抗力。 缩放 StatefulSet 的大小。 准备开始 Katacoda Play with Kubernetes 要获知版本信息，请输入 kubectl version . 您需要有一个带有默认 StorageClass 的动态持续卷供应程序，或者自己 静态的提供持久卷 来满足这里使用的 持久卷请求 。 This tutorial assumes you are familiar with PersistentVolumes and StatefulSets , as well as other core concepts like Pods , Services , and ConfigMaps . Some familiarity with MySQL helps, but this tutorial aims to present general patterns that should be useful for other systems. –> 你必须拥有一个 Kubernetes 的集群，同时你的 Kubernetes 集群必须带有 kubectl 命令行工具。 如果你还没有集群，你可以通过 Minikube 构建一 个你自己的集群，或者你可以使用下面任意一个 Kubernetes 工具构建： Katacoda Play with Kubernetes 要获知版本信息，请输入 kubectl version . 您需要有一个带有默认 StorageClass 的动态持续卷供应程序，或者自己 静态的提供持久卷 来满足这里使用的 持久卷请求 。 本教程假定您熟悉 PersistentVolumes 与 StatefulSets , 以及其他核心概念，例如 Pods , Services , 与 ConfigMaps . 熟悉 MySQL 会有所帮助，但是本教程...
阅读全文

Blogger搭建国内可正常访问博客（超详细教程）

发布于
二、国内访问 Blogger 1 首先准备 请确认自己能够科学上网。 不会的话，我这里写有一篇教程： http://mooc1.chaoxing.com/zt/201723393.html 购买域名。没什么好讲的，各个地方都能买，我图便利，直接在阿里云买的域名。（同一个域名，在腾讯云买还要便宜点，不过因为我上一个域名就在阿里云买的，所以这次顺便就在阿里云买了） 2.设置解析 1.Blogger要求的设置 打开Blogger后台，找到设置—基本，Blogger 会提示你需要设置两个 CNAME 分别解析到 ghs.google.com 和 ***.dv.googlehosted.com (每一个人的都不一样) 为了 Blogger 可以在国内访问，我们不能直接按上述的解析。 我们得将第一个 CNAME 解析：记录类型： A 记录，主机记录：WWW，记录值由「ghs.google.com」改成 「国内可访问的 IP」 后面的一个CNAME 解析不变：记录类型：CNAME，主机记录：ai76xxxxxxxxxxx，记录值：gv-j5jxxxxxxxxxx 2. 寻找国内可访问的 IP 可以使用站长之家 Ping 工具：http://ping.chinaz.com/ 如下图所示，Ping检测：ghs.google.com 找一个国内可访问的 IP。 注意：香港的IP延迟虽然小，但是不行。 3.域名后台设置解析 打开阿里云控制台—域名—域名列表—解析，照第一步所说的那样样设置，如下图： 至此，域名解析设置完成，当然这样还不够，我们还得修改Blogger自带的博客模板。 备注：如果想要实现不带www访问 添加：记录类型： A 记录，主机记录：@，记录值同为找到的 「国内可访问的 IP」 如下图这样： 这样用 axutongxue.com 也可以访问我的博客了 4.启用https 之前大佬说在设置https时，不能直接设置： https://blog.iljw.me/2018/07/enable-blogger-https.html 不过现在blogger好像改了，按上面那样设置之后，我们就可以直接在Blogger后台开启https了 ...
阅读全文

iPhone手机上安装旧版本App

发布于
准备软件 iTunes 12.6.5.3 Fiddler 安装版 iTunes 12.6.5.3 Fidder 汉化版 Fidder 安装版 Charles4.2.7核心文件 本文以QQ安装旧版举例 查询旧版App的版本号 打开 https://tools.lancely.tech/apple/app-search 输入QQ 在iTunes中搜索QQ 按照下文中的资料配置 Fiddler ，记住要开启HTTPS的代理，在下图红色箭头处输入 bpu MZBuy.woa 开启拦截。 最后在iTunes中点击QQ的获取。就完成了。后续的步骤就不写了，很简单的东西。 本文的意义只是为了不让自己忘记而已。 参考资料 查询旧版AppId 使用拦截器获取旧版App 使用拦截器获取旧版App  来源：https://kany.me/2019/10/10/iphone-install-old-app/
阅读全文

小程序框架全面测评

发布于
最近前端届多端框架频出，相信很多有代码多端运行需求的开发者都会产生一些疑惑：这些框架都有什么优缺点？到底应该用哪个？ 作为 Taro 开发团队一员，笔者想在本文尽量站在一个客观公正的角度去评价各个框架的选型和优劣。但宥于利益相关，本文的观点很可能是带有偏向性的，大家可以带着批判的眼光去看待，权当抛砖引玉。 那么，当我们在讨论多端框架时，我们在谈论什么： 多端 笔者以为，现在流行的多端框架可以大致分为三类： 1. 全包型 这类框架最大的特点就是从底层的渲染引擎、布局引擎，到中层的 DSL，再到上层的框架全部由自己开发，代表框架是 Qt 和 Flutter。这类框架优点非常明显：性能（的上限）高；各平台渲染结果一致。缺点也非常明显：需要完全重新学习 DSL（QML/Dart），以及难以适配中国特色的端：小程序。 这类框架是最原始也是最纯正的的多端开发框架，由于底层到上层每个环节都掌握在自己手里，也能最大可能地去保证开发和跨端体验一致。但它们的框架研发成本巨大，渲染引擎、布局引擎、DSL、上层框架每个部分都需要大量人力开发维护。 2. Web 技术型 这类框架把 Web 技术（JavaScript，CSS）带到移动开发中，自研布局引擎处理 CSS，使用 JavaScript 写业务逻辑，使用流行的前端框架作为 DSL，各端分别使用各自的原生组件渲染。代表框架是 React Native 和 Weex，这样做的优点有： 开发迅速 复用前端生态 易于学习上手，不管前端后端移动端，多多少少都会一点 JS、CSS 缺点有： 交互复杂时难以写出高性能的代码，这类框架的设计就必然导致 JS 和 Native 之间需要通信，类似于手势操作这样频繁地触发通信就很可能使得 UI 无法在 16ms 内及时绘制。React Native 有一些声明式的组件可以避免这个问题，但声明式的写法很难满足复杂交互的需求。 由于没有渲染引擎，使用各端的原生组件渲染，相同代码渲染的一致性没有第一种高。 3. JavaScript 编译型 这类框架就是我们这篇文章的主角们： Taro 、 WePY 、 uni-app 、 mpvue 、 chameleon ，它们的原理也都大同小异：先以 JavaScript 作为基础选定一个 DSL 框架...
阅读全文

打造一个可国内访问的Blogger（Blogspot）方法

发布于
  Blog‍‌‍‌​‌‌‌‌​‌​‍‌​‍‌‍‍​‌‌‍‌​‌‍​‍‌​​‍‌‌‌​‌‍‌‌​‍‍‍​‍‍‌​​‍‌‍‌​‍‌‍‍​‌‌‍‌​‌‍​‍‌​​‍​‍‍‍​‌‍‍‌ger,一个干爽、免费的博客发布平台，作为主流的发布，提供免费的托管，免去了Typecho&Wordpress高昂的服务器费用，避免了Hexo&Jekyll静态博客无后台的缺陷，与CSDN、简书相比，可以绑定域名，界面干净，无广告【当然可以自己放自己的广告】。 实际上，当今写博客的软件数不胜数，主要分为一下三类： 服务器部署：典型代表：Wordpress\Typecho 无服务器托管：典型代表：Hexo\Jekyll\Gidea\Hugo\Hola等等 集成型网站：Blogger、简书、CSDN、cnblog、wodemo等等 上面所有软件，优缺点都有，具体看个人选择 当然，个人认为Typecho适合做个人博客，Hexo可以作为要求不高的人。集成性网站最主要的是只要安安心心写文章，不用管后端乱七八糟的代码。当然，最有问题的是大多数都不支持绑定域名，而且经常往网站上塞广告，自定义范围也不够。 接下来，我们扯扯集成博客中的一股清流：Blogger Blogger.com是由Pyra Labs公司创立，是目前全球用户数量最多的个人网志服务提供商。Pyra Labs和Blogger.com均被Google公司收购，成为其旗下的一项服务内容。 Blogger提供免费主机Blogspot.com存放博客，用户不必写任何代码或者安装服务器软件或脚本，通过所见即所得界面轻松地创建、发布、维护和修改自己的网志。 Blogger允许有经验的用户自行设计博客界面，其模板支持使用HTML和CSS进行编辑 实际上，由于Blogger托管于谷歌，写作域名  www.blogger.com  和托管域名  *.blogspot.com  均被MainLand所Ban。但是接下来来，我会讲讲如何打造一个能在国内大陆访问的Blogger 1. 注册Blogger 众所周知，请善用技术上网。 用谷歌账号登录 ( https://www.blogger.com ) ，没有？不是⑧不是吧不是扒，都0202年了，还不会去注册一个谷歌账号？ 进入控制台，新建一个博客： 绑...
阅读全文

星际蜗牛安装黑裙（群晖）制作家用nas

发布于
说重点，群晖安装 选哪个型号哪个版本呢？ 之前用的5.2版本功能不够多，docker装上去运行个迅雷，隔一段时间就卡死了。download station里的rss订阅时间长了也更新不了。同时考虑到同步办公文件，这次得找个稳定的版本安装。 网上流传一个ds3617的二合一版本，正好可以安装到固态上。装完以后开机显示的画面有乱码 ，虽然乱码不影响使用，可总感觉不够稳定，再加上第一次插上硬盘以后重启了下，发现硬盘损毁，更不敢用了。（现在回过头来发现，应该是我插上去的那块硬盘是从别的nas上拆下来的，系统不识别造成的吧 ） nas论坛上走一遭发现还是乖乖用优盘引导安装吧。 网上最多的是918、916、3617、3615四种型号，群晖版本一般是6.1.7、6.2、6.2.1，选来选去选了6.1.7版本的3615，网友说这个版本稳定运行几年了。希望它稳定运行到天荒地老 小白注解 ： 群晖安装文件分两部分，引导文件和系统安装文件，黑群晖为啥黑就是引导文件是大神破解的。系统安装文件都是官方的，不用修改。 软件下载 逛坛子发现有两个好东西，一个是XPEnology多功能工具箱V1.2，软件长这样，首页就是引导文件 第二页是系统安装文件 需要用到的工具也都集成在里面了， 但是我从这里面下载下来的引导文件解压不了。于是找到了第二个神器——黑群晖工具获取器。 打开软件点下加载，然后依次选择型号，版本就全出来了。这里面也带了工具软件，不过我没用。用黑群晖工具获取器下引导文件挺快的，浏览器下载就行，但是系统安装文件就不行了，没速度 ，换迅雷就OK了。 我把引导文件、系统安装文件还有其他工具软件一起放网盘里，大家可以直接下载。 所有文件我都是上传的压缩包，解压以后使用 。 百度网盘链接 : 提取码:sle3 工具准备 一台电脑，一个独立的 显示器 、显示器与NAS的连接线，usb接口键盘。 上面的安装的时候需要，安装完就不用了。 找个闲置的64m优盘，没有的话大一点也可以，就是浪费容量而已。这个优盘以后一直要插nas上了 你们准备完了吗？ OK，正式开始折腾 制作引导优盘 大致流程是 先记录优盘VID和PID 删除原优盘分区， 往优盘上写引导文件 修改引导文件。 首先，拿出64m的优盘，插电脑上，打开XPEnology多功能工具箱，去制作工具栏里找到ChipGenius， 打开，我装了360，...
阅读全文

GoAccess web日志可视化

发布于
有时候我们希望能分析一下web服务器的访问记录，如果是直接打开 /var/log/nginx/access.log 的话，虽然的确可以看到访问记录，但是数据太多了，也很难直观的分析出我们想要的结果。而使用命令来分析虽然可行，但是命令比较难记忆，也不算直观。 今天了解到了一款轻量易部署的工具—— goaccess ，可以用来将我们nginx服务器的访问日志可视化，将数据直观的展现给我们。 除了nginx日志，该工具还可以将apache等服务端的日志可视化展示 安装GoAccess 官方给出了 安装教程 ，有linux包管理器安装，源码编译安装，docker镜像等多种部署方式，由于ubuntu18源里面的goaccess版本还算比较新，可以直接使用 sudo apt install goaccess 来安装 强烈建议不想折腾的话直接用包管理器安装！！！体验基本是相同的 。 不过这篇文章中我计划直接下载源码编译安装最新版，获得最新的体验: 我计划使用geoip city的mmdb数据库(一开始我以为可以精确到城市，但是查看github issues发现他们其实还没做精确到城市的显示…),所以得先去下载geoip2的数据库  https://www.maxmind.com/  需要注册才能下载，还不能挂代理。 bash # 首先安装依赖避免出现下面那些报错 sudo apt-get install libncursesw5-dev libglib2.0-dev libgeoip-dev libtokyocabinet-dev libbz2-dev $ wget https://tar.goaccess.io/goaccess-1.3.tar.gz $ tar -xzvf goaccess-1.3.tar.gz $ cd goaccess-1.3/ $ ./configure --enable-utf8 --enable-geoip = mmdb --enable-tcb = btree #这里的各个配置可以查看教程中的介绍如果要开启ssl 使用 --with-ssl参数 $ make $ make install 第一次尝试安装出现报错 checking for MMDB_open in -l...
阅读全文

微信小程序学习资源汇总（文档、视频、系列教程、开源项目、框架）

发布于
（一）官网文档 1.微信官网小程序开发文档 https:// developers.weixin.qq.com /miniprogram/dev/framework/ 2.【微信支付】微信小程序支付开发者文档 https:// pay.weixin.qq.com/wiki/ doc/api/wxa/wxa_api.php?chapter=1_1 3.小程序·云开发解决方案 为企业和开发者提供一站式后端云服务，无需管理基础架构，一次开发多端运行，腾讯云和微信联合出品。 https:// cloud.tencent.com/solut ion/la 4.小程序注册图文教程 https:// developers.weixin.qq.com /miniprogram/introduction/ 这些文章里面讲解了如何从申请账号到上线运营、给出了开发上手指南和功能体验Demo、包含了完整的API接口和配置说明，是微信小程序最完整最权威的介绍。 对于一个已有 JS 和 Web 开发经验的人来说，可以很快上手开发。 （二）系列教程 1.稀土区：微信小程序开发教程！ 将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。 https:// xituqu.com/508.html 2. 微信小应用 IDE的安装以及安装过程的常见问题及 + Demo 本文内容主要解决下载安装IDE和hello world的问题.----以Windows平台为主 但是现在应该是已经过时了，此教程文章文写于 2016/09/23 ！ https:// github.com/champion32/W eAppIdeIssue 3.开发微信小程序入门前的准备 https:// learnku.com/laravel/t/2 890/before-the-introduction-of-small-programs-wechat 4.从零开始带你撸一个小程序 quick start项目代码的基础上开发一个获取用户位置并显示天气的小程序。 https:// zhuanlan.zhihu.com/p/24 946190 5.极简微信小程序入门示例 本系列将会通过一个非常简单的例子，演示如...
阅读全文

Nginx实用技巧,497跳转,基本认证,WebDav,在线配置生成,第三方模块等

发布于
  同一个端口实现http跳转https 默认的，http和https需要使用不同的端口，做http到https的跳转，也需要从http的端口(默认为80)跳转到https的端口(443)，那么，如何实现在一个端口的情况下，使用http访问转向到https呢？一个简单的方法是利用nginx的497错误码 原理：http和https是tcp的上层协议，当nginx服务器建立tcp连接后，根据收到的第一份数据来确定客户端是希望建立tls还是http。nginx会判断tcp请求的首写节内容以进行区分，如果是0x80或者0x16就可能是ssl或者tls，然后尝试https握手。如果端口开启了https，但请求过来的并不是，会抛出一个http级别的错误，这个错误的状态码是NGX_HTTP_TO_HTTPS，错误代码497，然后在返回response中会抛出一个400错误(因为497不是标准状态码，丢给浏览器也没有用)，这时浏览器会显示"400 Bad Request,The plain HTTP request wes sent to HTTPS port" 这样，可以对497进行路由处理，做302重定向，核心代码如下： error_page 497 https://$host:8080$request_uri; 配置示例： Default 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 server {      charset utf - 8 ;      client_max_body _ size 128M ;        listen 8080 ssl ;        ssl_certificate       cert / test . com . pem ;      ssl_cert...
阅读全文