heroyct (yang)

simple_form 如何根据不同的 url 使用不同的设置

heroyct — Wed, 22 Jun 2022 11:09:09 +0800

simple_form可以在 config/initializers 里面进行设置，对于所有画面都使用统一的界面没什么问题。

现在想根据不同的 URL 来使用不同的设置，看了下文档，button_class label_text default_wrapper 等属性好像只可以设置一个。

想知道能不能这样设置，因为面向用户和面向 admin 使用的是完全不同的界面。

URL /user/* 使用 user 专用的设置。
URL /admin/* 使用 admin 专用的设置。
URL /operator/* 使用 operator 专用的设置。

不知道有没有人遇到类似的问题。

大家怎么连接谷歌的？

heroyct — Fri, 31 Jan 2020 12:17:52 +0800

感觉百度不够用，想连谷歌，都用的 VPN？不知道有什么好的 VPN 推荐？

用了个 PronVPN，功能倒还行，但愣是没找到怎么付款。。

Ruby 3 啥时候来了

heroyct — Thu, 09 Jan 2020 14:44:03 +0800

3 大目标

Performance 快 3 倍？
Concurrency
Static Analysis

如何测试 Custom Validator

heroyct — Thu, 18 Jul 2019 14:55:03 +0800

Custom Validators

具体参考这里 Rails Guide

比如要验证电话号码，可以追加一个 tel_validator

# app/validators/tel_validator.rb

class TelValidator < ActiveModel::EachValidator
  def validate_each(record, attribute, value)
    record.errors.add(attribute, :tel) unless valid?(value)
  end

  def valid?(tel)
    # validate code
  end
end

如何测试 Custom Validator

1. 创建一个 dummy model

let(:model_class) do
  Struct.new(:tel) do
    include ActiveModel::Validations

    def self.name
      'model'
    end

    validates :tel, tel: true
  end
end

每次都写比较麻烦，可以放到 helper 里面

# spec/support/validator_test_helper.rb

module ValidatorHelper
  def generate_model_class(attr_name, validate_options)
    Struct.new(attr_name) do
      include ActiveModel::Validations

      def self.name
        'model'
      end

      validates attr_name, validate_options
    end
  end
end

RSpec.configure do |config|
  config.include ValidatorHelper, type: :validator
end

2. rspec

# spec/validators/tel_validator_rspec.rb

describe TelValidator, type: :validator do
  let(:model_class) { generate_model_class(:tel, tel: true) }

  it 'valid tel' do
    model = model_class.new '13811112222'
    expect(model.valid?).to eq true
  end
end

使用 GitHub Actions 自动删除 merged branch

heroyct — Wed, 10 Jul 2019 16:07:36 +0800

以前是 merge 了 branch 以后，自己删除，试着用 github 的新功能 github actions 进行自动化。

方法这里介绍的很详细

https://help.github.com/en/articles/creating-a-workflow-with-github-actions#creating-a-workflow-using-the-file-editor

这次添加下面的文件然后 push 到 github 就行了，完成以后 actions 页面可以进行查看。

文件内容

# .github/main.workflow

workflow "on pull request merge, delete the branch" {
  on = "pull_request"
  resolves = ["branch cleanup"]
}

action "branch cleanup" {
  uses = "jessfraz/branch-cleanup-action@master"
  secrets = ["GITHUB_TOKEN"]
}

然后 merge 一个 branch 以后，就会自动删除它。

不知道大家怎么玩的 github actions

使用 Capybara 进行自动化测试

heroyct — Mon, 01 Apr 2019 17:23:54 +0800

总结了一下如何使用 Capybara 进行 UI 自动化测试 (Feature Test)，欢迎指正，补充。

什么是 Capybara

一个进行 UI 测试的框架，可以让你将浏览器进行的手动测试自动化

open source
对应多个测试框架
- MiniTest RSpec Cucumber 等
可以使用多个 driver
- Selenium Webkit Poltergeist 等

开发环境

Rails + Rspec + Capybara + SeleniumDriver

Rails 5.1.6.2
rspec-rails 3.7.2
capybara 3.9.0
SeleniumDriver 3.141.59

安装和设置

1. 添加 Gem

# Gemfile

group :test do
  gem 'capybara'
  gem 'selenium-webdriver'
end

2. 添加 docker chrome

# docker-compose.yml

services:
  snode:
    image: selenium/standalone-chrome:3.141.59
    environment:
      NODE_MAX_INSTANCES: 10
      NODE_MAX_SESSION: 10
      GRID_MAX_SESSION: 10
    volumes:
      - /dev/shm:/dev/shm

不使用 docker 的可以使用chromedriver-helper这个 Gem

3. 设置 Capybara

# spec/support/capybara.rb

require 'capybara/rails'
require 'capybara/rspec'

Capybara.register_driver :selenium do |app|
  Capybara::Selenium::Driver.load_selenium
  client = Selenium::WebDriver::Remote::Http::Default.new
  # 设置成headless
  chrome_capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
    "chromeOptions": { args: %w(headless window-size=1400,1200) }
  )
  # 设置docker chrome的url
  options = { browser: :remote, url: 'http://snode:4444/wd/hub', http_client: client, desired_capabilities: chrome_capabilities }
  Capybara::Selenium::Driver.new(app, options)
end
Capybara.javascript_driver = :selenium
Capybara.app_host = 'http://app.com'
Capybara.server_host = 'app.com'

UI 测试

登陆页面测试

一个简单的登陆页面测试

# spec/features/sample_login.rb

feature 'SampleLogin', type: :feature, js: true do
  describe '登陆' do
    it '正确的ID和密码可以登陆' do
      visit 'login'

      fill_in 'id', with: 'your id'
      fill_in 'password', with: '123456789'
      click_on '登陆'

      expect(page).to have_content '登陆成功'
    end
  end
end

从这个列子可以看出 UI 测试基本都是以下几步

访问一个页面
查找元素
操作元素
判断元素是否存在，元素的属性是否符合预期

访问一个页面

visit root_path
visit new_user_path

然后就可以使用page来对当前页面进行各种操作

page 的具体内容可以参考这里 Capybara::Session

查找元素

find

最常用的查找方式，和 jquery 的查找比较类似

<div id="sample_id1" class="sample1"></div>
<div id="sample_id2" class="sample" style="display:none"></div>
<a href="/sample">sample</a>
<button name="button" type="submit" data-sample="test">保存/button>

# find by class
find('.sample1') 

# find by id
find('#sample_id1')

# find invisible element
find('#sample_id2', visible: false)

# find by text
find('a', text: 'sample')

# find by attr
find('button[data-sample="test"]')

all first

使用方法和 find 基本一样，只是对于多个类似的元素用 find 无法查找，比如多个相同的 class，这个时候可以使用 all 和 first

<div id="sample_id1" class="sample">第一</div>
<div id="sample_id2" class="sample">第二</div>

first('.sample') # 获取第一个div
all('.sample')[1] # 获取第二个div

具体可以参考这里 Capybara::Node::Finders

操作元素

click

<a href="path/sample" id="link" class="link_class">链接</a>

find('#link').click # 查找元素并click
# 简便写法
click_link 'link'
click_on '链接'
click_on class: 'link_class'

textarea,text

<input type="text" name="name" id="name"></input>

fill_in 'name', with: 'sample'

select

<select name="sex" id="sex">
  <option value="0">男性</option>
  <option value="1">女性</option>
</select>

page.select '男性', from: 'sex'

checkbox

<label >
<input type="checkbox" value="1" name="sex" id="sex">
  <span>男</span>
</label>

check('sex')
uncheck('sex')

radio

<label>
  <input type="radio" value="1" name="sex" id="sex_1">
  <span>男性</span>
</label>
<label>
  <input type="radio" value="2" name="sex" id="sex_2">
  <span>女性</span>
</label>

choose('sex_1') # 选择男性

上传文件

find('input[type="file"]').attach_file('spec/data/upload/sample.jpg')

其他的操作

方法	说明
double_click	双击
drag_to(elem)	拖动
hover	hover
right_click	右击
send_keys('text')	输入 text

具体参考这里 Capybara::Node::Element

判断

判断页面的 URL

expect(current_path).to eq new_user_path

判断页面的元素

expect(page).to have_content '登陆成功'
expect(page).to have_no_content('登陆失败')
expect(page).to have_field('email', with: 'test@sian.com', type: 'hidden')
expect(page).to have_selector 'h1', text: '测试页面'
expect(page).to have_css '.invalid-feedback'

不好判断的，可以查找元素，然后得到属性来判断

<input id='delete' type="submit" value="删除" data-confirm="确认删除吗?">

expect(find('#delete')['data-confirm']).to eq '确认删除吗?'

具体可以参考这里 Capybara::RSpecMatchers

测试中的一些技巧

within 限定操作在某一块画面

<div class="section1">
  喜欢运动吗？
  <label>
    <input id="sport1" name="sport" type="radio" value="1" checked="checked">是
  </label>
  <label>
    <input id="sport2" name="sport" type="radio" value="2">否
  </label>
</div>

<div class="section2">
  按时睡觉吗？
  <label>
    <input id="sleep1" name="sleep" type="radio" value="1" checked="checked">是
  </label>
  <label>
    <input id="sleep2" name="sleep" type="radio" value="2">否
  </label>
</div>

within '.section1' do
  choose '是'
end

within '.section2' do
  choose '否'
end

当然，如果查找太复杂的话，可以考虑给它一个 ID 或者 Class，让查找元素尽量简单

对新开的窗口进行测试

<a href="/rule" target="_blank">打开新窗口</a>

visit sample_path
click_on '打开新窗口'
within_window(windows.last) do
  expect(page).to have_content '新窗口'
end

execute_script

在页面直接执行 JS 代码，对于一些使用 capybara 难以模拟的操作可以使用

比如用 dropzone.js 来上传图片，用 capybara 没找到如何测试

这个时候可以执行 JS 来模拟图片的上传

def drop_in_dropzone(file_path)
  # Generate a fake input selector
  page.execute_script <<-JS
    fakeFileInput = $('<input/>').attr(
      {id: 'fakeFileInput', type:'file'}
    ).appendTo('body');
  JS
  # Attach the file to the fake input selector
  attach_file("fakeFileInput", file_path)
  # Add the file to a fileList array
  page.execute_script("var fileList = [fakeFileInput.get(0).files[0]]")
  # Trigger the fake drop event
  page.execute_script <<-JS
    var e = $.Event('drop', { dataTransfer : { files : [fakeFileInput.get(0).files[0]] } });
    $('.dropzone')[0].dropzone.listeners[0].events.drop(e);
  JS
end

个人感觉这是最后手段，尽量不使用，维护起来比较麻烦

少用 sleep

比如在用 ajax 进行异步操作的时候，必须等一段时间才可以继续测试，可以sleep 秒数来等待

缺点是 sleep 的秒数对于不同环境是不一样的，也许自己的机子可以跑，放到其他测试环境下就不行了

解决方法

默认的等待时间设置长一些，比如 30 秒

Capybara.default_max_wait_time = 30 # default 2s

使用 find，have_selector(默认等待时间是 default_max_wait_time)

# 还可以指定最大等待时间
find('#name', wait: 60)

不访问外部网络

比如你需要访问一个外部 API，可以用webmock gem来模拟

Net::HTTP.get('http://www.example.com', '/')

# 会出现这样的显示

WebMock::NetConnectNotAllowedError:
       Real HTTP connections are disabled.

       You can stub this request with the following snippet:

       stub_request(:get, "http://www.example.com/").
         with(
           headers: {
          'Accept'=>'*/*',
          'Accept-Encoding'=>'gzip;q=1.0,deflate;q=0.6,identity;q=0.3',
          'User-Agent'=>'Ruby'
           }).
         to_return(status: 200, body: "", headers: {})

