TuzK1ss's Home

💻 Be humble and grateful but never satisfied.


  • Home

  • Archives

  • Search

macOS Nginx HTTPS 环境配置

Posted on 2020-08-28 Edited on 2020-08-29 Comments:

前置阅读: macOS 下 Nginx 安装及设置

近期在部分开发场景中,需要使用的 HTTPS 环境,故研究了下 macOS 下 Nginx HTTPS 环境配置。
( HTTPS 相关知识可自行了解 )

创建自定义 SSL 证书

之前在服务器上一直使用 Let’s Encrypt 的 Certbot 脚本一键安装,但是发现本地并无法正确申请证书和使用。
在搜索相关教程和对比之后,发现可以通过 OpenSSL 生成证书或直接使用 mkcert 简易生成证书。

本文主要针对 mkcert 如何创建证书及使用。

安装
使用 macOS 上的 Package Manager - HomeBrew 来安装 mkcert。

1
2
$ brew install mkcert
$ brew install nss # if you use Firefox

创建根证书
创建根证书 CA ( Certificate Authority,即证书颁发机构 ),可以运行以下命令

1
2
3
4
5
6
$ mkcert -install

# 成功安装后输出
# Using the local CA at "/Users/Tuzkiss/Library/Application Support/mkcert" ✨
# The local CA is now installed in the system trust store! ⚡️
# The local CA is already installed in the Firefox trust store! 👍

安装后使用 Keychain Access App 查看安装的证书,点击具体证书可以查看更详细信息:
root-CA-screenshot

创建自签名证书
例如需要针对 tuzkiss.com 、localhost 等域名生成自签名证书,则可以运行以下命令:

1
2
3
4
5
6
7
8
9
10
$ mkcert tuzkiss.com localhost 127.0.0.1

# 成功安装后输出
# Using the local CA at "/Users/Tuzkiss/Library/Application Support/mkcert" ✨
# Created a new certificate valid for the following names 📜
# - "tuzkiss.com"
# - "localhost"
# - "127.0.0.1"

# The certificate is at "./tuzkiss.com+2.pem" and the key at "./tuzkiss.com+2-key.pem" ✅

成功创建之后,会在该目录下生成如下两个文件:

  • 证书 tuzkiss.com+2.pem
  • 私钥 tuzkiss.com+2-key.pem

你可以手动跟改这两个文件名,例如:

1
2
tuzkiss.com+2.pem  -> Tuzkiss-SSL.pem
tuzkiss.com+2-key.pem -> Tuzkiss-SSL-Key.pem

或者可以直接通过 mkcert 中命令参数创建:

1
$ mkcert -cert-file Tuzkiss-SSL.pem -key-file Tuzkiss-SSL-Key.pem tuzkiss.com localhost 127.0.0.1

最终都会生成如下两个文件:
cert-and-key-screenshot

至此,自定义 SSL 证书均已创建完毕。

更多 mkcert 详细使用可查看:https://github.com/FiloSottile/mkcert

Read more »

VS Code 设置与技巧

Posted on 2019-07-16 Edited on 2020-08-28 Comments:

年中在 Apple 更新了 MacBook Pro 2019 之后,终于还是没忍住下单了 15 寸次顶配,于是手中的 MacBook Pro 13-inch Early 2015 理所当然的退休了。

之前一直使用 WebStorm 作为主力 IDE,但是鉴于之前 MacBook Pro 2015 性能有所欠缺,在后期的使用中存在些长时间使用卡顿的现象,所以准备在新 MacBook Pro 2019 上使用 VS Code 来作为新的 IDE。( 当然这一块选择上也各有所爱,不必强求。)

俗话说得好,工欲善其事,必先利其器。
所以,在这总结并记录下在使用 VS Code 编辑器中的一些设置与技巧。

相关环境及版本地址:
macOS Mojave 10.14.5 (18F132)
Visual Studio Code 1.36.1 (1.36.1)
Alfred 4 4.0.3

VS Code Screen Shot

Read more »

macOS Nginx 安装及设置

Posted on 2019-07-14 Edited on 2020-08-28 Comments:

安装 Nginx

使用 macOS 上的 Package Manager - HomeBrew 来安装 Nginx。

如果还未安装 HomeBrew, 可以自行登录官网安装。https://brew.sh/
或者在 Terminal 运行如下脚本: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

正式安装 Nginx 在 Terminal 中运行如下命令:

1
$ brew install nginx

等待安装完成之后,可以通过 $ nginx -h 来查看可使用命令,如下图:

nginx -h

运行以下命令开启 Nginx 服务

