kooglezhang (Koogle)

Rails + Nginx 下 HTTP 和 HTTPS 同时访问并实现特定方法自动转换

kooglezhang — Mon, 26 Dec 2016 20:35:06 +0800

最近一直在这个问题上纠结并痛苦，总是没有达到理想的状态，网站在 HTTPS 和 HTTP 之间飘忽，而不是我所设想的只在某一个方法下去自动转换，

终于在一番痛苦的测试频繁发版后，今天在一阵激动之中终于把这个逻辑按照自己设想的状况下实现，虽然辛苦，但却也在收获中成长，

真的是笑出了声，：D

现在把我的解决思路和遇到的问题陈述，希望可以帮到更多的朋友，以后遇到类似的问题可以作为借鉴参考

网站从 HTTP 升级为 HTTPS，升级的原因是因为个人喜欢看着地址栏那个大绿色的 https://

因为开发的过程中都是使用的相对路径，所以从首页跳转到播放页的时候链接都是 https://,导致播放页无法正常播放视频内容，（这个时候真的羡慕 YouTube 的视频资源全源 https://）

后来通过https://ruby-china.org/topics/31988 在 Nginx 里添加多个 if 条件判断初步实现了从 https 在特定方法下转为 http，但是金接着第二未知问题来了，

那就是因为只指定的特定路径，而像样式文件 css , js 等引用文件，导致了在请求时报错，access-control-allow-origin

然后只是快乐就停留在这个报错的时候，然后又想到在所有请求到播放页的链接全都绝对链接 http://example.com/show, 这个后来仍然被否决掉了，

因为在播放页的其他相对路径会被污染为 http，如用户登录，注册等相关的链接，而我想他们都是 https,

后来找到解决 force_ssl 这个特定方法强制 https 访问，在本地开发测试的时候一切正常，部署到线上后，提示网页有多重定向，无法正常访问

class WelcomeController < ApplicationController
   force_ssl, except: [:show], if: :run_production?

   def run_production?
       Rails.env.prodcution?
   end

end

后来找了原因，是因为 nginx 在作为代理服务器的时候，从浏览器到实际 rails 执行后的 scheme 不匹配，导致了方法死循环（这是我今天个人的理解，不对之处请朋友们能指正）

解决的方法是在 nginx 配置里加上一个

proxy_set_header X-Forwarded-Proto $scheme;

即告诉 nginx 我服务器返回的是什么 scheme 就代理为什么，不做处理，

至此，网站终于按照我刚开始所预料的那样运行：D！！！体验飞机票

网站实现 HTTP 和 HTTPS 同时访问并自动转换

kooglezhang — Fri, 23 Dec 2016 15:30:53 +0800

个人的视频小站 www.koogle.cc 由于升级为 HTTPS 后，视频播放页由于第三方视频资源为 HTTP, 导致浏览器地址红色提示

不得已必须要同时兼容 HTTP 和 HTTPS, 但是又不想网站退回到 HTTP, 所以在 NGINX 同时监听 80 和 433 端口，

但是但是其他地址除了播放页意外，如果是来自 HTTP 的请求，都要自动跳转到 HTTPS 协议进行访问

由于 NGINX 的条件判断不直接支持多条件联合，即不像 ruby 那样可以

 if condition1 && condition2 
   # do something
end

所以在做 rewrite 的时候，需要将单条件输出，拼写到下一个条件的结果里面，如：我想要将所有播放页 https://www.koogle.cc/show/T76YxailMzhd.html

转换为 HTTP，刚开始想到了用正则表达式

if ($request_uri ~  ^/show/(.*)$ ) {
    rewrite ^/(.*)$ http://www.koogle.cc/$1  permanent; 
}

重新部署重启后，页面提示有多重跳转，后来发现不论是 HTTP 和 HTTPS 都有符合这个条件，所有就会出错，

所以应该是指在 HTTPS 模式下才执行这个操作，所以还要加上对 HTTPS 作为条件去并行

if ($request_uri ~  ^/show/(.*)$ ) {
    set $show "show";
}

if ($scheme = 'https') {
    set $show "${show}https";
}

