embbnux (Embbnux Ji)

[Kails] 一个基于 Koa2 构建的类似于 Rails 的 nodejs 开源项目

embbnux — Mon, 05 Sep 2016 12:22:12 +0800

最近研究了下 Koa2 框架，喜爱其中间件的思想。但是发现实在是太简洁了，只有基本功能，虽然可以方便搭各种服务，但是离可以适应快速开发的网站框架还是有点距离。于是参考 Rails 的大致框架搭建了个网站框架 kails, 配合 postgres 和 redis, 实现了 MVC 架构，前端 webpack，react 前后端同构等网站开发基本框架。本文主要介绍 kails 搭建中的各种技术栈和思想。

本文首发于Blog of Embbnux, 转载请注明原文出处: https://www.embbnux.com/2016/09/04/kails_with_koa2_like_ruby_on_rails/

koa 来源于 express 的主创团队，主要利用 es6 的 generators 特性实现了基于中间件思想的新的框架，但是和 express 不同，koa 并不想 express 一样提供一个可以满足基本网站开发的框架，而更像是一个基本功能模块，要满足网站还是需要自己引入很多功能模块。所以根据选型大的不同，有各种迥异的 koa 项目，kails 由名字也可以看出是一个类似 Ruby on Rails 的 koa 项目。

项目地址： https://github.com/embbnux/kails

主要目录结构如下：

├── app.js
├── assets
│   ├── images
│   ├── javascripts
│   └── stylesheets
├── config
│   ├── config.js
│   ├── development.js
│   ├── test.js
│   ├── production.js
│   └── webpack.config.js
│   ├── webpack
├── routes
├── models
├── controllers
├── views
├── db
│   └── migrations
├── helpers
├── index.js
├── package.json
├── public
└── test

一、第一步 es6 支持

kails 选用的是 koa2 作为核心框架，koa2 使用 es7 的 async 和 await 等功能，node 在开启 harmony 后还是不能运行，所以要使用 babel 等语言转化工具进行支持: babel6 配置文件: .babelrc:

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ]
}

在入口使用 babel 加载整个功能，使支持 es6

require('babel-core/register')
require('babel-polyfill')
require('./app.js')

二、核心文件 app.js

app.js 是核心文件，koa2 的中间件的引入和使用主要在这里，这里会引入各种中间件和配置，具体详细功能介绍后面会慢慢涉及到。

下面是部分内容，具体内容见 github 上仓库

import Koa from 'koa'
import session from 'koa-generic-session'
import csrf from 'koa-csrf'
import views from 'koa-views'
import convert from 'koa-convert'
import json from 'koa-json'
import bodyParser from 'koa-bodyparser'

import config from './config/config'
import router from './routes/index'
import koaRedis from 'koa-redis'
import models from './models/index'

const redisStore = koaRedis({
  url: config.redisUrl
})

const app = new Koa()

app.keys = [config.secretKeyBase]

app.use(convert(session({
  store: redisStore,
  prefix: 'kails:sess:',
  key: 'kails.sid'
})))

app.use(bodyParser())
app.use(convert(json()))
app.use(convert(logger()))

// not serve static when deploy
if(config.serveStatic){
  app.use(convert(require('koa-static')(__dirname + '/public')))
}

//views with pug
app.use(views('./views', { extension: 'pug' }))

// csrf
app.use(convert(csrf()))

app.use(router.routes(), router.allowedMethods())

app.listen(config.port)
export default app

三、MVC 框架搭建

网站架构还是以 mvc 分层多见和实用，能满足很多场景的网站开发了，逻辑再复杂点可以再加个服务层，这里基于 koa-router 进行路由的分发，从而实行 MVC 分层路由的配置主要由 routes/index.js 文件去自动加载其目录下的其它文件，每个文件负责相应的路由头下的路由分发，如下 routes/index.js

import fs from 'fs'
import path from 'path'
import Router from 'koa-router'

const basename = path.basename(module.filename)
const router = Router()

fs
  .readdirSync(__dirname)
  .filter(function(file) {
    return (file.indexOf('.') !== 0) && (file !== basename) && (file.slice(-3) === '.js')
  })
  .forEach(function(file) {
    let route = require(path.join(__dirname, file))
    router.use(route.routes(), route.allowedMethods())
  })

export default router

路由文件主要负责把相应的请求分发到对应 controller 中，路由主要采用 restful 分格。 routes/articles.js

