幸福的猪窝

React填坑笔记

发表于 2019-10-30 | 分类于技术文章

用来记录使用React过程中遇到的坑

启动程序报错
在 ubuntu 系统上执行 npm start出现如下错误：

1	rror: ENOSPC: System limit for number of file watchers reached, watch xxxxxxx

原因：系统限制

解决方法：

1	echo fs.inotify.max_user_watches=524288 \| sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Electron 开发桌面应用

发表于 2019-10-30 | 更新于 2019-11-01 | 分类于技术文章

1.环境安装

默认大家电脑上已经有可用的Nodejs环境，如果没有请自行安装。Nodejs安装参考官网。

2. 创建一个空白的React 应用

##创建应用
npx create-react-app electron-demo
cd electron-demo
npm start
## 如果能启动浏览器看到如下界面表示React应用创建成功。

React默认App截屏

3. 集成Electron

1.安装组件

1	npm install electron --save

package.json中添加这两行main是指定electron主文件的位置。electron-star是指定electron的启动脚本这样就可以通过你npm run electron-start 来启动了。

{
  "main": "src/electron/main.js",
  "scripts": {
    "electron-start": "electron ."
  },
}

2.添加Electron启动脚本

我们在package.json中指定的electron的主程序路径在src/electron下。首先在创建主文件main.js


/**
* Electron 主入口
*/
// 引入Electron
const { app, BrowserWindow} = require('electron');

// 定义默认启动窗口参数
let global_cfg = {
    window : {width:800,height:600},
    islocal : true,
    openDevTools : true
}

//定义窗口主对象。
let win = null

//创建窗口
function createWindow() {

    // 创建浏览器窗口。
    let winCfg = global_cfg.window;
    win = new BrowserWindow(winCfg);

     //如果是本地调试状态从React监听的url打开，打包后从本地文件读取
    if ( global_cfg.islocal ) {
        win.loadURL('http://localhost:3000')
    }else{
        win.loadURL(`file://${path.join(__dirname, '../build/index.html')}`)  
    }
    
    // 打开开发者工具
    if(global_cfg.openDevTools){
        win.webContents.openDevTools()
    }
  
    // 当 window 被关闭，这个事件会被触发。
    win.on('closed', () => {
        // 取消引用 window 对象，如果你的应用支持多窗口的话，
        // 通常会把多个 window 对象存放在一个数组里面，
        // 与此同时，你应该删除相应的元素。
        win = null
    })
}

//系统初始化函数
function sysInit(){
    createWindow();
}

// Electron 会在初始化后并准备 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', sysInit)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    // 在macOS上，当单击dock图标并且没有其他窗口打开时，
    // 通常在应用程序中重新创建一个窗口。
    if (win === null) {
        createWindow()
    }
})

3.测试

1	npm run electron-start

顺利的话就能看到一个程序界面启动，内容就是第二步完成的React项目的内容。

到此一个 Electron + React 的项目框架就算初步完成。

Nginx操作脚本整理

发表于 2019-06-26 | 更新于 2019-10-30 | 分类于技术文章

最近部署服务器需要使用自己编译的 tengine 复制好编译好的文件后发现每次启动都要到服务器所在目录调用nginx太麻烦还要记录各种参数。尤其是这次的运行的路径和我编译时预设的不一样。要加一大堆参数。所以爆发了写一个脚本集成的需求。一条命令完成大部分操作。

目前这个脚本集成了四项功能

启动
停止
重新加载配置
测试默认配置文件
把下面内容保存到一个shell文件命名成nginx.sh ，执行 chmod +x nginx.sh赋予可执行权限后就可以了。
脚本中配置了nginx安装的绝对路径所以可以放到任何地方，放到PATH路径后使用方便。


#!/bin/bash
#定义nginx的安装目录
#后面使用 -p 参数指定了运行时 nginx的主目录，nginx会去这个目录中搜索配置文件。准备下一步改进一下把这个参数作为可传入的参数这样就可以在几套配置间切换了。

nginx_home=/data/software/utax/tengine
action=$1

if [ $# = 0 ]; then
   echo "Use case: nginx.sh {start|reload|stop|test}"
else
   echo "$action"
   echo "Profix: $nginx_home"
   case $action in
       "start")
           echo "Starting nginx"
           $nginx_home/sbin/nginx -p $nginx_home
       ;;
       "test")
           echo "Test nginx config"
           $nginx_home/sbin/nginx -p $nginx_home -t
       ;;
       "reload")
           echo "Reloading nginx config"
           $nginx_home/sbin/nginx -p $nginx_home -s reload
       ;;
       "stop")
           echo "Stoping nginx"
           $nginx_home/sbin/nginx -p $nginx_home -s quit
       ;;
       *)
       echo "Use case: nginx.sh {start|reload|stop|test}"
   esac
