【个人开发】nginx域名映射及ssl证书配置踩坑记录

1. 背景

买了个域名,申请了ssl证书,买都买了,不得部署点东西。于是开始一堆踩坑之旅。

2. 踩过的坑

2.1 报错1:域名访问 Invalid Host header

项目是一个简单的vue项目,启动方式如下

shell 复制代码
npm run serve

但浏览器出现报错:域名访问 Invalid Host header。

问了kimi,提供了解决思路,问题在于项目配置本身,项目需要允许所有主机访问。

一开始尝试的解决方案如下

shell 复制代码
disableHostCheck: true

但出现报错

ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

  • options has an unknown property 'disableHostCheck'. These properties are valid:

...

原因在于disableHostCheck 在 Webpack 5 中已经被弃用,取而代之的是 allowedHosts 配置。

最后修改vue中的vue.config.js。

shell 复制代码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 21021,
    open: true,
    allowedHosts: 'all'
  }
}
)

2.2 报错2: 1899568#0: *6 stat() "/root/text-saver/dist/favicon.ico" failed (13: Permission denied),

由于使用npm run serve 虽然可以把项目启来,但是一些静态资源的访问路径存在问题。一步到位,把项目打成dist文件夹,使用nginx部署。

配置完nginx的conf文件后,访问不了,排查/var/log/nginx/error.log中的日志。

出现如下报错:

1899568#0: *6 stat() "/root/text-saver/dist/favicon.ico" failed (13: Permission denied),

又去问kimi,kimi提示是文件夹权限的问题。按照文件夹的授权思路,授权完还是有问题。因为不管是nginx部署,还是项目部署,都使用root。所以理论上不会有权限问题。

最后发现nginx的进程,所属用户是nginx。网上搜了一下,原因竟然在于nginx身上。

nginx.conf文件中,有一个user,默认写的是nginx,所以启动也是用nginx,所以存在访问权限的问题。

把它调整为root后,即可粗暴解决。

于是,http访问就正常了,开始配置ssl证书。

2.3 报错3: OpenSSL/1.1.1t: error:1408F10B:SSL routines:ssl3_get_record:wrong version number

按照教程流程配置ssl证书,配置完,网页无法加载。

报错日志里面也仅仅是一堆乱码,很难描述。

偶然搜到一堆帖子,提供一个分析思路,可以使用curl调用

shell 复制代码
curl -Iv 'https://xxxxxx.top/' 

于是可以发现问题所在OpenSSL/1.1.1t: error:1408F10B:SSL routines:ssl3_get_record:wrong version number。

但实际上nginx的配置中如下协议都版本都已经加上了。

shell 复制代码
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'TLS_AES_128_GCM_SHA256:TLS_AES_256_GCM_SHA384:TLS_CHACHA20_POLY1305_SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384';

最后发现是在监听443端口的时候少了个ssl。

shell 复制代码
server {
    listen 443 ssl;
}

2.4 最后附上nginx的配置文件

shell 复制代码
# 文件: /etc/nginx/conf.d/default.conf
server {
    listen 80;
    server_name www.xxx.top xxx.top;

    # 重定向所有 HTTP 请求到 HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    
    server_name www.xxx.top xxx.top;
    # 指定 SSL 证书和私钥文件的路径
    ssl_certificate /ssl/cert.pem;
    ssl_certificate_key /ssl/cert.key;

    # SSL 优化配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'TLS_AES_128_GCM_SHA256:TLS_AES_256_GCM_SHA384:TLS_CHACHA20_POLY1305_SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384';
    ssl_prefer_server_ciphers off;

    location / {
	root /root/text-saver/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

以上,重启,结束。

参考文档
Nginx: stat() failed (13: permission denied)
困扰我两天的问题(nginx配置好ssl证书,https却不能访问)

相关推荐
小吴-斌8 小时前
本地请求接口报SSL错误解决办法(Could not verify * SSL certificate)
网络·网络协议·ssl
站长朋友21 小时前
【邀请函】锐成信息 × Sectigo | CLM - SSL 证书自动化运维解决方案发布会
运维·自动化·ssl·clm·sectigo·47天ssl证书
惘嘫、冋渞21 小时前
CentOS 7 下 Nginx 编译后热重启方案
chrome·nginx·centos
码农-小林21 小时前
使用leaflet库加载服务器离线地图瓦片(这边以本地nginx服务器为例)
运维·服务器·nginx
阑梦清川1 天前
docker入门教程--部署nginx和tomcat
nginx·docker·tomcat
软件技术员1 天前
使用ACME自动签发SSL 证书
服务器·网络协议·ssl
せいしゅん青春之我1 天前
[JavaEE初阶]HTTPS-SSL传输过程中的加密
https·java-ee·ssl
任性不起来了1 天前
宝塔面板点击ssl证书报错:出错了,面板运行时发生错误!ModuleNotFoundError: No module named ‘OpenSSL‘
网络·网络协议·ssl
Andya_net1 天前
网络安全 | SSL/TLS 证书文件格式详解:PEM、CRT、CER、DER、PKI、PKCS12
安全·web安全·ssl
fruge2 天前
Ubuntu服务器已下载Nginx安装包的安装指南
服务器·nginx·ubuntu