最近公司的项目使用基于 Vue 的 Vux 框架，开发微信公众号 Web 端，部署至生产环境后发现一个问题。
同事使用安卓机访问公众号，图片迟迟不能加载，Web 页面显示空白。
经过排查发现是使用 Let's Encrypt TLS 证书导致的。
贴出错误的配置：
server {
listen 443 ssl;
listen [::]:80 ssl;
server_name maseratinetworkchina.com;
root /usr/share/nginx/html;
ssl_certificate /etc/letsencrypt/live/maseratinetworkchina.com/cert.pem;
ssl_certificate_key /etc/letsencrypt/live/maseratinetworkchina.com/privkey.pem;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
}
}
改为正确的配置：
server {
listen 443 ssl;
listen [::]:80 ssl;
server_name maseratinetworkchina.com;
root /usr/share/nginx/html;
ssl_certificate /etc/letsencrypt/live/maseratinetworkchina.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/maseratinetworkchina.com/privkey.pem;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
}
}
以下是cert.pem、chain.pem以及fullchain.pem的区别：
| 文件名 | 内容 |
|---|---|
| cert.pem | 服务端证书 |
| chain.pem | 浏览器需要的所有证书但不包括服务端证书，比如根证书和中间证书 |
| fullchain.pem | 包括了cert.pem和chain.pem的内容 |
| privkey.pem | 证书的私钥 |
