威联通本地HTTPS访问?超简单教程!
虽然威联通自带了SSL功能,但是其仅针对分配的DDNS域名生效。在本地访问时,我们经常会遇到以下问题:
证书提示域名不正确
浏览器提示当前访问不安全
访问应用需要记端口号看完这篇教程后,你的威联通就拥有了以下能力:
本地启动HTTPS登陆,防止局域网数据被监听
为不同的应用启用不同的域名访问,浏览器密码会隔离存储
部分应用限制仅HTTPS访问。
以下是一个访问示例:
QNAP Web Admin:https://local.example.com
Qbit:https://qbit.local.example.com
Jellyfin:https://jellyfin.local.example.com
准备工作
为了实现本地HTTPS,你需要准备以下资源/工具
域名
威联通上安装了NGINX
可以在MYQNAP源找到 https://www.myqnap.org/
电脑上安装了certbot https://github.com/certbot/certbot
证书申请
我们使用certbot来申请域名证书,在本文的示例中,我们需要申请两个证书:
local.example.com
*.local.example.om
注意虽然 *.local.example.com 是通配符证书,但其不包含local.example.com。好在certbot可以在一次申请中添加多个域名所以也不是特别麻烦。
我们在终端中执行以下命令即可开始证书申请:
sudo certbot certonly -d '*.local.example.com' -d 'local.example' --manual --preferred-challenges dns
注意最后的 --manual 一定要加,因为我们是为本地签发证书,默认会走webroot方式进行验证,而证书服务器无法访问我们本地的80端口,无法验证。
命令执行完成后会得到以下输出

接下来我们需要将终端给出的 DNS TXT 记录添加至DNS服务器处。

DNS记录添加完成后,再回到终端回车继续申请(注意这里一定要多等几分钟,否则验证失败有概率需要重新添加解析)。申请成功后,我们会看到以下信息

接着我们前往给出的目录可以看到有四个文件,我们只需要关注cert.pem和privkey.pem两个文件即可。

由于目录中给出的文件是符号链接,我们需要使用 cp -L 命令将文件复制出来。

注意这里的privkey.pem是红色的,代表普通用户无访问权限,我们需要使用 sudo chmod 777 privkey.pem 命令修改其权限。
Nginx 配置
在进行Nginx配置之前,我们需要先将Nginx证书上传至威联通的任意目录下。接着,我们使用 ssh 连接至威联通,使用如下命令编辑,并将红框位置的路径改为自己的路径。不熟悉vim的用户,可以使用kod等可视化编辑器进行。
sudo vim /opt/NGinX/etc/nginx/nginx.conf

具体代码如下:
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 89;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /share/html;
index index.html index.htm;
#proxy_pass http://localhost:8443;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ .php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
location ~ .php$ {
try_files $uri =404;
#fastcgi_pass unix:/opt/PHPFPM/var/run/php-fpm.sock;
fastcgi_pass unix:/var/run/php-fpm.sock;
}
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /.ht {
# deny all;
#}
# another virtual host using mix of IP-, name-, and port-based configuration
#
server {
listen 80;
server_name *.local.example.com;
rewrite ^(.*)$ https://$host$1 permanent;
}
# HTTPS server
#
server {
listen 443 ssl;
server_name *.local.fwnas.com;
ssl_certificate /share/Container/container-config/nginx/cert/cert.pem;
ssl_certificate_key /share/Container/container-config/nginx/cert/privkey.pem;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://192.168.31.100:8443;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header Upgrade $http_upgrade;
}
# location / {
# root html;
# index index.html index.htm;
# }
}
}
配置保存完成后,我们在 App Center中停止并重新启用Nginx

威联通反向代理配置


我们根据需要,对每个应用配置专属的域名。来源端口号统一写8443,目标端口写应用真实的端口号。点击应用,我们就可以使用配置的域名直接访问了。来看一下效果吧~

作者声明本文无利益相关,欢迎值友理性交流,和谐讨论~