import Router from 'koa-router'
import articles from '../controllers/articles'

const router = Router({
  prefix: '/articles'
})
router.get('/new', articles.checkLogin, articles.newArticle)
router.get('/:id', articles.show)
router.put('/:id', articles.checkLogin, articles.checkArticleOwner, articles.checkParamsBody, articles.update)
router.get('/:id/edit', articles.checkLogin, articles.checkArticleOwner, articles.edit)
router.post('/', articles.checkLogin, articles.checkParamsBody, articles.create)

// for require auto in index.js
module.exports = router

model 层这里基于 Sequelize 实现 orm 对接底层数据库 postgres, 利用 sequelize-cli 实现数据库的迁移功能. 例子: user.js

import bcrypt from 'bcrypt'

export default function(sequelize, DataTypes) {
  const User = sequelize.define('User', {
    id: {
      type: DataTypes.INTEGER,
      primaryKey: true,
      autoIncrement: true
    },
    name: {
      type: DataTypes.STRING,
      validate: {
        notEmpty: true,
        len: [1, 50]
      }
    },
    email: {
      type: DataTypes.STRING,
      validate: {
        notEmpty: true,
        isEmail: true
      }
    },
    passwordDigest: {
      type: DataTypes.STRING,
      field: 'password_digest',
      validate: {
        notEmpty: true,
        len: [8, 128]
      }
    },
    password: {
      type: DataTypes.VIRTUAL,
      allowNull: false,
      validate: {
        notEmpty: true
      }
    },
    passwordConfirmation: {
      type: DataTypes.VIRTUAL
    }
  },{
    underscored: true,
    tableName: 'users',
    indexes: [{ unique: true, fields: ['email'] }],
    classMethods: {
      associate: function(models) {
        User.hasMany(models.Article, { foreignKey: 'user_id' })
      }
    },
    instanceMethods: {
      authenticate: function(value) {
        if (bcrypt.compareSync(value, this.passwordDigest)){
          return this
        }
        else{
          return false
        }
      }
    }
  })
  function hasSecurePassword(user, options, callback) {
    if (user.password != user.passwordConfirmation) {
      throw new Error('Password confirmation doesn\'t match Password')
    }
    bcrypt.hash(user.get('password'), 10, function(err, hash) {
      if (err) return callback(err)
      user.set('passwordDigest', hash)
      return callback(null, options)
    })
  }
  User.beforeCreate(function(user, options, callback) {
    user.email = user.email.toLowerCase()
    if (user.password){
      hasSecurePassword(user, options, callback)
    }
    else{
      return callback(null, options)
    }
  })
  User.beforeUpdate(function(user, options, callback) {
    user.email = user.email.toLowerCase()
    if (user.password){
      hasSecurePassword(user, options, callback)
    }
    else{
      return callback(null, options)
    }
  })
  return User
}

四、开发、测试与线上环境

网站开发测试与部署等都会有不同的环境，也就需要不同的配置，这里我主要分了 development,test 和 production 环境，使用时用自动基于 NODE_ENV 变量加载不同的环境配置。实现代码: config/config.js

var _ = require('lodash');
var development = require('./development');
var test = require('./test');
var production = require('./production');

var env = process.env.NODE_ENV || 'development';
var configs = {
  development: development,
  test: test,
  production: production
};
var defaultConfig = {
  env: env
};

var config = _.merge(defaultConfig, configs[env]);

module.exports = config;

生产环境的配置: config/production.js

const port = Number.parseInt(process.env.PORT, 10) || 5000
module.exports = {
  port: port,
  hostName: process.env.HOST_NAME_PRO,
  serveStatic: process.env.SERVE_STATIC_PRO || false,
  assetHost: process.env.ASSET_HOST_PRO,
  redisUrl: process.env.REDIS_URL_PRO,
  secretKeyBase: process.env.SECRET_KEY_BASE
};

五、利用中间件优化代码

koa 是以中间件思想构建的，自然代码中离不开中间件，这里介绍几个中间件的应用

currentUser 的注入：

currentUser 用于获取当前登录用户，在网站用户系统上中具有重要的重要

app.use(async (ctx, next) => {
  let currentUser = null
  if(ctx.session.userId){
    currentUser = await models.User.findById(ctx.session.userId)
  }
  ctx.state = {
    currentUser: currentUser,
    isUserSignIn: (currentUser != null)
  }
  await next()
})

这样在以后的中间件中就可以通过 ctx.state.currentUser 得到当前用户