fi

Let's Encrypt 通配符证书申请-更新

发表于 2019-06-05 | 更新于 2019-10-30 | 分类于技术文章

之前介绍过一篇升级 Let’s Encrypt通配符证书的文章。当时时使用手动交互模式需要在DNS服务器添加记录证明对域名的所有权。开始以为就是签发是一次认证就可以，以后重新申请会像以前普通证书一样直接更新。最近在更新的时候发现这个认识是错误的。当执行 certbot-auto renew 时返回了如下错误：

1
2

Could not choose appropriate plugin: The manual plugin is not working; there may be problems with your existing configuration.
The error was: PluginError('An authentication script must be provided with --manual-auth-hook when using the manual plugin non-interactively.',)

意思就是没有找到认证的插件，需要通过参数 –manual-auth-hook 指定，否则无法申请。这个插件的用处就是在重新签发的时候仍然要验证一次身份，需要在DNS上添加解析记录。网上搜搜了一下有人用python写了一个支持阿里云和腾讯云插件。让我想起了之前用nodejs的一个修改ALIDNS的插件。当时用来实现类似花生壳的DDNS功能。于是准备升级一下这个系统用于自动处理证书签发。

申请证书

申请证书跟上篇内容有一些更新。不再需要指定服务器，默认已经是v2的服务器了，新加了一个参数默认允许记录申请时的公网IP实现全自动申请，中间没有交互步骤。
下面这个命令是测试命令，真是申请需要删除最后的 –dry-run。

sudo ./certbot-auto  certonly --email <email> -d <domain>  --manual --manual-auth-hook "/apps/server/nodejs/bin/node cert-manual-hook.js add" --manual-cleanup-hook "/apps/server/nodejs/bin/node cert-manual-hook.js delete" --preferred-challenges dns --manual-public-ip-logging-ok --dry-run

参数说明：

certonly 只签发证书
--email <email> 关联账号的额main地址
-d <domain> 证书的域名，注意这里*.domain.com是不能用于 domain.com 的所以如果你想一个证书全搞定就需要添加多个参数。
--manual 指定使用手动认证模式
--manual-auth-hook "/apps/server/nodejs/bin/node cert-manual-hook.js add"  指定手动认证模式下认证的关联脚本，我没有在写脚本而是直接使用node启动。这里需要注意很有可能node不在sudo的 PATH 中所以需要手动指定完整目录
--manual-cleanup-hook "/apps/server/nodejs/bin/node cert-manual-hook.js delete"   指定手动认证模式下验证后清理的关联脚本，因为认证的记录认证成功后就没用了，所以这里多加一个清理脚本从DNS上再删除。
--preferred-challenges dns 指定使用DNS方式验证。泛域名证书只能使用这个方式。
--manual-public-ip-logging-ok  可以跳过申请过程中询问是否允许记录申请人的公网IP。
--dry-run  以测试方式执行，不会实际签发证书，用来测试各个参数是否正确的好方法。成功后再次执行把这个参数删除就可以了。

重新签发

注意默认到期前30天内才允许再次申请，不够不会实际签发新证书
下面这个命令是测试命令，真是申请需要删除最后的 –dry-run。

1	sudo ./certbot-auto renew --manual-auth-hook "/apps/server/nodejs/bin/node cert-manual-hook.js add" --manual-cleanup-hook "/apps/server/nodejs/bin/node cert-manual-hook.js delete" --dry-run

参数说明：

renew 重新签发证书
--manual-auth-hook "/apps/server/nodejs/bin/node cert-manual-hook.js add"  指定手动认证模式下认证的关联脚本，我没有在写脚本而是直接使用node启动。这里需要注意很有可能node不在sudo的 PATH 中所以需要手动指定完整目录
--manual-cleanup-hook "/apps/server/nodejs/bin/node cert-manual-hook.js delete"   指定手动认证模式下验证后清理的关联脚本，因为认证的记录认证成功后就没用了，所以这里多加一个清理脚本从DNS上再删除。
--dry-run  以测试方式执行，不会实际签发证书，用来测试各个参数是否正确的好方法。成功后再次执行把这个参数删除就可以了。