方便的是提示的 stub_request 的代码很多时候可以直接使用

不要什么都用 feature 测试

不用 feature 测试就可以测试的就不用 UI 测试

比如分离功能出来进行单体测试、使用 controller 测试等

调试

写 feature 测试的时候，最麻烦的可能是不好查找问题

可以使用以下的方法让调试稍微轻松些

pry-byebug

gem 'pry-byebug'

最方便的 debug 工具，大家应该都熟悉，就不多说了

log

tail -f log/test.log

测试失败的时候自动截图

gem 'capybara-screenshot'

失败的时候，会自动将 html 和 png 的文件保存下来

HTML screenshot: /www/sample/tmp/capybara/screenshot_2019-03-30-17-55-11.103.html
Image screenshot: /www/sample/tmp/capybara/screenshot_2019-03-30-17-55-11.103.png

显示 JS 的 debug 信息

想知道 JS 是否被执行了，可以在 JS 里面console.log('message')

gem 'capybara-chromedriver-logger'

这样 JS 的 error 和 log 都会显示出来

显示浏览器画面

chrome headless 运行的时候，不好 debug，可以按照以下的方法显示浏览器

1. 添加 debug 用的 docker

# docker-compose-selenium-debug.yml

version: '3'

services:
  snode:
    image: selenium/standalone-chrome-debug:3.141.59
    ports:
      - 5900:5900

2. 连接 vnc

open vnc://localhost:5900

3. 执行

# 启动
$ docker-compose -f docker-compose.yml:docker-compose-selenium-debug.yml up -d

# 执行rspec
$ NO_HEADLESS=1 bundle exec rspec spec/features/xxxx.rb

这时候可以直接在 vnc 服务器上看到浏览器的画面

参考资料

RubyDoc - Capybara

用 Terraform 自动化构建基础设施

heroyct — Wed, 12 Dec 2018 16:43:06 +0800

目前为了更快的开发产品，现在很多项目都对基础设施进行了代码化 (Infrastructure as Code)。

现在的项目中使用 Terraform 对基础设施进行了代码化，分享下 Terraform 的使用。

为什么要让基础设施代码化

在使用 Terraform 之前，基本上是在 AWS 管理画面进行操作或者用 AWS CLI 写一些脚本来构建。

主要有以下一些问题

在 AWS 的管理画面上面操作，比较费时间
不容易管理每个人 AWS 的操作记录
对操作的审查比较麻烦，容易误操作
使用了哪些 AWS 的资源必须一个一个查看，不容易对整体进行把握

用 Terraform 可以比较好的解决以上问题，以下是用 Terraform 修改的流程

把需要修改的部分用 Terraform 代码写好，然后 Pull Request
相关人员进行代码审查 (Code Review)
没问题的话 merge，然后在 CI 自动执行

好处是修改流程类似 app 修改的流程，大家很容易上手。

操作时间短，所有的更改记录都进行了版本管理，容易对修改进行审查。

使用了什么资源，看代码一目了然。

什么是 Terraform

