nginx配置ssl实现https

环境说明

服务器系统:Ubuntu 18.04 64位

nginx:1.14

这篇文章主要是记录配置 https 的步骤,就不介绍申请ca证书的相关细节了

这里有免费的 ssl 证书:https://cloud.tencent.com/act/pro/ssl

我是西部数码的域名,在腾讯云申请的证书

申请证书并签发后,把证书先下载到本地

1、安装 nginx

1
2
$ apt-get update // 更新软件
$ apt-get install nginx // 安装nginx

2、配置 ca 证书

2.1 nginx 的安装目录为 /etc/nginx/,进入该目录,增加 cert 文件夹,把刚刚下载的两个文件上传到 cert 文件夹里

2.2 在 /etc/nginx/conf.d/ 文件夹下新增一个 blog.conf 的配置文件,名字随意,nginx 会读取 conf.d/ 文件夹里的所有配置文件

2.3 把下面的配置信息复制到 blog.conf 文件里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
server {
listen 443;
server_name xiaoxina.cc; // 你的域名
ssl on;
root /var/lib/jenkins/workspace/blog; // 你的网站源码目录
index index.html index.htm;
ssl_certificate /etc/nginx/cert/xiaoxina.cc.crt; // 证书地址
ssl_certificate_key /etc/nginx/cert/xiaoxina.cc.key; // 证书地址
ssl_session_timeout 10m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_session_cache builtin:1000 shared:SSL:10m;
ssl_buffer_size 1400;
add_header Strict-Transport-Security max-age=15768000;
ssl_stapling on;
ssl_stapling_verify on;
location / {
index index.html index.htm;
}
}

server {
listen 80;
server_name xiaoxina.cc; // 你的域名
rewrite ^(.*)$ https://$host$1 permanent;
}

配置完成后,检查一下 nginx 配置文件是否可用,有出现 successful 说明配置是正确的

1
$ nginx -t

配置正确后,重新加载配置文件使配置生效:

1
$ service nginx reload

Taro3 不使用 TypeScript 的情况下使用 taro-ui 时报错

最近有个小程序的项目,用 taro3 脚手架创建了项目,在组件里引入了 taro-ui 的组件之后,执行 yarn dev:weapp 一直报错,报错内容是无法识别 taro-ui 里面的 ts 语法

报错信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/chenlin/workspace/taro_test/node_modules/taro-ui/dist/weapp/components/swipe-action/index.tsx: Unexpected token, expected "{" (22:54)

20 | import AtSwipeActionOptions from './options/index'
21 |

22 | export default class AtSwipeAction extends AtComponent<
| ^
23 | AtSwipeActionProps,
24 | AtSwipeActionState
25 | > {
...

(node:6474) UnhandledPromiseRejectionWarning: [object Array]
(node:6474) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:6474) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

后来搜了下官方 issue,发现有人遇到过这个问题,原因是 taro-ui 2.x 跟 taro 3.x 不兼容,需要安装 3.x 的 taro-ui

issue 地址:https://github.com/NervJS/taro-ui/issues/1179

JS new Date() 报错 Invalid Date

还原事故现场:

接口返回的数据中,有个时间戳字符串,我拿到之后用 new Date() 实例化时间对象,结果控制台提示:Invalid Date

后来自己试了下,发现时间戳的格式需要是数字,才不会报错,所以转日期的时候加了个类型转换就ok了

1
2
3
4
5
let timestamp = "1515239514230"

new Date(timestamp); // Invalid Date

new Date(Number(timestamp)); // Sat Jan 06 2018 19:51:54 GMT+0800 (中国标准时间)

小程序 富文本 图片过大问题

最近的一个项目遇到了这个问题,这个问题也很好处理,一段代码就够了:

1
2
3
4
<!-- 以下是 uni-app 代码 -->
<rich-text
:nodes="(product.exchangeExplain || '').replace(/\<img/gi, '<img style=\'max-width: 100%;height:auto;display:block;\'')"
></rich-text>

给 img 设置一下最大宽度就可以了

CSS height:100%和height:100vh的区别

vh 是 CSS 中的相对长度单位,相对视口高度(Viewport Height),1vh = 1% * 视口高度

也就是说:height:100vh == height:100%

但是元素没有内容的时候,设置 height:100%,该元素不会被撑开,此时高度为0

但是设置 height:100vh,该元素会被撑开跟屏幕高度一致