分类 Code 下的文章

升级后打开前后端均显示503,查询nginx日志显示:

PHP message: Adapter Typecho_Db_Adapter_Mysql is not available

由于之前升级过PHP,因此估计是PHP的问题。修改Typecho的config.inc.php相关代码为:

/** 定义数据库参数 */
$db = new Typecho_Db('Pdo_Mysql', 'typecho_');

恢复正常。

Salesforce 未锁定包(Salesforce Unlocked Package)是Salesforce最新推广的基于包的开发最佳实践。通过Salesforce CLI,我们可以很方便的制作和部署未锁定包。本文只是简略的将核心步骤展示出来:

  1. 创建一个 SFDX 项目
sfdx force:project:create -d demo-workspace -n expenser-app -p force-app
  1. 授权Dev Hub环境,该环境必须启用Dev Hub功能和未锁定包和第二代管控包功能
sfdx auth:web:login -d -a devHub
  1. 创建一个草稿环境(scratch org)并在其中开发包
sfdx force:org:create -f config/project-scratch-def.json -u scratchOrg1
  1. 保证所有要打包的组件都已经在当前的项目文件夹内
  2. 从 SFDX 项目文件夹,直接创建未锁定包:
sfdx force:package:create -n "Demo App" -r force-app -t Unlocked -o me@devhub.org
  1. 检查项目文件夹中的sfdx-project.json文件,CLI 会自动更新项目文件,使其包含上一步创建的包的信息:
{
   "packageDirectories": [
      {
         "path": "force-app",
         "default": true,
         "package": "Demo App",
         "versionName": "ver 0.1",
         "versionNumber": "0.1.0.NEXT"
      }
   ],
   "namespace": "",
   "sfdcLoginUrl": "https://login.salesforce.com",
   "sourceApiVersion": "50.0",
   "packageAliases": {
      "Expense Manager": "0Hoxxx"
   }
}
  1. 创建一个包的版本,Salesforce CLI会自动处理包的版本号等
sfdx force:package:version:create --package "Demo App" -k lushang.me --wait 10
  1. 在另一个创建好的草稿环境中,安装并测试这个版本的包:
sfdx force:package:install -p "Demo App@0.1.0-1" -y testOrg1 -k lushang.me --wait 10 --publishwait 10
  1. 如果上一步骤没问题,则可以发布这个版本的包:
sfdx force:package:version:promote -p "Demo App@0.1.0-1"

参考:

  1. Salesforce DX Developer Guide
  2. Workflow for Unlocked Packages
  3. Release an Unlocked Package

先看原来网站载入性能,Chrome Lighthouse得分6/100,可以说是没分数了:
微信截图_20200909160408.png

我们再看看生成的production环境js包大小:
微信截图_20200909203815.png

基本上违背了所有的前端最佳实践:

  1. 太多第三方Script (3.05MB)
  2. 整体JS体积太大了,一共13MB。而Opera Mini浏览器总共不过12.5MB,这个网站光js就比一个浏览器大。。
  3. 整体CSS体积太大了,4MB。
  4. 没有预加载等功能,整个网站需要下载玩这接近20MB数据,才能加载出来。

这个网站是Angular Cli 1.x的,首先升级到了1.7.4,将后端一些无用的接口删除,同时解决了大部分兼容问题,删去过不用和过时的package。然而似乎效果不大:
微信截图_20200912180931.png

由于Angular目前大版本号已经是10了,而1.7.4还是3年前的4。经过几年发展,已经跟以前很不一样。于是准备更新一下到9(考虑到兼容性)。但是也许是高估了Angular的向前兼容性或者1000+ Package的向前兼容性。升级到Angular Cli 9以后,经过两天接近30小时的修正,仍然运行不起来。太多地方要修改。。。

9.21 更新