插件项目地址：

NodeDDNS

Maven 安装jar到本地版本库

发表于 2019-06-05 | 更新于 2019-10-30 | 分类于技术文章

项目需要使用 oracle数据库，可是Oracle的jdbc驱动大部分的maven版本库上都没有或者都是旧版本的。但是为了一个驱动自己弄一个maven仓库又闲的有点重。于是本地安装的需求就来了。
下载到oracle的JDBC驱动 ojdbc6-12.1.0.2.jar 这个版本可以在JDK6、JDK7、JDK8下运行。再加一个JDK8下使用的 ojdbc8-12.2.0.1.jar 。

更多的JDBC下载地址请访问 Oracle下载页面

下载完成后把文件放到任意目录都可以，建议路径短点否则一会儿很麻烦，假设我们放到了D盘目录 D:\ojdbc6.jar

执行如下命令：

1	mvn install:install-file "-DgroupId=com.oracle" "-DartifactId=ojdbc6" "-Dversion=12.1.0.2" "-Dpackaging=jar" "-Dfile=D:\ojdbc6.jar"

安装成功后在需要使用的项目的pom.xml文件中加入下面内容就可以使用了。

<!-- Oracle 数据库驱动 -->
<dependency>
    <groupId>com.oracle</groupId>
    <artifactId>ojdbc6</artifactId>
    <version>12.1.0.2</version>
</dependency>

由于Wordpress越来越笨重，在习惯使用Markdown后发现几次升级Wordpress对Markdown支持不太友好。遂决定更换Hexo。
文章的迁移过程比较顺利。最后图库好像默认情况下无法支持。于是只好自己动手。
本文主要参考了 asdfv1929的实现过程，稍作修改。
同时还有两个同样衍生自asdfv1929的文章也在此鸣谢：
如何在Hexo中实现自适应响应式相册功能
 Hexo NexT 博客增加瀑布流相册页面

我的主要实现思路

增加一个page的类型 gallery
修改Next的模板针对gallery数据调用工具类重新渲染页面。使用minigride生成瀑布式布局
调用lazyload 和
增加模板支持新建文章时默认支持

实现过程

修改next模板内容支持 gallery 类型的页面。打开 themes/next/layout/_scripts 目录下的commons.swig文件。修改为如下内容。为了区分被注释部分是我添加的。主要目的是遇到gallery的页面添加minigrid.min.js 和 gallery.js 两个文件。

/*
{% if page.type ==='gallery' %}
{%
  set js_commons = [
    'utils.js',
    'motion.js',
    'minigrid.min.js',
    'gallery.js'
  ]
%}
{% else %} */

{%
  set js_commons = [
    'utils.js',
    'motion.js'
  ]
%}
/*
{% endif %}*/

找到 themes/next/layout 目录复制一份tag.swig文件。重命名为 gallery.swig .

{% extends '_layout.swig' %}
{% import '_macro/post-collapse.swig' as post_template %}
{% import '_macro/sidebar.swig' as sidebar_template %}

{% block title %}{{ __('title.tag') }}: {{ page.tag }} | {{ title }}{% endblock %}