优化 controller 代码

比如 article 的 controller 里的 edit 和 update，都需要找到当前的 article 对象，也需要验证权限，而且是一样的，为了避免代码重复，这里也可以用中间件 controllers/articles.js

async function edit(ctx, next) {
  const locals = {
    title: '编辑',
    nav: 'article'
  }
  await ctx.render('articles/edit', locals)
}

async function update(ctx, next) {
  let article = ctx.state.article
  article = await article.update(ctx.state.articleParams)
  ctx.redirect('/articles/' + article.id)
  return
}

async function checkLogin(ctx, next) {
  if(!ctx.state.isUserSignIn){
    ctx.status = 302
    ctx.redirect('/')
    return
  }
  await next()
}

async function checkArticleOwner(ctx, next) {
  const currentUser = ctx.state.currentUser
  const article = await models.Article.findOne({
    where: {
      id: ctx.params.id,
      userId: currentUser.id
    }
  })
  if(article == null){
    ctx.redirect('/')
    return
  }
  ctx.state.article = article
  await next()
}

在路由中应用中间件

router.put('/:id', articles.checkLogin, articles.checkArticleOwner, articles.update)
router.get('/:id/edit', articles.checkLogin, articles.checkArticleOwner, articles.edit)

这样就相当于实现了 rails 的 before_action 的功能

六、webpack 配置静态资源

在没实现前后端分离前，工程代码中肯定还是少不了前端代码，现在在 webpack 是前端模块化编程比较出名的工具，这里用它来做 rails 中 assets pipeline 的功能，这里介绍下基本的配置。 config/webpack/base.js

var webpack = require('webpack');
var path = require('path');
var publicPath = path.resolve(__dirname, '../', '../', 'public', 'assets');
var ManifestPlugin = require('webpack-manifest-plugin');
var assetHost = require('../config').assetHost;
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  context: path.resolve(__dirname, '../', '../'),
  entry: {
    application: './assets/javascripts/application.js',
    articles: './assets/javascripts/articles.js',
    editor: './assets/javascripts/editor.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: ['babel-loader'],
      query: {
        presets: ['react', 'es2015']
      }
    },{
      test: /\.coffee$/,
      exclude: /node_modules/,
      loader: 'coffee-loader'
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)\??.*$/,
      loader: 'url-loader?limit=8192&name=[name].[ext]'
    },
    {
      test: /\.(jpe?g|png|gif|svg)\??.*$/,
      loader: 'url-loader?limit=8192&name=[name].[ext]'
    },
    {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract("style-loader", "css-loader")
    },
    {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('style', 'css!sass')
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.coffee', '.json']
  },
  output: {
    path: publicPath,
    publicPath: assetHost + '/assets/',
    filename: '[name]_bundle.js'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    // new webpack.HotModuleReplacementPlugin(),
    new ManifestPlugin({
      fileName: 'kails_manifest.json'
    })
  ]
};

七、react 前后端同构

node 的好处是 v8 引擎只要是 js 就可以跑，所以想 react 的渲染 dom 功能也可以在后端渲染，有利用实现 react 的前后端同构，利于 seo，对用户首屏内容也更加友好。在前端跑 react 我就不说了，这里讲下在 koa 里面怎么实现的：

import React from 'react'
import { renderToString } from 'react-dom/server'
async function index(ctx, next) {
  const prerenderHtml = await renderToString(
    <Articles articles={ articles } />
  )
}

八、测试与 lint

测试和 lint 自然是开发过程中工程化不可缺少的一部分，这里 kails 的测试采用 mocha，lint 使用 eslint .eslintrc:

{
  "parser": "babel-eslint",
  "root": true,
  "rules": {
    "new-cap": 0,
    "strict": 0,
    "no-underscore-dangle": 0,
    "no-use-before-define": 1,
    "eol-last": 1,
    "indent": [2, 2, { "SwitchCase": 0 }],
    "quotes": [2, "single"],
    "linebreak-style": [2, "unix"],
    "semi": [1, "never"],
    "no-console": 1,
    "no-unused-vars": [1, {
      "argsIgnorePattern": "_",
      "varsIgnorePattern": "^debug$|^assert$|^withTransaction$"
    }]
  },
  "env": {
    "browser": true,
    "es6": true,
    "node": true,
    "mocha": true
  },
  "extends": "eslint:recommended"
}

九、console

