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

相关推荐
青靴1 天前
关于NGINX,你了解多少?
运维·nginx
5pace1 天前
Mac Nginx安装、启动、简单命令(苍穹外卖、黑马点评前端环境搭建)
java·前端·nginx·macos·tomcat
Justin_191 天前
Galera Cluster部署
linux·服务器·nginx
苹果醋32 天前
学习札记-Java8系列-1-Java8新特性简介&为什么要学习Java8
java·运维·spring boot·mysql·nginx
qyhua2 天前
从零部署自维护版 Uptime Kuma:Node.js + PM2 + Nginx 全链路实战指南
运维·nginx·node.js
睡不醒的猪儿2 天前
nginx日志同步阿里云datahub后写入数据库
数据库·nginx·阿里云
耿雨飞2 天前
Nginx代理服务应用实战:HTTP代理模块、正向代理、反向代理与TCP/UDP代理详解
nginx
子燕若水3 天前
TLS/SSL加密通信过程全解
网络·网络协议·ssl
细节控菜鸡3 天前
【2025最新】APP开启了SSL无法被抓包,如何进行调试
网络·网络协议·ssl
安卓开发者3 天前
Docker与Nginx:现代Web部署的完美二重奏
前端·nginx·docker