首页 > 系统相关 >nginx 部署vue http、https

nginx 部署vue http、https

时间:2024-07-21 10:51:56浏览次数:13  
标签:vue http ssl server nginx Nginx root your

nignx配置文件

server {
    listen 80;
    server_name your_domain.com;

    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name your_domain.com;

    ssl_certificate /path/to/your/ssl/certificate;
    ssl_certificate_key /path/to/your/ssl/key;

    location / {
        root /path/to/your/vue/app;
        index index.html;
        try_files $uri $uri/ /index.html =404;
    }
}

try_files

try_files file... uri 这个语法的意思是:

  • try_files 后面可以定义多个文件路径和最后一个作为内部跳转的 uri,其中文件路径是和 aliasroot 两个指令合在一起构造而成
  • 多个文件以第一个找到的文件作为请求;
  • 而文件后面以"/"结尾,会检查目录是否存在;
  • 当文件都找不到时,就会去以最后一个uri进行内部跳转请求
  • 添加 =404 参数,这将在找不到文件时返回 404 错误,而不是进入内部重定向循环。

SSL

SSL 证书文件 (.crt 或 .pem 格式):

ssl_certificate "/etc/pki/nginx/server.pem";

SSL 证书密钥文件 (.key 格式):

ssl_certificate_key "/etc/pki/nginx/private/server.key";

root

在Nginx配置文件中,确保 root 指令指向正确的Vue.js应用程序目录:

访问权限问题,需要确保 Nginx 用户(通常是 nginxwww-data)对该目录有读取和执行的权限。

先检查 Nginx 进程运行的用户和组是否与你设置的权限一致

ps aux | grep nginx

查看输出中 nginx 进程的用户和组是否为 nginx:nginx。如果不是,你需要更新 Nginx 配置以使用正确的用户和组,或者移动项目到有权限的访问目录中。

由于 Nginx 进程通常以非 root 用户(如 nginx 或 www-data)运行,并且 /root 目录对其他用户是不可访问的,因此还是会遇到权限问题。

建议将你的静态文件移动到一个非 root 的目录下,例如 /var/www,并确保该目录和文件的权限设置正确。

使用以下命令设置权限:

chown -R nginx:nginx /path/to/your/vue/app;
chmod -R 755 /path/to/your/vue/app;

完成上述步骤后,请重启 Nginx 服务以应用更改:

nginx -t // 检查nignx 配置文件是否出错
systemctl restart nginx // 重启nginx

标签:vue,http,ssl,server,nginx,Nginx,root,your
From: https://www.cnblogs.com/niuben/p/18314244

相关文章

  • vue2-常用富文本编辑器使用介绍
    mavon-editor安装命令[email protected]全局配置修改main.js文件,添加如下配置importmavonEditorfrom'mavon-editor'import'mavon-editor/dist/css/index.css'Vue.use(mavonEditor)组件使用不含视频上传功能<el-row><......
  • 适用于 .NET 的现代化、流畅、可测试的HTTP客户端库:Flurl
    适用于.NET的现代化、流畅、可测试的HTTP客户端库:Flurl前言今天大姚给大家分享一个.NET开源(MITLicense)、免费、现代化、流畅、可测试、可移植的URL构建器和HTTP客户端库:Flurl。项目介绍Flurl是一个集现代性、流畅性、异步性、可测试性、可移植性于一身的URL构建器与HTTP客......
  • 基于java+ssm+vue高校生活服务平台vue(源码+LW+部署讲解)
    前言......
  • 基于java+ssm+vue的固定资产管理系统vue(源码+LW+部署讲解)
    前言......
  • 基于SpringBoot+Vue在线考试系统的设计和实现(源码+文档+部署讲解)
    博主介绍:全网粉丝10W+,CSDN博客专家、全栈领域优质创作者,3年JAVA全栈开发经验,专注JAVA技术、系统定制、远程指导,致力于企业数字化转型。研究方向:SpringBoot、Vue.JS、MyBatisPlus、Redis、SpringSecurity、MySQL、小程序、Android、Uniapp等。博主说明:本文项目编号......
  • https协议
    HTTPS(HypertextTransferProtocolSecure)协议是一种基于HTTP的安全通信协议,用于在计算机网络上安全地传输数据。它是在HTTP协议的基础上增加了SSL(安全套接层)或TLS(安全传输层协议)加密层,以确保数据在传输过程中的机密性、完整性和身份验证。以下是对HTTPS协议及其原理的详细......
  • springboot+vue前后端分离项目-项目搭建13-支付宝付款
    1.进入支付宝开放平台https://open.alipay.com/,选择网页应用开发,一路设置下一步创建完成,创建后生成、设置密钥,控制台可以看到创建的应用和沙箱环境  2.使用natapp创建公网访问地址,详见:https://www.cnblogs.com/xiexieyc/p/183126383.配置SDK,找到依赖,放到自己项目的pom......
  • Nginx系列-3 servername优先级和location优先级和常用正则表达式
    1.正则表达式和分组由于Nginx配置文件中经常出现正则表达式,因此本章节专门对常见的正则表达式进行简单介绍。[1]开始与结束^表示匹配输入字符串的开始$表示匹配输入字符串的结束[2]匹配次数?表示匹配0次或者1次+表示匹配1次或多次*表示匹配0从或多次{n}匹配n......
  • 基于SpringBoot+Vue的二手手机交易平台的详细设计和实现(源码+lw+部署文档+讲解等)
    文章目录前言详细视频演示项目运行截图技术框架后端采用SpringBoot框架前端框架Vue可行性分析系统测试系统测试的目的系统功能测试数据库表设计代码参考数据库脚本为什么选择我?获取源码前言......
  • HttpHeaders类详解,这一篇就够了
    目录一.总述二.案例展示三.set方法和add方法的区别1.set方法:2.add方法:区别总结:总结一.总述在Java中,HttpHeaders是一个用于表示HTTP请求或响应头的类,它属于java.net.http包,从Java11开始引入。这个类提供了一种方便的方式来操作HTTP消息头,包括添加、删除和获......