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

1. 背景

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

2. 踩过的坑

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

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

npm run serve

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

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

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

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。

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调用

curl -Iv 'https://xxxxxx.top/' 

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

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

    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。

server {
    listen 443 ssl;
}

2.4 最后附上nginx的配置文件

# 文件： /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却不能访问)