{% block content %}

  {#################}
  {### GALLERY BLOCK ###}
  {#################}
  <div class="post-block tag">

    <div id="posts" class="posts-collapse">
      <div class="collection-title">
        <{% if theme.seo %}h2{% else %}h1{% endif %}>{#
        #}{{ page.tag }}{#
        #}<small>{{ __('title.tag') }}</small>
        </{% if theme.seo %}h2{% else %}h1{% endif %}>
      </div>

      {% for post in page.posts %}
        {{ post_template.render(post) }}
      {% endfor %}
    </div>

  </div>
  {#####################}
  {### END TAG BLOCK ###}
  {#####################}

  {% include '_partials/pagination.swig' %}

{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(false) }}
{% endblock %}

创建gallery.js 和 gallery.css 定义相册样式和相册生成脚本。
gallery.css 保存路径：themes/next/gallery/

.ImageGrid {width: 100%;max-width: 1040px;margin: 0 auto; text-align: center;}
.card {overflow: hidden;transition: .3s ease-in-out; border-radius: 8px; background-color: #ddd;}
.ImageInCard {padding：1px 1px 1px 1px}
.ImageInCard img {padding: 0 0 0 0;}
.TextInCard {line-height: 54px; background-color: #ffffff; font-size: 24px;}

gallery.js 保存路径：themes/next/source/js
这个文件我修改比较大，主要原因是我使用VSCode写markdowd，使用七牛云存储保存图片资源。快速免费的CDN还有图片处理功能很不错。VSCode中有很好用的插件可以实现图片黏贴的同时上传到七牛，所以我这里也省掉了处理本地图片的逻辑，数据源的读取也进行了调整。

gallery = {
    page: 1, //未来支持分页。
    offset: 100, //offset 用于设置照片数量的上限
    init: function () {
        //初始化数据
        var data = [];
        //需要相册功能的页面需要把图片贴进去，再生成的时候会生成到 gallery-data的 div中然后遍历图片生成数组。
        $(".gallery-data").find("img").each(function (index, item) {
            data.push({ "src": item.src, "imageName": item.alt });
        });
        this.render(this.page, data);
    },
    render: function (page, data) {
        var begin = (page - 1) * this.offset;
        var end = page * this.offset;
        if (begin >= data.length) return;
        var html, imgNameWithPattern, imgName, imageSize, imageX, imageY, li = "";
        for (var i = begin; i < end && i < data.length; i++) {
            imgName = data[i].imageName;
            imgSrc = data[i].src + "-gallery"; //此处添加了七牛的图片处理功能，可以动态压缩缩略图提高访问速度。同时添加水印。
            //这里 250 指的是图片的宽度，可以根据自己的需要调整相册中照片的大小，我这里固定了图片的大小不会有瀑布式交错的效果。
            li += '<div class="card" style="width:250px">' +
                '<div class="ImageInCard" style="height: 250px">' +
                '<a data-fancybox="gallery" href="' + imgSrc + '" data-caption="' + imgName + '">' +
                '<img src="' + imgSrc + '"/>' +
                '</a>' +
                '</div>' +
                '<div class="TextInCard">' + imgName + '</div>' +  //图片下显示文件名作为说明的功能
                '</div>'
        }
        $(".ImageGrid").append(li);
        $(".ImageGrid").lazyload();
        this.minigrid();
    },
    minigrid: function () {
        var grid = new Minigrid({
            container: '.ImageGrid',
            item: '.card',
            gutter: 12
        });
        grid.mount();
        $(window).resize(function () {
            grid.mount();
        });
    }
}
gallery.init();

修改文件 themes/next/layout/page.swig 这里要自改两段第一段是 block title 部分中 page.type === “gallery”的两行是新加的。

{% block title %}{#
  #}{% set page_title_suffix = ' | ' + title %}{#

  #}{% if page.type === 'categories' and not page.title %}{#
    #}{{ __('title.category') + page_title_suffix }}{#
  #}{% elif page.type === 'tags' and not page.title %}{#
    #}{{ __('title.tag') + page_title_suffix }}{#
  #}{% elif page.type === 'schedule' and not page.title %}{#
    #}{{ __('title.schedule') + page_title_suffix }}{#
  
  #}{% elif page.type === "gallery" and not page.title %}{#
    #}{{ __('title.photos') + page_title_suffix }}{#

  #}{% else %}{#
    #}{{ page.title + page_title_suffix }}{#
  #}{% endif %}{#
#}{% endblock %}

第二部分在 PAGE Body 部分，同样也是 elif page.type === ‘gallery’部分是新加的。这里的

{% elif page.type === 'schedule' %}
  {% include 'schedule.swig' %}
{% elif page.type === 'gallery' %}
  {### 生成好的图片会在这里所为数据源 ###}
  <div style = "display:none" class="gallery-data">{{ page.content }}</div>
  {### 下面这个是相册的真实容器，gallery.js会进行处理把数据源的图片添加到这里。###}
  <div class="ImageGrid"></div>
{% else %}
  {{ page.content }}
{% endif %}

修改 themes/next/_config.yml 找到 Lazyload和 Fancybox的配置项分别启动

*1. 启用 lazyload

1
2
3

# Vanilla JavaScript plugin for lazyloading images.
# Dependencies: https://github.com/theme-next/theme-next-jquery-lazyload
lazyload: true

启用 fancybox

# Fancybox. There is support for old version 2 and new version 3.
# Choose only one variant, do not need to install both.
# To install 2.x: https://github.com/theme-next/theme-next-fancybox
# To install 3.x: https://github.com/theme-next/theme-next-fancybox3
fancybox: true

找到vendors部分对应的 Lazyload和Fancybox配置好cdn

配置 fancybox

# Internal version: 2.1.5 & 3.5.7
# See: https://fancyapps.com/fancybox
# Example:
# fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
# fancybox: //cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.js
# fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
# fancybox_css: //cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.css
fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css

配置Lazyload

# Internal version: 1.9.7
# See: https://github.com/tuupola/jquery_lazyload
# Example:
# lazyload: //cdn.jsdelivr.net/npm/jquery-lazyload@1/jquery.lazyload.min.js
# lazyload: //cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js
lazyload: //cdn.jsdelivr.net/npm/jquery-lazyload@1/jquery.lazyload.min.js

配置结束

升级Let’s Encrypt 免费SSL证书

发表于 2019-04-23 | 更新于 2019-10-30 | 分类于技术文章

Let’s Encrypt 开始支持通配符证书。

2018 年 3 月 14 日，Let’s Encrypt 对外宣布 ACME v2 已正式支持通配符证书。这就意外味着用户可以在 Let’s Encrypt 上免费申请支持通配符的 SSL 证书。免去了在证书中添加一大串证书的问题。

什么是 Let’s Encrypt

Let’s Encrypt 是国外一个公共的免费 SSL 项目，由 Linux 基金会托管。它的来头不小，由 Mozilla、思科、Akamai、IdenTrust 和 EFF 等组织发起，目的就是向网站自动签发和管理免费证书。以便加速互联网由 HTTP 过渡到 HTTPS，目前 Facebook 等大公司开始加入赞助行列。 Let’s Encrypt 已经得了 IdenTrust 的交叉签名，这意味着其证书现在已经可以被 Mozilla、Google、Microsoft 和 Apple 等主流的浏览器所信任。用户只需要在 Web 服务器证书链中配置交叉签名，浏览器客户端会自动处理好其它的一切，Let’s Encrypt 安装简单，使用非常方便。本文将会详细介绍如何免费申请 Let’s Encrypt 通配符证书。

什么是通配符证书

域名通配符证书类似 DNS 解析的泛域名概念，通配符证书就是证书中可以包含一个通配符。主域名签发的通配符证书可以在所有子域名中使用，比如 .example.com、bbs.example.com。

申请步骤

下载工具

    wget https://dl.eff.org/certbot-auto
    chmod a+x certbot-auto
~~~    

2.  申请域名

sudo ./certbot-auto certonly –email 邮箱 -d 域名1 -d 域名2 –manual –preferred-challenges dns –server https://acme-v02.api.letsencrypt.org/directory


参数说明： 
  certonly 只签发证书
  --email 你的电子邮箱 
  -d 域名 你要申请证书的域名，泛域名使用 *.abc.com ，注意泛域名不可用于 abc.com所以你可能还需要再加一个 abc.com的域名。同一张证书可以申请多个。使用多个 -d 即可。不过后面认证信息也会有多次。 
  --manual 手动交互模式，需要中途中断添加一些域名解析设置。 
  --preferred-challenges dns 使用dns方式认证。此方式不需要你再配置本地服务器解析，访问路径等。只需要在DNS添加一条TXT解析记录即可。前面有几个 -d 就会需要配置几个。 
  --server 指定使用v02的服务器此服务器支持泛域名。默认是v01的。 
  
  执行命令后如果是第一次使用，会自动安装依赖项只需等待即可。安装好后会自动开始申请流程。中间需要用户交互的有三步：
  
    1. 用户条款，直接输入A同意通过 
    2. 询问用户是否记录申请电脑的IP地址。输入 Y 同意通过。 
    3. 开始需要添加DNS解析内容，没申请一个域名就要添加一次。按要求添加即可。 
    4. 最后一个添加完后，稍等个一分钟，按回车就会开始验证流程。验证通过后就会完成签发流程。成功后会有提示信息告诉你你的证书文件保存路径。 
  
  3.  重新签发
  由于证书有效期只有3个月所系需要定时重新申请。 只需要执行即可重新签发。不过签发前会检查现在证书的有效期，没过期的不会重新签发。

./certboot-auto renew
~~~

ORA-01950: no privileges on tablespace 'USERS'

发表于 2019-04-16 | 更新于 2019-10-30 | 分类于技术文章

错误代码：ORA-01950

创建用户后，重新指定了Tablespace，现象可以创建表但是无法插入数据。
原因没有分配配额解决方案：重新分配配额

不限制配额
ALTER USER user quota unlimited on tablespcae;
限制配额
ALTER USER user quota 100M on tablespcae;