if ($show = "showhttps") {
   rewrite ^/(.*)$ http://www.koogle.cc/$1 permanent;
}

完成了这一步以后，终于可以安心的观看视频，但是紧接着我又遇到一个烦恼的痛苦，因为这个页面除了播放以外，

还有其他页面链接，如登录，栏目，这些链接都变成 http://www.koogle.cc, 这样跳转过去的链接又成了原来的 HTTP，必须得再做一步判断，条件刚好相反

if ($request_uri !~ ^/show/(.*)$) {
    set $not_show "notshow";
}

if ($scheme = 'http') {
    set $not_show "${not_show}http";
}

if ($not_show = "notshowhttp") {
    rewrite ^/(.*)$ https://www.koogle.cc/$1 permanent;
}

关于二维码安卓与 iOS 设备下载应用的时候自动跳转

kooglezhang — Fri, 09 Dec 2016 10:40:43 +0800

今天维护的一个公司项目网站，之前做的二维码扫码下载，测试发现不能正常跳转

后来发现其实 Rails 在请求参数 request.env 里面已经包括了请求设备的信息

request.env['HTTP_USER_AGENT']

后来对应用的二维码地址链接添加判断方法

ex: http://www.exaple.com/qr_download

这是二维码指向的链接

方法内部做判断二次跳转

def qr_download
  if env['HTTP_USER_AGENT'].include?('iPhone')
    redirect_to 'https://itunes.apple.com'
  elsif env['HTTP_USER_AGENT'].include?('Android')
    redirect_to "https://www.exaple.com/app.apk"
  end
end

这样中间不用再加一个引导页面，就可以直接完成应用的跳转

由于微信的现实 IOS 设备下微信扫码后需要点击右上角的。。。在浏览器里面打开才能完成跳转到 iTunes 上

用户头像 (Avatar Upload) 剪切上传方案整合

kooglezhang — Mon, 01 Aug 2016 12:21:19 +0800

在开发个人网站的时候，遇到一个问题，就是用上传头像剪切后再重新上传，用户只需要提供图片，而不用手动在自己电脑上用其他的软件作为预处理后再点击上传，可以随意剪切成自己满意的大小

前端图片 Js 剪切使用 Cropbox

图片剪切部分 Js

<script type="text/javascript">
  $(window).load(function() {
    var options =
    {
      thumbBox: '.thumbBox',
      spinner: '.spinner',
      // imgSrc: 'images/avatar.png'
    }
    var cropper = $('.imageBox').cropbox(options);
    $('#upload-file').on('change', function(){
      var reader = new FileReader();
      reader.onload = function(e) {
        options.imgSrc = e.target.result;
        cropper = $('.imageBox').cropbox(options);
      }
      reader.readAsDataURL(this.files[0]);
      this.files = [];
    })
    $('#btnCrop').on('click', function(){
      var img = cropper.getDataURL();
      $('.cropped').attr('style','display:block');
      $('.cropped').html('');
      $('.cropped').append('<br><img src="'+img+'" align="absmiddle" class="tu_yuan">');
      $('.cropped').append('<img src="'+img+'" align="absmiddle" class="tu_fang">');
      $('#data').val(img);
      $('#tijiao').removeAttr('style');
    })
    $('#btnZoomIn').on('click', function(){
        cropper.zoomIn();
    })
    $('#btnZoomOut').on('click', function(){
        cropper.zoomOut();
    })
  });
  $(document).on('page:fetch',   function() { NProgress.start(); });
  $(document).on('page:change',  function() { NProgress.done(); });
</script>

重新剪切后的图片数据需要在后端作为编码处理

def create_avatar
  file = Base64.decode64(params[:avatar]['data:image/png;base64,'.length .. -1])
  file_name = "img_#{Cattle.rand_string_name(20)}.png"
  file_path = "#{Rails.root}/public/uploads/#{file_name}"
  File.open(file_path,'wb+') do |item|
    item.write(file)
  end
  current_user.avatar = Cattle.upload_yun(file_name,file_path)
end

将剪切后的图片缓存到系统，然后将文件上传至 CDN，保存返回的 url 链接下图是图片剪切后的效果

想体验的朋友可以戳 http://koogle.cc 到个人用户中心