【个人开发】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却不能访问)

相关推荐
提笔忘字的帝国7 小时前
宝塔SSL自动续签
网络·网络协议·ssl
東雪蓮☆10 小时前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
sun032211 小时前
使用 javax.net.ssl.HttpsURLConnection 发送 HTTP 请求_以及为了JWT通信选用OSS的Jar的【坑】
http·.net·ssl
✎﹏赤子·墨筱晗♪13 小时前
基于Nginx实现反向代理、负载均衡与动静分离完整部署指南
运维·nginx·负载均衡
草履虫建模14 小时前
在 RuoYi 中接入 3D「园区驾驶舱」:Vue2 + Three.js + Nginx
运维·开发语言·javascript·spring boot·nginx·spring cloud·微服务
游九尘18 小时前
服务器都是用的iis, 前端部署后报跨域,不是用同一个服务器 是前端项目的服务器做Nginx转发,还是后端项目的服务器做Nginx转发?
服务器·前端·nginx
三坛海会大神55518 小时前
nginx中配置https详解:配置SSL/TLS证书
nginx·https·ssl
✎﹏赤子·墨筱晗♪20 小时前
Nginx 配置 SSL/TLS 全指南:从安装到安全强化
nginx·安全·ssl
m0_4646082620 小时前
Nginx SSL/TLS 配置
运维·nginx·ssl
小魏的马仔20 小时前
【企业微信】接口报错:javax.net.ssl.SSLHandshakeException
网络协议·企业微信·ssl