1
$ nginx

此时打开 http://localhost/ 或 http://127.0.0.1 查看是否 Nginx 是否正常运行。

nginx -s 中参数说明:

1
2
3
4
stop — fast shutdown
quit — graceful shutdown
reload — reloading the configuration file
reopen — reopening the log files

如果是其他 Linux 系统,安装类似。

Read more »

东欧九天五城四国游(二)

Posted on 2017-11-21 Edited on 2019-07-14 Comments:

现在是北京时间的2017年11月21日23:47:37,从东欧回来的第170天,拖了半年的游记,终于在今天又被我提上日程。

也许是最近有些莫名的小情绪无处诉说,所以才又想起来,写点东西好了。

到了🇩🇪柏林的第一天晚上,稍微休息了之后,就准备出去觅食。出门的第一个路口,看到一辆粉色的单车,瞬间有点少女心爆棚。让我想起那辆陪伴我度过美好岁月的死飞,也许一直莫名的对纯色的单车有好感。

img

Read more »

东欧九天五城四国游

Posted on 2017-06-07 Edited on 2019-07-16 Comments:

从东欧回来的第三天,北京世界的2017年06月07日23:39:50,休息了两天,终于在今天有空静下来好好回顾下这次旅行。

世界那么大,我想去看看。

Read more »

Webpack Workflow

Posted on 2017-02-21 Edited on 2019-07-16 Comments:

一、概述

开发语言: HTML + [email protected] + [email protected]
依赖项: 第三方组件flv.js + 第三方开源插件
构建工具: [email protected]

目的: 编译混淆打包源码及素材,并打包合并第三方文件成单个文件。

__ 问题:__
1、 如何对源码文件混淆打包,第三方文件仅打包,最终再将这两部分打包成单个文件?
2、如何对源码部分进行深度混淆?
3、 如何设计多种工作流适应多种开发调试环境?

__ 设想:__
1、定制webpack工作流,大致如下图:

Read more »

Player Loader - Flash与HTML5播放器统一加载方案

Posted on 2017-01-01 Edited on 2019-07-16 Comments:

一、架构

背景: 页面中需要使用Flash播放器或HTML5播放器,同时播放器会与页面进行某些交互。已知调用Flash播放器的方法和HTML5播放器的方法不一致,尽量少改动页面前端代码。

设想: 建立一个第三方播放器加载容器文件,通过播放器加载容器文件来加载Flash播放器或HTML5播放器,同时暴露出部分API与页面交互。如下图:

Read more »

2016前端学习(四)

Posted on 2016-01-27 Edited on 2017-02-15 Comments:

跨域

写过Ajax一般都知道,通过XHR实现Ajax通信的一个主要限制就是跨域安全策略

当然,有些开发中必然少不了跨域开发的问题,所以就出现了CORS

1、CORS

CORS (Cross-orgin Resource Sharing) 跨域资源共享。

CORS的基本思想是,使用自定义的HTTP头部信息让浏览器跟服务器沟通,从而决定请求或相应的成功或失败。

有那么两个跨域可能造成的危害

CSRF (Cross-site Resource Forgery) 跨站点请求伪造
XSS (Cross-site Scripting) 跨站点脚本

当然,目前主流的浏览器都支持XHR的CORS,但是需要服务端的配合修改。那么,机智的前端们总会想出写完美解决的方法,例如JSONP。

Read more »

2016前端学习(三)

Posted on 2016-01-26 Edited on 2017-02-15 Comments:

三、闭包生成唯一ID

1
2
3
4
5
6
7
8
var createUniqueId = function () {
"use strict";

var _id = 0;
return function () {
return _id ++;
};
};
1
2
3
4
5
6
var createId = createUniqueId();

createId(); // 0
createId(); // 1
createId(); // 2
createId(); // 3

上述代码挺简单的,但是要理解闭包原理还是蛮复杂的。

Read more »

2016前端学习(二)

Posted on 2016-01-25 Edited on 2017-02-15 Comments:

之前总结了基本类型的判断和检测,现在来总结下Javascript中对象的原型和继承

二、对象与原型

首先建立各一个简单的对象

1
2
3
4
5
6
7
8
var person = new Object();
person.name = 'tuzkiss';
person.age = 24;
person.job = 'Front-end developer';

person.sayHi = function () {
alert(this.name)
};

在ECMAScript中有两种属性,数据属性和访问器属性。

Read more »
12…4
TuzK1ss

TuzK1ss

TuzK1ss's Blog
31 posts
21 tags
© 2015 – 2020 TuzK1ss