新手问题 请教怎么将静态资源同步到阿里云 OSS 上

gxlonline · 2016年05月15日 · 最后由 simple_dog 回复于 2017年08月08日 · 11305 次阅读

问题

目前网站部署在阿里云上,不同设备第一次访问都很慢(3~4s),后面就很快了。 估计是第一次需要下载 js(300 多 k)和 css(100 多 k)。

改进

想把静态资源全部放在阿里云 OSS 上,然后设置 CDN,减轻服务器负担,加快速度。 现在有几个问题不知从何入手,搜了很多帖子也没找到例子,请大家指点一下,谢谢。

请教

  1. 生产环境下,怎么将 precompile 编译的 js 和 css 文件自动推送到 OSS,或者是手动上传的?
  2. 使用 rails_kindeditor 上传的图片怎么直接上传到 OSS?
  3. js 需要分情况加载吗,比如 kindeditor.js 只在文章编辑页面用到,但生产环境下是打包到一个 app.js 文件里了。

目前做了以下配置

Gemfile

gem "carrierwave"
gem "carrierwave-aliyun"

config/environments/production.rb

config.action_controller.asset_host = 'http://assets.xxx.com'
config.assets.prefix = "assets"

config/initializers/rails_kindeditor.rb

config.asset_url_prefix = "http://assets.xxx.com/" if Rails.env.production?

config/initializers/carrierwave.rb

CarrierWave.configure do |config|
  config.storage           = :aliyun
  config.aliyun_access_id  = "XXX"
  config.aliyun_access_key = 'XXX'
  # 你需要在 Aliyum OSS 上面提前创建一个 Bucket
  config.aliyun_bucket     = "XXX"
  # 是否使用内部连接,true - 使用 Aliyun 主机内部局域网的方式访问  false - 外部网络访问
  config.aliyun_internal   = true
  # 配置存储的地区数据中心,默认: cn-hangzhou
  config.aliyun_area     = "oss-cn-qingdao"
  # 使用自定义域名,设定此项,carrierwave 返回的 URL 将会用自定义域名
  # 自定于域名请 CNAME 到 you_bucket_name.oss.aliyuncs.com (you_bucket_name 是你的 bucket 的名称)
  config.aliyun_host       = "http://assets.xxx.com"
  # Bucket 为私有读取请设置 true,默认 false,以便得到的 URL 是能带有 private 空间访问权限的逻辑
  # config.aliyun_private_read = false
end

同时已经在阿里云 OSS 创建了相应的 Bucket。

不用同步,阿里云上面设置 CDN 回源,不用 OSS

感谢回答 @huacnlee 不过不知道哪里没配置好,现在 JS 和 CSS 都无法加载,可以再教以下怎么配置,谢谢了。

config/environments/production.rb

config.action_controller.asset_host = 'http://assets.xxx.com'

生成的 HTML

<link rel="stylesheet" media="all" href="http://assets.xxx.com/assets/application-6ac0269f001e2ea6969b26a7de87041a.css" />
<script src="http://assets.xxx.com/assets/application-6f1f2cb8a63ff5010d4b67d7f5da59bc.js"></script>

阿里云 CDN

CNAME: xxx.com.w.kunlunca.com
域名: xxx.com
源站: assets.xxx.com:80

阿里云 CDN 配置:

  • CNAME: assets.meirizhi.com.w.kunlunca.com
  • 域名:assets.meirizhi.com
  • 源站:meirizhi.com:80

然后域名 assets.meirizhi.com 需要配置 CNAME 到阿里云给出的 CNAME 地址 assets.meirizhi.com.w.kunlunca.com,你的 Web 服务器 Nginx 上面不需要配置任何 assets.meirizhi.com 有关的东西。因为 CDN 的回源使用 meirizhi.com 也就是你网站的主域名访问的,你只需要确保网站的 Nginx 配置在没有用 CDN 的时候 Assets 之类的也是可以访问的(我看目前你配置是正确的)。

阿里云 CDN 和 Rails 应用 Assets 配合的大致流程:

                      [User]
                         |
<assets.meirizhi.com/assets/application-digest.js>
                         |
               ---------------------------------------
               |                                     |
            <cache>                             <no cache>
               |                                     |
             [200]                <meirizhi.com/assets/application-digest.js>
                                                     |
                                           [Nginx location /assets]
                                                     |
                                                   [200] --> [CDN Cache]

配置参考:

缓存配置:

别忘了允许跨域访问,不然 JS 会有问题:

演示网站:https://www.dianjihe.com

👍 感谢 @huacnlee 的耐心解答。 配置成功了,速度提供很明显,真的谢谢了。

另外还有一点想请教一下: 阿里云 CDN 源站设置为:www.xxx.com:80 但使用 xxx.com 访问也可以加速,并没有设置泛域名,请问这是什么原理?

刚才摸索着配置好了阿里云的 CDN,发现比国内其他同类产品好用太多。

楼主,第二个问题解决了吗,怎么把 kindeditor 上传的视频 图片传到 oss 上

需要 登录 后方可回复, 如果你还没有账号请 注册新账号