用过 rails 的，应该都知道 rails 有个 rails console，可以已命令行的形式进入网站的环境，很是方便，这里基于 repl 实现：

if (process.argv[2] && process.argv[2][0] == 'c') {
  const repl = require('repl')
  global.models = models
  repl.start({
    prompt: '> ',
    useGlobal: true
  }).on('exit', () => { process.exit() })
}
else {
  app.listen(config.port)
}

十、pm2 部署

开发完自然是要部署到线上，这里用 pm2 来管理：

NODE_ENV=production ./node_modules/.bin/pm2 start index.js -i 2 --name "kails" --max-memory-restart 300M --merge-logs --log-date-format="YYYY-MM-DD HH:mm Z" --output="log/production.log"

十一、npm scripts

有些常用命令参数较多，也比较长，可以使用 npm scripts 里为这些命令做一些别名

{
  "scripts": {
    "console": "node index.js console",
    "start": "./node_modules/.bin/nodemon index.js & node_modules/.bin/webpack --config config/webpack.config.js --progress --colors --watch",
    "app": "node index.js",
    "pm2": "NODE_ENV=production ./node_modules/.bin/pm2 start index.js -i 2 --name \"kails\" --max-memory-restart 300M --merge-logs --log-date-format=\"YYYY-MM-DD HH:mm Z\" --output=\"log/production.log\"",
    "pm2:restart": "NODE_ENV=production ./node_modules/.bin/pm2 restart \"kails\"",
    "pm2:stop": "NODE_ENV=production ./node_modules/.bin/pm2 stop \"kails\"",
    "pm2:monit": "NODE_ENV=production ./node_modules/.bin/pm2 monit \"kails\"",
    "pm2:logs": "NODE_ENV=production ./node_modules/.bin/pm2 logs \"kails\"",
    "test": "NODE_ENV=test ./node_modules/.bin/mocha --compilers js:babel-core/register --recursive --harmony --require babel-polyfill",
    "assets_build": "node_modules/.bin/webpack --config config/webpack.config.js",
    "assets_compile": "NODE_ENV=production node_modules/.bin/webpack --config config/webpack.config.js -p",
    "webpack_dev": "node_modules/.bin/webpack --config config/webpack.config.js --progress --colors --watch",
    "lint": "eslint . --ext .js",
    "db:migrate": "node_modules/.bin/sequelize db:migrate",
    "db:rollback": "node_modules/.bin/sequelize db:migrate:undo",
    "create:migration": "node_modules/.bin/sequelize migration:create"
  }
}

这样就会多出这些命令：

npm install
npm run db:migrate
NODE_ENV=test npm run db:migrate
# run for development, it start app and webpack dev server
npm run start
# run the app
npm run app
# run the lint
npm run lint
# run test
npm run test
# deploy
npm run assets_compile
NODE_ENV=production npm run db:migrate
npm run pm2

十二、更进一步

目前 kails 实现了基本的博客功能，有基本的权限验证，以及 markdown 编辑等功能. 现在目前能想到更进一步的：

性能优化，加快响应速度
Dockerfile 简化部署
线上代码预编译

欢迎 pull request : https://github.com/embbnux/kails

生产环境使用 Docker 部署 Rails 应用 Puma 和 Sidekiq

embbnux — Mon, 23 May 2016 19:44:42 +0800

有幸拿到 docker beta 的测试资格，在 Mac OSX 下使用 docker 更加方便好玩了。这篇博文介绍如何在生产环境也就是线上利用 docker 实现快速部署以及横向扩展，为大规模负载均衡做准备。这里使用一个 docker 容器来跑 rails 应用，另一个容器来跑异步队列 sidekiq 等服务，数据库和 redis 使用 RDS 和云 redis，直接使用 docker 镜像的数据库也可以。

本文原文出处：生产环境使用 docker 部署 rails 应用 puma 和 sidekiq

一、生产环境使用 docker 前准备

首先你的 web 应用要足够干净，rails 也好，nodejs 也一样，不依赖于本地的任何东西，应该是一个 docker 镜像 pull 下来，加上一些环境变量等配置就能直接跑起来。

数据库 url 可配置，可以连接远程数据库，或者连接其他数据库容器
redis 也应该是远程连接可配置，redis 独立出去，异步队列像 sidekiq 的也可以在单独容器里跑了，因为一个 docker 容器只支持一直进程跑，所以 server 和队列是分开的，通过 redis 通讯。
只处理动态流量，静态资源请走 CDN, 图片的上传也不是储存在本地磁盘的，图片的上传可以上传到容器再由容器传到云存储服务器，或者直接由客户端上传到云存储服务器，数据库里只存图片的地址就可以。