开发了 Vagrant 的hashicorp 公司开发的用代码来管理基础设施的一个工具，支持绝大多数的平台。查看支持的平台

我觉的最大的优点是学习成本低，非常简单。

只需要了解三个概念就完全可以进行开发了。

开发文档可以在这里查看，很多 sample，很多时候稍微修改一下就可以用

1. resource

对应于 aws 的 resouce

# 建立VPC
resource "aws_vpc" "app" {
  cidr_block                       = "10.1.0.0/16"
  assign_generated_ipv6_cidr_block = "true"

  tags {
    Name = "sample-vpc"
  }
}

# 建立ecs cluster
resource "aws_ecs_cluster" "foo" {
  name = "white-hart"
}

2. data

有时候需要从 AWS 中获取信息的时候可以使用 data

比如获取目前操作中的 AWS 账号信息

data "aws_caller_identity" "current" {}

3. 变量

# 定义变量
variable "region" {
  default = "sample-region"
}
variable "access_key" {}
variable "secret_key" {}

# 使用变量
provider "aws" {
    access_key = "${var.access_key}"
    secret_key = "${var.secret_key}"
    region = "${var.region}"
}

执行 Terraform

Terraform 会执行当前文件夹下面的所有.tf 文件

预执行，不会对 AWS 作出任何改动，可以确认下下有哪些改变

$ terraform plan

------------------------------------------------------------------------

An execution plan has been generated and is shown below.
Resource actions are indicated with the following symbols:
  + create

Terraform will perform the following actions:

  + module.shared_fluentd.aws_vpc.app
      id:                               <computed>
      arn:                              <computed>
      assign_generated_ipv6_cidr_block: "true"
      cidr_block:                       "10.1.0.0/16"
      tags.Name:                        "sample-vpc"

Plan: 1 to add， 0 to change， 0 to destroy.

实际执行，这里会再次输出有哪些改变，然后输入 yes 就会在 AWS 上面进行构建

$ terraform apply

一些技巧总结

1. 使用 module

比如要同时创建 sandbox 和 production 的 fluentd 服务器，基本都是一样的，只是一些参数不同。

这时候就可以使用 module 来归类类似的代码，然后传入变量来构建。

比如要同时创建 sandbox 和 production 的的 fluentd 服务器。

# 文件结构
terraform
├── modules
│   ├── fluentd
│   │   ├── main.tf
├── production_instance.tf
├── sandbox_instance.tf

# terraform/sandbox_instance.tf
module "sandbox_fluentd" {
  source                   = "./modules/fluentd"
  vpc_id                   = "your sandbox vpc id"
}

# terraform/production_instance.tf
module "production_fluentd" {
  source                   = "./modules/fluentd"
  vpc_id                   = "your production vpc id"
  # 其他的变量
}

这时候可以指定执行的对象来缩小执行范围。

terraform plan -target module.shared_fluentd
terraform plan -target module.production_fluentd

2. 按照 resource 分类文件

写在一个文件里面虽然也可以执行，但是内容多的时候，阅读起来不太容易，这个时候可以分成几个文件。

比如按照 aws resource，变量，data 来分类。

├── fluentd
│   ├── cloud_watch.tf
│   ├── data.tf
│   ├── ecs.tf
│   ├── security_group.tf
│   ├── task_role.tf
│   └── variable.tf

3. 使用 depends_on 来指定依赖

用的很少，基本不用指定，只有必须当某个操作依赖于另外一个操作时才用。

比如在使用 AWS Service Discovery 的时候，必须当 aws_service_discovery 构建以后，才可以获得被创建的 DNS，这个时候就可以使用 depends_on

data "aws_route53_zone" "fluentd" {
  name       = "${aws_service_discovery_public_dns_namespace.fluentd.name}"
  depends_on = ["aws_service_discovery_public_dns_namespace.fluentd"]
}

4. 从已有的环境生成 terraform 代码

官方没有提供这个功能，有人做了个 GEM，用了一下，AWS 基本都可以自动生成代码

terraforming

如果你已经构建好了环境，可以用这个来自动生成代码，避免打字手酸。

总结

简单介绍了 Terraform 的优点和基本使用方法。

我觉的它最大的优点是学习成本低，使用方便。

如果你想简单高效的构建你的基础设施，可以考虑使用 terraform。

用 Docker 构建开发环境

heroyct — Mon, 15 Oct 2018 18:33:18 +0800

最近用 docker 进行了开发环境的构建

本文主要介绍如何使用 docker 进行开发环境的构建

为什么要用 docker 构建开发环境

目前比较主流的方式应该是 vagrant 和 docker，对优缺点进行了比较

1. vagrant

优点

设置比较简单

缺点

比较耗费磁盘，内存等资源
首次启动 (provision) 的时间比较长
启动的时间比较慢

2. docker

优点

比较节省资源
首次启动 (build image) 比较快
- 目前项目 vagrant 要用几十分钟，docker 只用几分钟
启动非常快
- vagrant 要几分钟，用 docker 只要几秒钟

备注：消耗的时间是我目前项目的时间，每个项目有所不同

缺点

学习成本相对较高，尤其是 deploy 到生产环境的时候需要一定的学习成本

docker 相关术语

Image(镜像)
- 一个文件系统，里面包含了需要运行在 Container 的所有东西
Container(容器)
- 镜像的启动实例
Dockerfile(构建镜像的配置文件)
Compose(一个工具使构建多个容器变得更加容易)

具体说明可以在这里查看
https://docs.docker.com/v17.09/engine/userguide/storagedriver/imagesandcontainers/

本次构建的开发环境

centos7
ruby
rails
mysql

准备工作

准备一台 mac，windows 的话可以先用 virtualBox 开个虚拟机
准备一个 rails 程序
安装 docker for mac
安装 docker-compose

构建的步骤

最后的相关文件结构，下面逐步讲解每个文件的内容

dockerfile/
├── app
│   ├── Dockerfile
│   └── scripts
│       └── build.sh
└── mysql
    ├── Dockerfile
    └── conf
        └── my.cnf
├── build_all.sh
docker-compose.yml

1. web 服务器镜像设置

设置 dockerfile

# dockerfile/app/Dockerfile

# OS的镜像可以在这里查看 https://hub.docker.com/_/centos/
FROM centos:centos7

# set operator user env
# 追加一个普通用户book来进行bundle install
ENV LANG=en_US.UTF-8 OPERATOR_USER=book OPERATOR_GROUP=book
ENV OPERATOR_UID=500 OPERATOR_GID=500
ENV RUBY_VERSION=2.5.1

# 在这里进行安装ruby等详细设置
COPY scripts /tmp/scripts
RUN bash -x /tmp/scripts/build.sh

# 设置进入docker以后的默认目录
WORKDIR /www/ruby-book/

编写详细设置用的脚本

# dockerfile/app/scripts/build.sh

#!/bin/bash
# -e stop when error occurred
# -x show executed command
set -ex

# add book user, book group
groupadd -g ${OPERATOR_GID} ${OPERATOR_GROUP}
useradd --create-home -s /bin/bash -u ${OPERATOR_UID} -g ${OPERATOR_GID} ${OPERATOR_USER}

# add server folder use ruby user
mkdir -p /www/ruby-book
chown ${OPERATOR_UID}:${OPERATOR_GID} /www/ruby-book

# install package
yum update -y
# 不是全部都需要的，可以选择安装自己想要装的工具
yum install -y git make gcc bzip2 openssl-devel readline-devel zlib-devel curl-devel mysql-devel which tar wget sudo libmysqlclient-dev

