猫窝私语 — Makumo's Blog

玛酷猫的温馨小窝,记录生活点点滴滴。

@玛酷猫6 年前

01/3
23:01
WordPress 建站日志

小窝加装泛域名SSL证书

(本来打算写在上篇的,篇幅有点长,干脆拆成两篇好了)
书接上回,话说随着chrome的版本更新,所有的http访问的网站都会在网址前面标一个大大的不安全,这都9102年了,不给网站弄的SSL证书也太不像话了。免费证书哪家强,当然是选择Let’s Encrypt,而且今年去年年中的时候已经支持泛域名的证书,B格更高,同时也推出了新的申请方式,相对于以前单个域名的申请,方便很多。

首先要下载acme.sh,安装成功后断开重新连接下终端,要不会后续的命令提示找不到

curl https://get.acme.sh | sh

由于acme.sh可以自动配置DNS,这就需要获取到域名的API,我的域名是使用DNSPOD解析的,这里就用DNSPOD做例子,其他的请参考官方指南。登录DNSPOD,在控制台——用户中心——安全设置里面,启用API Token,创建新的API Token,这里一定要保存好Token,因为这个是只显示一次,关掉后就没法获取完整,只能删掉重新建,同时记下Token对应的ID,然后运行下面命令,等待120秒验证,屏幕上会显示倒计时,如果一切正常的话,屏幕会显示申请成功并显示4个证书文件的路径。

export DP_Id='ID数字'
export DP_Key='Token字符串'
acme.sh --issue -d makumo.com -d *.makumo.com --dns dns_dp

然后打开站点的Nginx的配置文件,添加相关的配置,例如:

server 
    {
        listen 443 http2 ssl;
        server_name makumo.com;
        index index.html index.php;
        root  站点目录;
        ssl_certificate /root/.acme.sh/makumo.com/fullchain.cer;
        ssl_certificate_key /root/.acme.sh/makumo.com/makumo.com.key;
        ssl_trusted_certificate  /root/.acme.sh/makumo.com/ca.cer;
        include proxy-pass-php.conf;
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }
        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }
        location ~ /\.
        {
            deny all;
        }
}

proxy-pass-php.conf文件即为上一篇中的关于转发到Apache的部分.

nginx -s reload

重新加载Nginx配置文件就能使用https访问站点,这时候还会存在几个问题,站点中图片、脚本、样式还是使用的http来引入,在浏览器中会报出错误,后台无法进入,浏览器会显示过多的重定向,网络里面会看到一堆的302重定向,搜了下,绝大部分都会说在Wordpress配置文件中添加开启SSL的配置,如下:

$_SERVER['HTTPS'] = 'on';
define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);

但是我这么设置后,前台没问题了,后台还是无法进入,虽然不报过多的重定向,直接报403错误了。
搜素了半天,还在有更简便的解决方案,安装插件really-simple-ssl,一次性解决各种恶心的问题。
另外,由于站点使用七牛作为图片的CDN缓存,站点切换为https后也需要将七牛的CDN改成https模式,在七牛的后台添加下证书(之前申请证书的4个文件,fullchain.cer是证书,域名.key就是对应的密钥),关联域名开启SSL就好了,这也是泛域名证书的方便之处,不用再次申请单域名证书了。七牛的https是收费的,看了下,0.28元/G,之前还有赠送的10元余额。应该能用段时间。

小窝加装泛域名SSL证书

@玛酷猫6 年前

01/3
22:08
建站日志

小窝迁移升级

今天忽然收到阿里云的提示,个人的云服务器要到期了,连忙登录上去准备续费,一看价格,我勒个擦,8XX,当初买的时候才3XX,去年续费的时候5XX,这涨的也太快了,看了下新购,同样配置同一地区也才5XX,算了算了,还是重新购买台好了,虽然要重新配环境迁移网站麻烦点,谁让咱穷呢。

下单付款,等会就开通,ssh连上去,先配置下环境,之前那台服务器用的lnmp一键包,当初菜鸟一只啥都不会。现在基本了解了后,一键包方便是方便,但是问题也不少,首先就是文件的安装位置都变了,配置文件也和默认的不太一样,详细配置的时候各种别扭,其次就是带着一些不用的软件,还有就是版本升级的问题。所以还是自己配好了,好在CentOS配置起来比较简单,几行命令就好了。服务结构还是像往常那样,Nginx跑静态文件和代理,Apache跑PHP7,预配NodeJS和Ruby,平时做简单的调试用,通过Nginx转发访问

# 安装nginx
yum install nginx
# 由于yum源没有php7,所以要更换
yum install epel-release
rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm
# 安装php7.2以及相关扩展
yum install php72w php72w-cli php72w-common php72w-devel php72w-embedded php72w-fpm php72w-gd php72w-mbstring php72w-mysqlnd php72w-opcache php72w-pdo php72w-xml
# 安装mariadb
yum install mariadb mariadb-server
# 设置mariadb密码,需要先运行mariadb服务
mysql_secure_installation

新建站点和相关配置就不多说了,有几点要注意下,
1、httpd的默认配置文件里面,所有请求会全部拒绝,要删掉或者注释掉