二、配置生产环境 Dockerfile

首先讲一些我的工程目录结构，主要就是 rails 的结构，这里只列出关键的文件目录结构：

|__ app
|__ config
|__ |__ puma_docker.rb
|__ |__ database.yml
|__ |__ redis.yml
|__ |__ sidekiq.yml
|__ public
|
|__ Dockerfile
|__ Gemfile
|__ Gemfile.lock

Dockerfile 原则应该是只添加有需要的：

##########################################
# Dockerfile for rails app with puma and sidekiq postgres
# Author: Embbnux Ji
# HomePage: www.embbnux.com
##########################################

FROM ruby:2.3.1

MAINTAINER Embbnux embbnux@embbnux.com
RUN apt-get update && apt-get install -y build-essential libssl-dev libpq-dev libxml2-dev libxslt1-dev nodejs git imagemagick libbz2-dev libjpeg-dev libevent-dev libmagickcore-dev libffi-dev libglib2.0-dev zlib1g-dev libyaml-dev --no-install-recommends && rm -rf /var/lib/apt/lists/*

ENV APP_HOME /app

RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME

COPY Gemfile $APP_HOME/
COPY Gemfile.lock $APP_HOME/

RUN bundle install

COPY . $APP_HOME

RUN bundle exec rake assets:precompile RAILS_ENV=production

EXPOSE 8080
CMD ["bundle", "exec", "puma", "-C", "config/puma_docker.rb"]

三、配置 rails 工程

我的 rails 是使用 puma 来作为 web 服务器的，docker 自然也一样，所以 app 容器默认是执行 puma 启动 server 的命令，对外输出接口为 8080, 使用 nginx 代理流量到这个服务端口即可。 puma 这里需要配置为暴露 8080 端口：

# puma_docker.rb:

threads 4, 16
workers 1
environment 'production'
bind 'tcp://0.0.0.0:8080'
preload_app!

on_worker_boot do
  ActiveSupport.on_load(:active_record) do
    ActiveRecord::Base.establish_connection
  end
end

数据库配置：

# database.yml:

default: &default
  adapter: postgresql
  encoding: unicode
  pool: 5
  timeout: 5000

production:
  <<: *default
  pool: 10
  database: <%= ENV["DATABASE"] %>
  host: <%= ENV['DATABASE_HOST'] %>
  username: <%= ENV["DATAUSER"] %>
  password: <%= ENV["DATAPASSWD"] %>

redis 的配置也一样，redis 的地址用环境变量代替：ENV["REDIS_URL"]

四、使用远程仓库自动构建

我这边采取的远程仓库方案是 Github 加 Docker Hub，实现代码更新自动构建镜像，方法很简单，就是使用 docker hub 的自动构建功能，关联 github 仓库即可。需要在工程根目录下有一个 Dockerfile. 这样 git push 代码后过几分钟镜像就会被自动构建完成。也可以使用 docker hub 的 webhook 功能实现构建完成自动部署，这个我暂时没测试。

五、部署 docker 镜像到生产环境

docker 镜像的部署很简单，直接 pull 下来跑就可以了。这里为了演示，数据库和 redis 也用一个单独的 docker 容器来跑，模拟远程连接，云储存用 docker 的 volume 功能实现，具体如下：

# 下载redis镜像
docker pull redis
# 下载postgres镜像
docker pull postgres
# 下载已经自动构建完成的app镜像
docker pull embbnux/app
# 后台运行redis容器
docker run --name app_redis -d redis
# 后台运行postgres容器, 指定用户名密码
docker run --name app_postgres -e POSTGRES_PASSWORD=password -e POSTGRES_USER=user -e POSTGRES_DB=app_db -d postgres
# 后台运行app容器, 环境变量使用.env.docker文件传入, 映射容器的8080端口到本地的8080端口
docker run --env-file ./.env.docker --link app_redis:redis --link app_postgres:postgres -v /var/www/public/uploads:/app/public/public -v /var/log/app:/app/log --name app_web -p 127.0.0.1:8080:8080 -d embbnux/app
# 上传assets文件到cdn
# docker run --env-file ./.env.docker --link app_redis:redis --link app_postgres:postgres --name app_assets --rm embbnux/app rake cdn:upload_assets
# 运行sidekiq容器
docker run --env-file ./.env.docker --link app_redis:redis --link app_postgres:postgres -v /var/www/public/uploads:/app/public/public -v /var/log/app:/app/log --name app_sidekiq -d embbnux/app bundle exec sidekiq -C config/sidekiq.yml

环境变量文件如下：

# .env.docker
RAILS_ENV=production
SECRET_KEY_BASE=1237293729347238719422b4e25fe42a311bc4e5ffb242397934cbad3adabfbcfae4b431a5029ad6486bce777382470327493287402
DATABASE_HOST=app_postgres
DATABASE=app_db
DATAUSER=user
DATAPASSWD=password
REDIS_URL=redis://app_redis:6379

以后升级代码，只需要把 app pull 下来跑就可以了，多机器部署建议用 capistrano 等工具。在开发环境使用docker 快速构建 rails 开发环境可以看之前的博客。

本文原文出处，Embbnux 博客，生产环境使用 docker 部署 rails 应用 puma 和 sidekiq.欢迎转载，转载请注明原文出处，并保留原文链接

Ruby on Rails 网站大型化之静态资源 CDN 架构

embbnux — Fri, 08 Jan 2016 23:49:51 +0800

第一次发表话题，希望我新写的博客对社区有用

本文发表于 Embbnux 博客,欢迎转载，转载请注明原文出处，并保留原文链接：

https://www.embbnux.com/2016/01/07/ruby_on_rails_assets_cdn/

rails 是个很成熟的网站开发架构，设计者也与时俱进把很多先进的技术与架构集成到 rails 中，造就了其他框架无法比拟的开发效率。网站发展到一定程度，网站流量越来越大就不能把静态文件请求和动态网页请求放到同一台服务器。因为静态资源的流量会远远大于动态资源的请求，流量一大，静态资源会占满服务器带宽，导致网站加载缓慢，所以 cdn 是必不可少的。

rails 的开发者考虑得很全，要实现网站的 cdn 化，只需要修改一个配置文件即可，不过为了不显得我这篇博文太少了，我还是慢慢的讲来。

一、讲讲原理之一个网页的请求

一个网页从在浏览器输入网址，到展示在你面前，之间经历了好多个请求，主要流程如下：

发送请一个请求到所访问地址，网站服务器返回一个 html 文本
浏览器解析 html 文本，并加载里面引入的 js、css 以及图片等文件，这些叫做静态资源，同样浏览器还要往服务器发送这些静态资源的请求
等待外部静态资源请求完成后，浏览器在进行 css,js 文件的解析执行，把图片等填充到网页上
然后就是你所看到的一个网页了，有颜色有图片也有交互

二、rails 的静态资源

rails 对于的静态资源主要有两种，一种是写在代码里的，比如网站的 js、css 以及图标等文件，还有一种为用户上传的，比如用户上传的头像图片等。

对于静态文件等 rails 引入了Asset Pipeline用来管理编译静态资源，对于第一种写在代码里的静态文件，在 rails 工程里面是存在 app/assets 文件夹下，分别有 images 和 stylesheets 以及 javascripts 等分类文件夹，js 和 css 代码放在这里可以用 coffeescript 以及 sass 等各种语言来写，最终线上环境 (生产环境) 得对这些代码进行编译生成 js 以及 css 文件，这样浏览器才会识别，编译不仅进行格式的翻译还会进行 minify 等，最终会在编译文件后面加一段当前文件的 hash，所以代码变动，编译出的文件就不一样：

RAILS_ENV=production rake assets:precompile
#assets/javascripts/application.js => pubilic/application-3214abdc8899.js

由于编译完的文件被加了一段 hash 所以不能直接在 html 里面用路径访问，所以得在 view 层渲染时得出文件路径：

app/views/layout/application.html.erb:

<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>
<%= image_url 'favicon.png' %>

对应渲染出来的 html 是：

<link rel="stylesheet" media="screen" href="/assets/application-122fe15eeed76211bd37e2f1234454.css" />
<script src="/assets/application-583bffd2a21c2a6b8d1ab72bad4ba8af.js">
assets/favicon-1aa0e2adc41f64de39.png

加 hash 是为了在代码得到更新后浏览器能够及时更新使用新的静态文件，早期的 rails 版本使用的版本控制手段如下：

/stylesheets/application.css?1309495796

但是这种手段在 cdn 的使用场景上不能及时更新存在 cdn 上的文件，所以该用加了 hash 的文件名来做版本控制，保证 cdn 部署时代码和静态资源得到同时跟新，变成这样

application-1309495796.css

第二种静态资源是用户上传的，这些的不是放在代码里的，在 rails 工程中这些静态文件放在 public 文件夹下，因为 web 服务器的根目录指向的就是 public 文件夹，其他文件夹浏览器没有权限访问得到，之前的 js 和 css 也得被编译完后放到 public 文件夹才可以访问。这些静态文件不会被编译，所以文件名后面不会被加入 hash, 但也可以用 image_url‘upload/avatar.png’来访问，image_url 会自动区分要不要加 hash.

upload/avatar.png

三、开启 cdn

说了这么多，是时候开启 cdn 了。如果一直是按 rails 规范来写的话在这里开启 cdn 配置，只需要在 config/environments/production.rb 加一句话：

config.action_controller.asset_host = 'static-cdn.embbnux.com'

这样之前渲染出来的 html 就变成这样：

<link rel="stylesheet" media="screen" href="http://static-cdn.embbnux.com/assets/application-122fe15eeed7688837e2f1234454.css" />
<script src="http://static-cdn.embbnux.com/assets/application-583bffd2a21c2a6b8d1a888ad4ba8af.js">
http://static-cdn.embbnux.comassets/favicon-1aa0e2adc41888de39.png
http://static-cdn.embbnux.com/upload/avatar.png

出来的路径就是指向 cdn 服务器上的静态资源了，这样一个网页的访问就只会有第一个 html 的请求发到我们服务器上，其他的静态资源请求是发到 cdn 服务器上的，一个 html 文本一半也就几 k，大小很小的，加载时间也很快，不很会占用服务器带宽。

有时候为了区分和管理第一种网站静态资源和第二种用户静态资源可以配置分别指向两个 cdn 域名，不同的域名用不同的 cdn 空间，可以这样配置

config.action_controller.asset_host = Proc.new { |source|
  if source =~ /assets/
    'static-assets-cdn.embbnux.com'
  else
    'static-images-cdn.embbnux.com'
  end
}

这样渲染出来就变成这样：

<link rel="stylesheet" media="screen" href="http://static-assets-cdn.embbnux.com/assets/application-122fe15eeed76211bd37e2f1234454.css" />
<script src="http://static-assets-cdn.embbnux.com/assets/application-583bffd2a21c2a6b8d1882bad488af.js">
http://static-assets-cdn.embbnux.comassets/favicon-1aa0e2adc8884de39.png
http://static-images-cdn.embbnux.com/upload/avatar.png

为了保证 assets 文件及时更新到 cdn 存储，可以写个 rake 脚本利用 cdn 商提供的接口，在部署的时候及时上传 assets 文件到 cdn 空间比如：

rake cdn:assets_upload

四、web 服务器配置

为了保证 cdn 的文件能够及时与我们自己服务器上静态文件保持一致，需要开启 cdn 的镜像功能，但为了不使 cdn 缓存我们的动态 html 内容，造成镜像网站而降低网站权重，需要配置一下 nginx 服务器

server {
 server_name www.embbnux.com;
 root /rails_app/public;
 location / {
   index index.html index.htm;
   proxy_pass http://rails_app_upstream;
   proxy_set_header Host $host;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 }
}

server {
 server_name static.embbnux.com;
 root /rails_app/public;
 location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
   expires max;
   log_not_found off;
 }
 location ~* ^/assets/ {
   root /rails_app/public;
   expires 1y;
   add_header Cache-Control public;
   add_header Last-Modified "";
   add_header ETag "";
   break;
  }
}

这样服务器上的静态资源就可以通过 static.embbnux.com 访问，动态资源只能通过 www.embbnux.com 访问，cdn 镜像通过 static 域名，也就不用担心会镜像动态页面

四、更进一步

开启 cdn 后也就不用担心静态资源来占我们服务器的带宽了，不过这也只是大型化网站的第一步，还可以进行很多优化，欢迎拍砖。流量在大一点，只接受动态资源请求的我们网站服务器也会承受不了的，这时候就是开启负载均衡的时候了，可以一个 nginx 代理请求，然后中转到几台服务器上的 rails_app_upstream，这都是后话了。

更多内容欢迎查看原文博客: https://www.embbnux.com/2016/01/07/ruby_on_rails_assets_cdn/