# install rbenv ruby-build
git clone git://github.com/sstephenson/rbenv.git /usr/local/rbenv
git clone git://github.com/sstephenson/ruby-build.git /usr/local/rbenv/plugins/ruby-build

echo 'export RBENV_ROOT="/usr/local/rbenv"' >> /etc/profile.d/rbenv.sh
echo 'export PATH="$RBENV_ROOT/bin:$RBENV_ROOT/shims:$PATH"' >> /etc/profile.d/rbenv.sh
echo 'eval "$(rbenv init -)"' >> /etc/profile.d/rbenv.sh

# install ruby
source /etc/profile.d/rbenv.sh
rbenv install ${RUBY_VERSION}
rbenv rehash
rbenv global ${RUBY_VERSION}

# install bundler
gem install bundler

2. mysql 镜像设置

设置 dockerfile

# dockerfile/mysql/Dockerfile

FROM mysql:5.7.22

COPY conf/my.cnf /etc/mysql/conf.d/app.cnf

创建 mysql 设置文件

# dockerfile/mysql/conf/my.cnf

[client]
socket = /tmp/mysql.sock

[mysql]
default-character-set=utf8mb4

[mysqld]
explicit_defaults_for_timestamp = true
sql_mode = TRADITIONAL,NO_AUTO_VALUE_ON_ZERO,ONLY_FULL_GROUP_BY

character_set_server = utf8mb4
datadir = /var/lib/mysql

3. 编译镜像

使用 docker build 命令来进行 build 镜像文件
因为要 build 两个镜像所以写了个脚本来一次行进行 build

# dockerfile/build_all.sh

#!/bin/bash

set -ex
DIRNAME=$(dirname "$(pwd)/${0}")
RAILS_ROOT=${DIRNAME}/../
cd ${RAILS_ROOT}
cd dockerfile/

IMAGE_REPOSITORY=book/book
cd app
APP_IMAGE="7_20180531"
docker build --force-rm -t ${IMAGE_REPOSITORY}:app-centos-${APP_IMAGE} .

cd ../mysql
docker build --rm -t mysql:5.7.22 .

用上面的脚本编译所有的镜像

$ ./build_all.sh

用 docker images 来查看生成的镜像文件

$ docker images

REPOSITORY          TAG                     IMAGE ID            CREATED             SIZE
mysql               5.7.22                  1da5a40f1204        15 minutes ago      372MB
book/book           app-centos-7_20180531   6004010a3f19        16 minutes ago      614MB
centos              centos7                 75835a67d134        4 days ago          200MB

4. 设置 docker-compose

设置 docker-compose 来启动 docker container

# docker-compose.yml

version: '3'

services:
  app:
    environment:
      RAILS_DATABASE_HOST: db

    image: book/book:app-centos-7_20180531
    volumes:
      - ./:/www/ruby-book:cached
      - app-bundle:/www/ruby-book/vendor/bundle
      - app-tmp:/www/ruby-book/tmp

    ports:
      - 3000:3000
    tty: true

  db:
    image: mysql:5.7.22
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: 1
    volumes:
      - db-data:/var/lib/mysql
      - db-log:/var/log/mysql
      - ./dockerfile/mysql/conf/my.cnf:/etc/mysql/conf.d/app.cnf
    ports:
      - 3306:3306

volumes:
  app-bundle:
  app-tmp:
  db-data:
  db-log:

镜像重新 build 以后还希望保留的文件都可以设置成 volumes、这样镜像重新 build 以后也会保留下来

可以使用 volume 命令来查看和删除

$ docker volume ls
$ docker volume rm {volume name}

5. how to use

# build all images
$ cd dockerfile/
$ ./build_all.sh

# create container run backgroud
$ docker-compose -f docker-compose.yml up -d

# 进入web服务器
$ docker-compose exec --user book app bash  # book用户
$ docker-compose exec app bash # root用户

# bundle install , create db
$ bundle install --path vendor/bundle
$ bundle exec rake db:create
$ bundle exec rake db:migrate

测试

访问以下页面呈现欢迎界面就说明完成了

http://localhost:3000/

参考文章

修改 Ruby 核心类和模块的方法

heroyct — Mon, 08 Oct 2018 18:54:03 +0800

ruby 的类和模块是开放的，这是 ruby 的重要特征之一

ruby 核心类的扩展是非常容易的
总结了一下修改 ruby 核心类的一些常用方法以及可能面临的风险

1. 追加一个新功能

最常见的方法就是添加一个新的不存在的方法

好处是不会和其他函数冲突，坏处是你无法判断是否会和 ruby 的下一本版本的同名函数冲突

比较经典的有 active support 对 ruby 核心类的扩展

比如这个函数返回单词的复数形式

 # https://github.com/rails/rails/blob/master/activesupport/lib/active_support/core_ext/string/inflections.rb#L33
class String
 def pluralize(count = nil, locale = :en)
    locale = count if count.is_a?(Symbol)
    if count == 1
      dup
    else
      ActiveSupport::Inflector.pluralize(self, locale)
    end
  end
end

2. 保持已有函数的接口，只是添加一些新的行为

比如添加日志，调试信息等等

下面演示了在 ruby 的方法中添加一个输出

class String
  alias _ruby_chars chars

  def chars
    puts 'char method done'
    _ruby_chars
  end
end
'test'.chars
# 输出
=> char method done

感觉这种相对安全，但是实际中用的不太多

3. 扩展已有的函数

比如 ActiveSupport 对 Time 的 to_s 方法的扩展
通过传递不同的参数来进行扩展

# 一部分源代码
# https://github.com/rails/rails/blob/master/activesupport/lib/active_support/core_ext/time/conversions.rb#L6
DATE_FORMATS = {
  db: "%Y-%m-%d %H:%M:%S",
  number: "%Y%m%d%H%M%S",
}

def to_formatted_s(format = :default)
  if formatter = DATE_FORMATS[format]
    formatter.respond_to?(:call) ? formatter.call(self).to_s : strftime(formatter)
  else
    to_default_s
  end
end
alias_method :to_default_s, :to_s
alias_method :to_s, :to_formatted_s

# 得到扩展后的结果
Time.now.to_s(:db)
=> "2018-09-29 12:47:10"

## 得到ruby默认的结果
Time.now.to_s
=> "2018-09-29 12:47:36 +0000"

这种扩展也是有风险的，你无法知道 ruby 的下个版本是否也有相同的扩展导致其中一个被覆盖

4. 扩展独立的对象

这可以说是比较安全的扩展的方法，影响的范围也要小很多

比如要添加一个移除空格的方法到 string 对象，注意不是扩展到 String 类
可以通过 extend 方法来实现

module StringExtension
  def remove_space
    gsub(' ', '').gsub('　', '')
  end
end

str = 'hello world'
str.extend(StringExtension)
str.remove_space
=> "helloworld"

有时候我们需要覆盖 Gem 已经存在的方法，也可以使用这个方法来不破坏 Gem 并且实现我们的目的

如果你使用 devise 的话，在重设密码之后会默认发送邮件
可以对 user 对象覆盖它默认的方法，进行单独处理

def user.send_reset_password_instructions_notification(token)
  # do something
end

扩展核心类最大的风险在于影响范围非常大
如果我们可以减小范围那么风险就小了很多
ruby2.1 开始提供了 refinement 来解决这个问题

module StringExtension
  refine String do
    def remove_space
      gsub(' ', '').gsub('　', '')
    end
  end
