【个人开发】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后,即可粗暴解决。
nginx.conf
于是,http访问就正常了,开始配置ssl证书。

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

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

在这里插入图片描述
报错日志里面也仅仅是一堆乱码,很难描述。error.log

偶然搜到一堆帖子,提供一个分析思路,可以使用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却不能访问)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值