可以通过使用 webpack-bundle-analyzer来分析build之后的包大小以及内容:

  1. 安装,为了防止不在PATH中,全局安装:npm i -g webpack-bundle-analyzer
  2. 创建stats.json,在build时增加一个--stats-json参数:
    ng build --prod --stats-json
  3. 分析:webpack-bundle-analyzer dist/stats.json(假如发布的文件夹为dist

可以得到下图:
bundle-ana.png

开启Gzip压缩传输内容,提高加载速度

由于网站的scripts和css一共将近17MB,不压缩传输实在是太忙了。发现IIS的确没有压缩,因为果断开启:

  1. 安装动态压缩功能和静态压缩功能
  2. 在IIS中开启相关设置

然后增加了22分呢:
微信图片编辑_20200922133633.jpg

9.22更新

秋分,发现用到了Salesforce的quill,并且在Angular的angular-cli.json配置里面。文件中的scripts全部都会被打包放入scripts.bundle.js作为全局scrpts。但是实际上只有一个demo页面,Primeng的p-editor在使用,果断删除。ng build --prod之后,scripts.bundle.js的大小缩减为了2.83MB

未完待续。。

https://docs.npmjs.com/cli-commands/prune.html
https://docs.npmjs.com/cli/dedupe
https://www.npmjs.com/package/@angular/compiler-cli
https://docs.npmjs.com/cli/shrinkwrap

这里列出一些数据/观点,供大家参考:

  1. statista上面有一个Size of the public cloud platform as a service (PaaS) market worldwide from 2015 to 2022 (更新时间 by Arne Holst, May 4, 2020):
    微信截图_20200609231949.png
  2. businesswire上面Global Platform as a service (PaaS) Market Report 2020 - ResearchAndMarkets.com (December 04, 2019 09:53 AM Eastern Standard Time):

The global platform as a service (PaaS) market was valued at about $29.58 billion in 2018 and is expected to grow to $52.4 billion at a CAGR of 15.4% through 2022.

  1. Gartner的[Gartner Says Nearly 50 Percent of PaaS Offerings Are Now Cloud-Only]4:

The total PaaS market revenue is forecast to reach $20 billion in 2019, and to exceed $34 billion in 2022, according to the latest forecast from Gartner.

  1. Planet Market Reports的[Platform-as-a-service PaaS Market 2019 | Global Market Size, Share, Supply, Demand, Segments and Forecast 2024]5:

The global platform as a service market size will grow by USD 31.4 billion during 2024.

可以看到各方数据/观点相差非常大(1-2倍),如果折中,则2020年全球PaaS市场规模应该在200-400亿美元左右。

微信截图_20200606131522.png

引子

心血来潮想看看Nginx的access日志,然而拉下来之后,打开几十万行的文件,无从下手。于是想找一个日志分析工作,能够达成以下目的:

  • 网络流量:某个区间范围内的入站、出站流量
  • IP地址,最好可以Geolocaiton一下知道物理位置
  • 访问设备、浏览器等信息
  • 访问的路由信息,比如访问了那个URI等

搜索了一下,发现其实有非常多的运维工作能够满足需求,但是最简单的还是GoAccess的方案。

GoAccess

微信截图_20200606131350.png

官网:https://goaccess.io/

GoAccess is an open source real-time web log analyzer and interactive viewer that runs in a terminal in *nix systems or through your browser.

It provides fast and valuable HTTP statistics for system administrators that require a visual server report >on the fly.

简单来说GoAccess可以直接对Nginx等程序产生的日志进行分析,然后直接可视化。这个过程比使用诸如ELK方案来得简单快捷

GoAccess功能特征

GoAccess解析指定的Web日志文件并将数据输出到X终端。功能包括:

  • 完全实时,所有面板和指标定时在终端输出上每200 ms更新一次,在HTML输出上每秒更新一次。
  • 跟踪应用程序响应时间,如果您想跟踪减慢网站速度的网页,会非常有用。
  • 支持几乎所有Web日志格式, GoAccess允许任何自定义日志格式字符串。
  • 支持增量日志处理,GoAccess能够通过磁盘上的B + Tree数据库逐步处理日志,保持数据持久性。
  • 可定制配色方案,Tailor GoAccess以适合您自己的色彩品味/方案。
  • 支持大型数据集,GoAccess 为大型数据集提供磁盘B +树存储,无法将所有内容都安装在内存中。
  • Docker支持,能够从上游构建GoAccess的Docker镜像。

安装和配置

安装

安装GoAccess的话,官网有非常详细的教程,可以点击这里(download)查看详情,这里以Ubuntu 16.04/18.04为例:

不要使用Ubuntu官方源, 使用GoAccess官方源:

$ echo "deb http://deb.goaccess.io/ $(lsb_release -cs) main" | sudo tee -a /etc/apt/sources.list.d/goaccess.list
$ wget -O - https://deb.goaccess.io/gnugpg.key | sudo apt-key add -
$ sudo apt-get update
$ sudo apt-get install goaccess

配置

基本上不用配置,可以略去

简单使用和部署

在终端输出

定位到access.log所在文件夹,比如/var/log/nginx, 然后执行

# goaccess access.log -c

如果提示没有权限打开access.log文件,则需要使用sudo等命令提权

输出为静态报告

定位到access.log所在文件夹,比如/var/log/nginx, 然后执行

# goaccess access.log -o report.html --log-format=COMBINED

如果提示没有权限打开access.log文件,则需要使用sudo等命令提权

输出为动态报告

定位到access.log所在文件夹,比如/var/log/nginx, 然后执行

# goaccess access.log -o report.html --log-format=COMBINED

如果提示没有权限打开access.log文件,则需要使用sudo等命令提权

这样我们打开report.html即可以看到可视化的报告

多个日志文件的分析

Nginx一般会有多个日志文件,有得还gz压缩了,这时候需要使用:

$ sudo zcat -f access.log* | sudo goaccess -o /var/www/monitor/report.html --log-format=COMBINED --real-time-html

这种方式,将多个日志文件传入GoAccess

这样我们打开report.html即可以看到可视化的报告,我这里把html页面放在了web server上,可以直接通过web server访问

通过网络可以访问的实时日志记录

1. 配置Nginx

location /report.html {
    alias /var/www/html/report.html;
    # 下面三行是为了实现websocket
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

2. 使用Daemon模式启动GoAccess

# sudo zcat -f access.log* | sudo goaccess access.log* -o /var/www/html/report.html --real-time-html --time-format='%H:%M:%S' --date-format='%d/%b/%Y' --log-format=COMBINED --daemonize

我们加--daemonize参数是为了后台执行,执行这个的前提是有--real-time-html这个参数。如果我们是https的还需要添加--ssl-cert=crt文件目录 --ssl-key=key文件目录这两个参数才可以实现wss