end

# 直接使用的话会出现一个error
'hello world'.remove_space
=> NoMethodError: undefined method `remove_space' for "hello world":String

# 使用using在指定的类里面使用
class Sample
  using StringExtension
  'hello world'.remove_space
end
=> "helloworld"

总结

总结了修改 rubu core 的一些方法和其中的风险

比较经典的要数 Active Support 对 ruby 的扩展，可以看到很多例子
https://github.com/rails/rails/tree/master/activesupport/lib/active_support/core_ext

Active Support 因为非常有名，所以在一定程度上降低了风险
在自己项目里面进行修改的话应该慎重考虑风险以后在进行

参考文章

cell gem 默认不进行 html escape 问题

heroyct — Mon, 01 Oct 2018 19:05:17 +0800

现在的项目使用了 cell 这个 gem
https://github.com/trailblazer/cells

4.0 以前

在 4.0 以前的时候使用的是 rails 的 render，默认会进行 html escape

比如下面的代码是没有问题的

@text = '<script>alert("hello")</script>'
<%= @text %>

4.0 以后

目前打算升级到 4.0

但是 4.0 以后，cell 采用了其他的 render 方法，默认不进行 html escape, 必须像下面这样传递 escape 过后的值

@text = '<script>alert("hello")</script>'
<%= h @text %>

http://trailblazer.to/gems/cells/cells4.html

Cells per default does not escape HTML. However, you may run into problems when using Rails helpers. Internally, those helpers often blindly escape. This is not Cells’ fault but a design flaw in Rails. Everything related to #capture will cause problems - check this as an example. As you can see, this is Rails swinging the escape hammer. Please don’t blame us for escapes where they shouldn’t be. Rather open an issue on Rails and tell them to make their code better overrideable for us.

但是每个字段自己写代码 escape 感觉很麻烦，而且万一忘记了，会出现安全问题

问题

目前把需要 escape 的都加了 html_escape 方法暂时对应了 (估计有漏的地方)

没找到其他的好的方法，有遇到相同的问题的吗？

写 Responsive 页面的总结

heroyct — Sun, 30 Sep 2018 12:37:42 +0800

最近用 responsive web design 对目前的网站一部分页面进行了重写
总结了下对应 responsive web design 中遇到的问题和解决方法

什么是 responsive 页面

百度百科是这么定义的

响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局

我的理解是不管你是什么设备，我只管你的画面大小，根据你的画面给你最合适的显示

multi-device support

现在的各种设备越来越多，你不得不对各个设备进行显示优化

比如常见的有 pc、tablet、mobile，将来估计会不断增加

尤其是手机 (mobile)，现在手机访问网站越来越成为主流，让开发人员不得不优化手机页面

具体实现的技术有很多，大概总结了一下

1. 做一个手机专用的网站 (URL 分开)

比如像这样

PC http://xxxx.com/
mobile http://xxxx.com/sp/

优点

可以完全独立进行开发、管理
可以设计成为完全不同的风格

缺点

相同的内容必须两边都要更新
URL 不同，不利于 SEO

2. 做一个手机专用的网站 (URL 一样)

根据终端的 user agent 来判断类型
然后返回不同的 HTML 文件

优点

可以设计成为完全不同的风格
同一个 URL，对 SEO 比较有利

缺点

对于相同的内容，必须更新多个 HTML 文件 (Rails 里面的 view)
出现新的设备或者设备增加以后，需要更新设备的判定

3. responsive web design

优点

同一个 URL，对 SEO 比较有利
HTML 是同一个文件，更新起来比较方便
google 推荐的实现方式

缺点

因为 CSS 会包含其他终端用的内容，有可能让 CSS 变大导致读取时间变长
前端开发可能刚开始不太适应，会降低开发效率
PC、mobile 的 UI 在设计的时候不能差异太大

为什么用 responsive web design

目前的项目用的是第二种办法，对 user agent 进行判断，然后返回不同的 HTML 文件

pc 的时候 render index.html.erb
sp 的时候 render index_sp.html.erb
tablet 的时候 render index_tablet.html.erb

维护一段时间以后发现一些不方便的地方

PC,mobile,tablet 的 view 文件基本差不多
JS,CSS 也有很多重复的内容

由于各个页面的 pc、tablet、mobile 的内容是基本相同的
所以采用了 responsive web design 来实现

开发的大体流程

决定断点

决定最基本的断点
这个可以根据你的网站访问的设备的大小来进行判定，每个网站应该会有些不同
比如我是这样定义的

320px ～ 480px mobile
481px ～ 768px tablet
768px ～ 900px pc small
900px ～ pc wide(1280px 以上的话固定为 1280px)

参考网站

CSS 设计

目前采用的是 ITCSS + BEM，具体可以参见 CSS 设计之 ITCSS 这篇文章

因为网站的 mobile 访问量非常多
所以先写 mobile 用的 CSS，然后在用 media-query 覆盖 mobile 的设定来写 tablet、PC

1. 添加一个 media-query 的 mixin

@mixin max-screen($break-point) {
  @media screen and (max-width: $break-point) {
    @content;
  }
}

@mixin min-screen($break-point) {
  @media screen and (min-width: $break-point) {
    @content;
  }
}

@mixin screen($break-point-min, $break-point-max) {
  @media screen and (min-width: $break-point-min) and (max-width: $break-point-max) {
    @content;
  }
}

2. 定义断点

$breakpoint-pc-min: 900px;

$breakpoint-pc-small-max: 899px;
$breakpoint-pc-small-min: 769px;

$breakpoint-tablet-max: 768px;
$breakpoint-tablet-min: 481px;

$breakpoint-sp: 480px;

3. 像下面这样先写 mobile 的，然后在分段写 (当然不一定都要用到)

/* 320px ~ 480px */
.container {
}

/* 481px ~ 768px */
@include min-screen($breakpoint-tablet-min) {
  .container {
  }
}

/* 769px ~ 899px */
@include min-screen($breakpoint-pc-small-min) {
  .container {
  }
}

/* 900px ~  */
@include min-screen($breakpoint-pc-min) {
  .container {
  }
}

遇到的问题

需要大脑里模拟画面变大变小以后的画面

我觉的这是刚开始写的时候最困难的地方

设计人员一个页面准备各个断点的画面
先写 320px ~ 480px 的 CSS，然后 tablet、PC 分段来写对应的 CSS
练习，练习，再练习我写了一个多月才基本适应这种思考方式

组件的微调

在 ITCSS 中，用 Components 来进行组件的重用
但是在 responsive web design 里面，同一个组件在每个页面大小，边距等也许会有所不同

解决方法

共用的控件不写 media query
加入了 page layout, 里面放每个页面专有的 CSS，在里面用 media query 进行具体的调整

大概是这样

@import "./components/parts/*";
@import "./components/projects/*";
@import "./pages/page1/*";
@import "./pages/page2/*";
@import "./pages/page3/*";

components/parts 放 button，link 等通用的组件
components/projects 放 book_card, author_card 等项目专用的组件
pages 用来放每个页面专用的 CSS，用 media query 进行微调

相同的 HTML 对样式变化太大的地方 CSS 实现困难

比如 menu 做成这个网站这样

http://3.7designs.co/blog/2007/12/advanced-css-menu-trick/

pc 的时候

mobile 的时候

解决方法

没找到太好的解决办法
目前在 HTML 里面写了两个 menu 的 html，在用 media-query 来控制显示和隐藏
- pc 的时候显示 pc 用的 html，mobile 的时候显示 mobile 用的 html

responsive web design 对于差别太大的 UI 实现起来不容易
所以 UI 设计会尽可能的不要太大的差别
如果你的项目 PC 和 mobile 的 UI 差别很大的话，不建议使用 responsive design

总结

总结了 responsive web design 的优缺点和开发中的一些问题
有好的意见请回复我

CSS 设计之 ITCSS

heroyct — Wed, 05 Sep 2018 09:51:25 +0800

ITCSS 简介

CSS 设计有很多方法论，比如比较常见的OOCSS，BEM，SMACSS等等

目前的项目中使用了 ITCSS + BEM，感觉不错，这里做一下介绍

ITCSS，这是由csswizardry提倡的一个 CSS 设计方法论，他可以让你更好的管理、维护你的项目的 CSS

ITCSS 的相关资料

youtube
PPT

对于如何管理好项目的 CSS，ITCSS 认为需要做到以下几点

A sane environment that is accessible to lots of people.

To tame and manage source order and the cascade.

To create a place for everything to live (new and old).

To reduce waste and redundancy.

To end the Specificity Wars.

https://speakerdeck.com/dafed/managing-css-projects-with-itcss

具体采用以下的解决办法

Manages source order.

Filters explicitness.

Tames the cascade.

Sanitises inheritance.

https://speakerdeck.com/dafed/managing-css-projects-with-itcss

大概意思是使用 ITCSS 可以帮助你

管理 CSS 代码的书写顺序
过滤明确性？估计是说分层来明确每层 CSS 的作用
驯服 CSS cascade(权重)
安全的使用继承

layers

ITCSS 把 CSS 分成了以下的几层

Layer	作用
Settings	项目使用的全局变量
Tools	mixin，function
Generic	最基本的设定 normalize.css，reset
Base	type selector
Objects	不经过装饰 (Cosmetic-free) 的设计模式
Components	UI 组件
Trumps	helper 唯一可以使用 important! 的地方

可以看出这是一个倒三角形

越往下就越具体，越局限于使用在某个具体的画面

layer 的增减

这些 layer 你不需要都使用，根据你项目的情况可以对 layer 进行增减

比如你想像 OOCSS 一样的话，可以删除掉 Objects layer
想向 SMACSS 那样添加一个 Themes 的话，可以在 Components layer 下面追加一个 Themes layer

github 有非常多的 ITCSS 的项目，有兴趣的朋友可以研究下

ITCSS github

下面介绍下每个 layer 的具体内容

sample code 用的是 sass，命名用的是BEM

Settings

全局变量，比如颜色，字体大小等等

$yellow: #FAAF00;
$yellow-bright: #FAF7F0;

Tools

mixin，function 等等

@mixin sample-mixin () {
  ...
}

到 Tools 为止，不会生成具体的 css

Generic

reset，normalize 等等

*,
*::before,
*::after {
  box-sizing: border-box;
}

Base

type selector 比如 link, p 等等，只有这一层才使用 type selector

p {
  margin: 0
  line-height: 1.5;
}

Objects

Cosmetic-free，不使用比如 color、border-color、background-color 之类的
使用这个 CSS 你在浏览器上面只可以看一片空白

主要用来做画面的 layout

.o-container {
  box-sizing: border-box;
  margin: 0 auto;
}

Components

UI 组件

到这个部分，可以和搞设计的商量下具体有哪些组件需要实现，可以分给多个人来同时实现

# button组件

.c-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  ...

  &--primary {
    background-color: #ff5959;
    color: #fff;
  }

  &--large {
    font-size: 16px;
    padding: 16px 14px;
    ...
  }
}

HTML 类似这样

<a class="c-btn c-btn--primary" href="#">sample</a>
<a class="c-btn c-btn--primary c-btn--large" href="#">sample</a>

细化组件

在实际开发中，由于是用的 responsive web design
所以加了一层来放每个页面专用的部分
因为每个 component 在不同的页面需要不同的 media-query 来进行具体调整

文件结构

├── components
│   ├── _button.scss
│   ├── _grid.scss
├── pages
│   └── _top.scss
│   └── _guide.scss

Trumps

放各种 helper
最主要的作用是用在不适合或者不容易放在 Component 的时候
比如 margin，很可能不应该放 Component，这时候可以用 Trumps 来微调
这样可以防止你的 Component 变得非常大

只有这一层才可以使用!important，以此来避免多个!important 的混乱局面

.u-color {
  &--white {
    color: $white !important;
  }
}

.u-hidden {
  display: hidden !important;
}

文件结构

目前发现两种文件结构

1. 每个 layer 一个文件夹

https://github.com/ahmadajmi/itcss

2. 名字的前缀用 layer 的名字

https://github.com/itcss/itcss-netmag/tree/master/css

目前采用的是第二种，感觉 CSS 多了以后相对容易管理

参考资料

总结了下 routes 的使用

heroyct — Thu, 30 Aug 2018 11:40:54 +0800

总结了一下目前开发中写 routes 的时候遇到的各种情况以及如何解决的

routes 简介

什么是 routes

简单来说就是把 HTTP Request 匹配到对应的 action(定义在 controller 里)

如何定义

在 config/routes.rb 里面定义，类似于这样

Rails.application.routes.draw do 
  resource :books, only: [:index, :show]
end

如何查看已经定义好的 routes

启动了 rails server 以后，通过 URL 查看
- http://localhost:3000/rails/info/routes
用命令行查看

$ bundle exec rake routes

根据 subdomain 来分配路由

比如网站管理画面希望用 http://admin.your-site/ 来访问

constraints subdomain: 'admin' do
  scope module: 'admin' do
    resources :books
  end
end

这样只有 subdomain 是 admin 的时候才会匹配 admin 下面对应的路由

根据 domain 来分配路由

1. 定义 domain 的匹配

#lib/constraints/domain_constraint.rb

class Constraints::DomainConstraint

  def initialize(domain)
    @domain = [domain].flatten
  end

  def matches?(request)
    @domain.include? request.domain
  end
end

2. 在 config/routes.rb 里面定义对应的 routes

# config/routes.rb:

constraints DomainConstraint.new('app1') do
  resources :app1
end

constraints DomainConstraint.new('app2') do
  resources :app2
end

redirect

get '/test', to: redirect('/to_url')

注意 routes 里面定义的 redirect 的 http status 是 301，而 controller 里面的 direct 是 302
因为对 SEO 有一定影响，如果是永久性的转移建议定义在 routes 或者 nginx 之类的 web 服务器上面

用 routes 定义好的名字

= link_to 'book', books_path
= link_to 'book', controller: "books", action: "index"

用 bechmark 来测试的话，或发现第一种写法要快上一倍
尽量使用定义好的 url_path，也可以用 as 来自己定义名字

get '/books' => 'books#index', as: 'books'

对 url 的参数进行限制

比如 id 只想要整数，可以这样进行限制

get 'books/:id', constraints: { id: /[1-9][0-9]*/ }

只匹配限定的参数

get 'books/:type', constraints: { type: Regexp.union(['type1','type2','type3']) }

限制用户的权限

使用 devise 的话，可以像下面这样限制 admin 权限的用户才可以访问 sidekiq 管理画面

authenticate :operator, lambda { |o| o.admin? } do
  mount Sidekiq::Web => '/sidekiq'
end

将 routes 分割为多个文件

当 routes.rb 太大的时候，我们可能会想要分离为多个文件来方便管理

1. config/routes里面进行如下定义

# config/routes.rb:

Rails.application.routes.draw do
  def draw(routes_name)
    instance_eval(File.read(Rails.root.join("config/routes/#{routes_name}.rb")))
  end

  draw :user

  constraints subdomain: 'admin' do
    draw :admin
  end

  match '*path', to: 'application#render_404', via: :all
end

2. 在 config/routes/ 文件夹下面添加 routes 定义文件

文件结构

config/routes/
├── admin.rb
└── user.rb

对应的文件

# config/routes/user.rb
resources :books

# config/routes/admin.rb

resources :authors

使用 docker-sync 让 mac 和 docker 之间的文件同步变快

heroyct — Mon, 06 Aug 2018 18:55:15 +0800

最近，在 mac 上面安装了 docker，然后让开发环境运行在 docker 上面

总的来说感觉不错
但是同一个页面，在 linux 上面的时候需要 4 秒，在 mac for docker 上面需要 25 秒

调查了一下原因

https://forums.docker.com/t/file-access-in-mounted-volumes-extremely-slow-cpu-bound/8076/158
大概是说 docker 采用的 osxfs 导致文件的读取比较慢

osxfs 的介绍，有兴趣的可以研究下
https://docs.docker.com/docker-for-mac/osxfs/#performance-issues-solutions-and-roadmap

搜索了一下解决办法

1. vagrant -> virtualbox -> linux -> docker

试了下用 vagrant 安装 linux，然后 docker 跑在 linux 上面，用 nfs 来同步
速度确实变快了，但是多安装了一层总感觉有点麻烦
所以调查了一下其他的解决办法

2. docker-sync

在 docker-for-mac 的网站和 github 的 issue 里面有介绍

试了下感觉不错，总结下如何使用的

1. 在 mac 上面安装 docker-sync

$ gem install docker-sync
$ brew install fswatch
$ brew install unison
$ brew install eugenmayer/dockersync/unox
$ docker-sync start

2. 添加 docker-sync.yml 文件

version: '2'

syncs:
  sync-folder:
    src: '.'
    sync_strategy: 'unison'
    # 同步时的用户ID，不指定的话为root
    sync_userid: '1000'
    sync_excludes: ['vendor/bundle/'， 'node_modules'， 'tmp']

具体设置可以看这里

https://github.com/EugenMayer/docker-sync/wiki/2.-Configuration

3. 添加 docker-compose-dev.yml 文件

version: '3'

volumes:
  sync-folder:
    external: true

services:
  app:
    volumes:
      - sync-folder:/www/sample_project

把 mac 的当前文件夹和 docker 服务器里面的/www/sample_project 进行同步

4. docker-compose up

$ docker-compose -f docker-compose.yml -f docker-compose-dev.yml up -d

然后无论在 mac 还是在 docker 里面进行文件修改，都会自动进行同步
有时候不知道什么原因无法同步的时候可以重启 docker-sync

$ docker-sync clean
$ docker-sync start

总结

mac for docker 的文件同步很慢，目前发现两种解决方法

vagrant -> virtualbox -> linux -> docker
docker-sync

个人比较喜欢第二种，有更好的解决办法请回复我

在 Rails 中使用 HTTP 缓存

heroyct — Sun, 03 Jun 2018 21:46:37 +0800

为了改善页面的响应速度，在 rails 里面使用了 HTTP 缓存，做下总结

什么是 HTTP 缓存

这里讲的很清楚了，就不多说了
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching_FAQ

rails 的 HTTP 缓存

默认缓存是开启的

随便打开一个页面，在 chrome 的 Network 里面查看 request 和 response，可以看到下面的内容

response header

Cache-Control: max-age=0, private, must-revalidate
ETag: W/"25200a77a0ae51ac9511df4ac1e9a0d5"

request header

If-None-Match: W/"64a30229a112c1819d754ef8a7ad8876"

大概意思是，进行 (私有) 浏览器缓存，每次都会验证请求的状态
比较他们的 etag 的值，如果是一样的就返回 304

手动指定 Cache 的时间

可以看到默认的 max-age 是 0，我们可以手动指定这个时间

expires_in 1.hour

在 chrome 里面确认，这个时候要注意的是你如果直接更新页面的话无法确认结果

新打开一个 tab, 在 URL 栏里面点击 enter 进入才可以确认

这种比较适合静态页面或者是一段时间不更新也没有任何问题的页面

如何强制更新

比如上面设置了 1 个小时的更新，但是你想立刻更新页面的时候
可以在 URL 后面加上时期之类的来更新，比如？20180810120000

etag 是如何生成的

headers['ETag'] = Digest::MD5.hexdigest(body)

可以看出是根据每次返回的 response body 来生成的，如果你每次返回的 body 都一样，ETAG 也会一样

API

一个 API 返回 json 的时候，如果每次返回的值都一样，就会返回 304

HTML 页面

默认启用了 csrf, csrf-token 的值每次都会变化，所以基本都是 200

自定义 ETAG

每次都从 response body 来生成 ETAG，明显不是一个高效的方法
因为还是必须去 render html，生成 response body，
虽然可以减少传送的内容，但是服务器端的 response time 没有太大改善

实际应用中，我们很可能需要的是某个或者多个数据未改变，不用去 render html，直接返回 304
这个时候就可以使用 fresh_when

fresh_when

比如有个 book mode，我们希望 book 没有更新对话就返回 304，可以在 controller 里面这样写

def index
  fresh_when last_modified: @book.updated_at.utc, etag: @book
  fresh_when @book
end

这样的话 book 没有更新的话，就会返回 304

多个变量生成 ETAG

def index
  fresh_when [@book, current_user.try(:id)]
end

OR

class TopController < ApplicationController
  etag { current_user.try(:id) }
  fresh_when @book
end

book 没有更新并且是相同用户的话，才会返回 304

从 model 如何生成 etag

headers[‘Etag’] = Digest::MD5.hexdigest(@book.cache_key)

model 的 cache_key 类似这样books/13-20180517145513000000000

<model name>/<id>-<updated_at>

从自定义的类如何生成 etag

def etag=(etag)
  key = ActiveSupport::Cache.expand_cache_key(etag)
  @etag = self[ETAG] = %("#{Digest::MD5.hexdigest(key)}")
end

def retrieve_cache_key(key)
  case
  when key.respond_to?(:cache_key) then key.cache_key
  when key.is_a?(Array)            then key.map { |element| retrieve_cache_key(element) }.to_param
  when key.respond_to?(:to_a)      then retrieve_cache_key(key.to_a)
  else                                  key.to_param
  end.to_s
end

可以看出最简单的实现自定义类的 etag 生成的方法就是实现 cache_key 方法
比如你有一个类来管理看过的书，看过的书有增加了就生成新的 etag

class BookHistory
  def cache_key
    # return read book ids
  end
end

禁止缓存

有时候我们需要禁止缓存，可以这样

def index
  expires_now
end

禁止缓存的情况感觉不多，感觉一般没必要用
我在 React(flux + immutable js) 的项目中，API 如果返回 304 的话
在 safari 里面有时候会取不到返回值，暂时采取了 safari 的话就禁止缓存

使用 fresh_when 需要注意的地方

影响页面变动的变量比较少的时候，我会采用 fresh_when
但是影响页面变动的变量多的话，用 fresh_when 会有一些问题

维护困难，必须搞清楚这个页面的所有变量，把他们都传到 fresh_when 里面去
- 比如你可能在页面里面你使用了 book.author.name 来显示相关书的作者
- book 的 author 变化了你需要更新页面，但你可能忘了把 author 也传给 fresh_when
上线后不容易发现问题，因为你看到没问题，某个用户可能看到的画面就有可能有问题

不知道大家使用时有没有什么好的方法来解决这些问题

总结

使用 HTTP 缓存可以很好的提高服务器的响应速度
如果是在 RestAPI 中，因为返回的内容基本是某个 model 的内容，比较推荐使用
在一般的 html 页面中，影响页面的变量少的时候可以使用 fresh_when，变量多的时候慎重使用

参考文章

如何使用 Sidekiq 进行异步处理

heroyct — Mon, 14 May 2018 19:03:55 +0800

什么是 sidekiq

提供了异步处理功能的gem
这里简单了归纳了一下如何在 rails 的项目里面使用 sidekiq

准备工作

异步处理的数据放在 redis 里面，所以需要安装 redis
如果用的是 mac 的话，可以用brew install redis安装

添加 Gem

在 Gemfile 里面添加，然后bundle install --path vender/bundle进行安装

gem 'sidekiq'

设置

创建一个文件 config/initializers/sidekiq.rb

require 'sidekiq/web'

Sidekiq.configure_server do |config|
  config.redis = { url: "#{Settings.redis.url}/#{Settings.redis.sidekiq_db}", namespace: Settings.redis.sidekiq_namespace }
  config.server_middleware do |chain|
    chain.add Sidekiq::Middleware::Server::RetryJobs, max_retries: 4
  end
end
Sidekiq.configure_client do |config|
  config.redis = { url: "#{Settings.redis.url}/#{Settings.redis.sidekiq_db}", namespace: Settings.redis.sidekiq_namespace }
end

开发环境和实际的服务器环境的 redis 的设置不同，所以放在 settings 里面

redis:
  url: <%= ENV['REDIS_URL'] || 'redis://127.0.0.1:6379' %>
  db: '0'
  sidekiq_db: '1'
  sidekiq_namespace: sidekiq<%= ENV['RAILS_ENV'] %>

发送邮件

在 application.rb 里面添加以下代码

config.active_job.queue_adapter       = :sidekiq

然后发送邮件的时候使用 deliver_later 就可以异步发送

UserMailer.send_mail(User.find(1)).deliver_later

Worker

进行异步处理的 worker 类都放在 app/workers 文件夹下面

比如要对用户数据进行排名 app/workers/use_ranking_worker.rb

class UserRankingWorker
  include Sidekiq::Worker
  sidekiq_options queue: :event, retry: 3

  def perform(user_id)
    user = User.find_by(user_id)
    return if user.blank?
    ## do something
  end
end

把人物加入 Queue(队列)

使用 perform_async 方法来加入队列

class UserService
  def ranking(user)
    UserRankingWorker.perform_async user.id
  end
end

也可以使用 perform_in 在指定时间后执行

class UserService
  def ranking(user)
    UserRankingWorker.perform_in 1.hour, @event.id
  end
end

sidekiq 起動

设置

config/sidekiq.yml

# thread数
:concurrency: 35
:pidfile: ./tmp/pids/sidekiq.pid
:logfile: ./log/sidekiq.log
:daemon: true
# 对需要立刻处理的任务指定优先级
:queues:
  - [mailers, 100]
  - [events, 1]

启动 sidekiq

bundle exec sidekiq -C config/sidekiq.yml -d

发布

需要注意的是，新的代码更新后，sidekiq 必须重新启动才可以
现在的项目用的是 capistrano 来进行发布，添加capistrano-sidekiq这个 GEM 后，在 config/deploy.rb 添加一下代码后，可以在每次发布后重新启动 config/deploy.rb

set :sidekiq_role, :worker
set :sidekiq_config, "#{current_path}/config/sidekiq.yml"
SSHKit.config.command_map[:sidekiq] = 'bundle exec sidekiq'
SSHKit.config.command_map[:sidekiqctl] = "bundle exec sidekiqctl"

为了不影响 web 服务器，所以新建了一个 worker 服务器，专门用来运行 sidekiq，可以根据实际情况进行调整

管理画面

sidekiq 自带了一个管理画面，按照下面的方法可以很容易的添加
可以看到正在进行的任务，失败的任务，成功的任务
失败的任务还可以选择以后从画面上重启

添加 Gem

gem 'sinatra', require: false

在 routes.rb 追加 routing config/routes.rb

require 'sidekiq/web'

MyApp::Application.routes.draw do
  authenticate :operator, lambda { |o| o.developer? } do
    mount Sidekiq::Web => '/sidekiq'
  end
end

因为这个画面不能让任何人都看到，所以设置成在管理画面里面并且是开发人员才可以看到然后/sidekiq 就可以看到了

总结

在提高服务器的应答速度的时候，可以进行异步处理的部分都可以用 sidekiq 来处理，这样可以有效提高服务器应答速度
发送邮件之类的，由于网络原因或者邮件服务器原因一时无法发送的时候可以重新执行任务，非常简单实用

如何用 Rails 开发一个页面

heroyct — Mon, 08 Jan 2018 17:02:03 +0800

前言

分享下开发一个页面的基本流程，有不足等地方请指正

开发环境，代码

开发环境：mac
浏览器：chrome
为了方便分享，以电商网站为列进行说明
- https://github.com/heroyct/yang-shop (开发中)

rails 开发一个页面的基本流程

rails 框架也是一个 mvc 框架，下面是从浏览器接到一个请求后，服务器端最基本的处理流程

根据这个流程对每个处理进行解说，有不足的地方请补充

Router

实际开发中路由是很重要的部分，rails 的路由自由度很高，想指定成什么样都没有太大问题
但是如果设计风格不统一的话，你的路由就会非常的混乱，不容易维护
下面来讨论下比较常用的一些路由的写法

routes 是干什么的

简单来说当一个 URL 发送到服务器的时候，这时候需要分配到某个 controller 来处理这个请求
具体如何分配就是通过 routes 来实现的

路由在哪儿定义

config/routes.rb文件

如何查看路由

在浏览器中输入以下的 PATH
http://localhost:3000/routes/info

资源路由

这是 rails 默认的风格，也是最近流行的 REST 风格

REST

wiki 上面的 REST 定义
最近越来越流行的设计风格，很多网站都开始采用这种设计手段

对于数据的一个表的最基本操作是 CRUD(增删改查)，REST 也一样，提供对某个实体的 CRUD 功能

比如我们有个网店的网站，对于商品的实体，我们可以按照下面的方法提供它的路由

resources :products

在浏览器中看下生成的 routes，我们可以看到根据 REST 的风格自动生成了增删改查的路径

控制器命名空间

对于商品来说，一般用户只需要给他们提供单个商品的显示和商品的一览的路由

scope module: 'users' do
  resources :products, only: [:index, :show]
end

这时候的 routes 是这样的

需要注意的是需要在 app/controllers/下面建立 users 文件夹，然后把对应的 controllers 文件放在 users 文件下面

根据 subdomain 来分配路由

一般用户我们用/yang-shops.com/来访问
管理员我们用/admins.yang-shops.com/来访问
这时候可以这样写

constraints subdomain: '' do
  scope module: 'users' do
    resources :products, only: [:index, :show]
  end
end

constraints subdomain: 'admins' do
  scope module: 'admins' do
    resources :products
  end
end

未完

参考文献

https://ruby-china.github.io/rails-guides/routing.html