<Directory />
    Options FollowSymLinks
    AllowOverride none
    Require all denied
</Directory>

2、站点的目录用户组要调整成为apache:apache

httpd服务的端口调整为88,在Nginx站点配置的时候,添加相关的配置说明,如下例子

location /
{
    try_files $uri @apache;
}
location @apache
{
    internal;
    proxy_pass http://127.0.0.1:88;
    include proxy.conf;
}

location ~ [^/]\.php(/|$)
{
    proxy_pass http://127.0.0.1:88;
    include proxy.conf;
}

proxy.conf里面存放一些代理设置

proxy_connect_timeout 300s;
proxy_send_timeout   900;
proxy_read_timeout   900;
proxy_buffer_size    32k;
proxy_buffers     4 32k;
proxy_busy_buffers_size 64k;
proxy_redirect     off;
proxy_hide_header  Vary;
proxy_set_header   Accept-Encoding '';
proxy_set_header   Host   $http_host;
proxy_set_header   Referer $http_referer;
proxy_set_header   Cookie $http_cookie;
proxy_set_header   X-Real-IP  $remote_addr;
proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header   X-Forwarded-Proto $scheme;

最后迁移站点文件、还原数据库,启动各服务并设置随系统启动,测试没问题后将域名切换过来就ok了。

systemctl enable nginx.service
systemctl enable httpd.service
systemctl enable maridb.service
systemctl start nginx.service
systemctl start httpd.service
systemctl start maridb.service

顺便一提的是本次迁移也干掉的www,www是个很奇怪的历史遗留的问题,这是个二级域名,可能很多人认为方便呀,直接ctrl+enter就自动补全了,可是最早的IE浏览器直接ctrl+enter的话补全的是www.xxx.cn.co而并不是www.xxx.com,方便无从谈起,直到后续大量的国产带壳浏览器的出现才修正过来,况且那时候.net域名还是很流行的,还有不少.cn的域名,而且大部分人都不会直接打域名来访问网站,基本上都是打开百度搜索网站,要不就是收藏夹或者聚合网址来上网。所以www就是多余的,去掉后网址还精简一些。虽然去掉www会影响搜索引擎的搜录,好在小窝文章本来就不多,写的也是断断续续的,大部分都是方便自己以后查找用的,也不在乎那点收录了。

小窝迁移升级

@玛酷猫7 年前

11/3
10:46
Ionic(Angular)

Ionic3应用中添加Faye功能

公司rails项目中通过Faye来实现一个简单的好友聊天互动的功能,移动端需要开发简易的教师上课点名的小功能,想想正好可以利用Faye服务来实现,具体逻辑很简单,在课程页面,教师点击点名模块,设置密钥后进入点名页面,通过Faye发布该课程点名信息,学生接收到点名信息后在页面上显示签到按钮,学生点击签到按钮输入密钥,通过Faye服务传递到教师点名页面上,时时反馈签到情况,最后教师通过关闭按钮结束签到并通过Faye告知所有学生,学生页面隐藏签到按钮。

逻辑理顺了,页面搭建完毕,加入Faye犯难了,官方文档只是简单写了下浏览器端如何使用,引入Faye服务端js,然后可以使用subscribe和publish来发布和接受了。在Ionic3项目里面就傻眼了,第一步引入js就不知道咋搞了,网上翻资料,绝大部分都是使用ionic 1.x的资料,度娘里面居然还掺杂一大堆王菲的搜索页面。。。谷歌研究了半天,参考了一篇关于ionic3部署socket.io的文章,终于搞定。

首先还是安装Faye组件

npm install faye --save

新建一个服务provider,初始化同时把相关的推送接收用法写进去

import { Injectable } from '@angular/core';
import * as Faye from 'faye'

@Injectable()

export class FayeService {
  clientUrl: string;
  data: any;
  client: any;

  constructor() {
    this.clientUrl = 'https://your website/faye';
    this.data = null;
    this.client = new Faye.Client(this.clientUrl)
  }

  subscript(callback:any, channelName:string){
    this.client.subscribe('/' + channelName, function (data) {
      callback(data);
      // console.log('receiced data:'+data);
    })
  }

  publish(channelName:string, data:any){
    let publication = this.client.publish('/' + channelName, data);
    publication.then(function() {
    }, function(error) {
      console.log('There was a problem: ' + error.message);
    });
  }

}

最后在app.module.ts中引入这个provider并声明下就可以在项目中使用了。

此外还有一点,由于项目的browser版和接口都启用的ssl,直接使用http://your website:8080/faye 会报错,提示在ssl下访问非ssl存在安全问题balabala之类的,这个需要在nginx中设置端口转发。

在nginx的接口配置文件中添加faye的upstream

upstream faye-socket{
    server 127.0.0.1:8080;
}

接着在配置443的server下面添加转发规则

location /faye {
	proxy_pass http://faye-socket;

	proxy_http_version 1.1;
	proxy_set_header X-Real-IP $remote_addr;
	proxy_set_header Host $host;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

	proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection "upgrade";
	proxy_cache_bypass $http_upgrade; 
}

保存后重新加载nginx配置即可。

nginx -s reload

Ionic3应用中添加Faye功能