vue3 项目部署,Nginx配置https,重定向,详细流程
文章目录
- 前情提要
- 应用场景
- 安装
- 使用
- 实战解析
- 最后
前情提要
一个web项目完成后,我们需要打包部署上线,关于打包的实战在我的vite专栏里已经有过一些实践,今天我们来实践一些部署的过程,当然部署也可以由后端来完成;
应用场景
前端的部署,我们利用Nginx
❓什么是nginx
Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器 [13] ,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Рамблер)开发的,公开版本1.19.6发布于2020年12月15日。
其将源代码以类BSD许可证的形式发布,因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。2022年01月25日,nginx 1.21.6发布。
Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好。
简单了解过后,我们就来利用它的稳定性
、简单的配置文件
特性来进行使用;
安装
如果你们也喜欢用宝塔,去里面的软件商店安装即可;
使用
此时,nginx就已经安装好了,我们只需要点击nginx图标,点击配置文件选项即可使用ngnix了;
新手打开配置文件会发现里面的东西几乎不懂,那也没关系,看完这篇文章后你就具备了使用的能力,至于更好的使用,我推荐直接进入官方文档去学习:英文文档、中文文档
那接下来我通过分享配置文件,来解释一些点;
实战解析
刚刚安装完成后,你的内容肯定是非常简洁的,你只需要配置对相应的参数,并可以通过保存按钮,基本是没有问题的
user www www;
worker_processes auto;
error_log /www/wwwlogs/nginx_error.log crit;
pid /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;events{use epoll;worker_connections 51200;multi_accept on;}http{include mime.types;#include luawaf.conf;include proxy.conf;default_type application/octet-stream;server_names_hash_bucket_size 512;client_header_buffer_size 32k;large_client_header_buffers 4 32k;client_max_body_size 50m;sendfile on;tcp_nopush on;keepalive_timeout 60;tcp_nodelay on;fastcgi_connect_timeout 300;fastcgi_send_timeout 300;fastcgi_read_timeout 300;fastcgi_buffer_size 64k;fastcgi_buffers 4 64k;fastcgi_busy_buffers_size 128k;fastcgi_temp_file_write_size 256k;fastcgi_intercept_errors on;gzip on; //gzip 压缩开启gzip_min_length 1k;gzip_buffers 4 16k;gzip_http_version 1.1;gzip_comp_level 2;gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml;gzip_vary on;gzip_proxied expired no-cache no-store private auth;gzip_disable "MSIE [1-6]\.";limit_conn_zone $binary_remote_addr zone=perip:10m;limit_conn_zone $server_name zone=perserver:10m;server_tokens off;access_log off;server{listen 80; //监听默认80端口server_name xxxx.com; //你的网址rewrite ^(.*)$ https://xxx.com permanent; #http转https
}
server{listen 443 ssl; //监听443端口server_name xxx.com; //你的服务器地址ssl_certificate /www/server/nginx/cert/server.crt; //数字字安全证书位置ssl_certificate_key /www/server/nginx/cert/server.key; //密钥文件位置ssl_session_timeout 5m;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;ssl_prefer_server_ciphers on;location /neimenmenhuan {proxy_pass http://localhost:8080; //后端api地址}location / {root /www/server/phpmyadmin; //默认访问位置location ~ /tmp/ {return 403;}index index.html index.htm index.php; //启动主页,它会依次匹配try_files $uri $uri /index.html; }access_log /www/wwwlogs/access.log;} include /www/server/panel/vhost/nginx/*.conf;
}
以上是我的配置内容,配置时间:2022/11/14,因为如果时间点不同,随着软件更新,配置内容也会不同,如果你可以尝试按我的配置完成,那么你已经可以从浏览器访问了,但是如果是初学者,我还是希望知晓如下知识:
❓什么是https,为什么监听443端口
https协议默认的端口号是443,http协议默认端口号是80。http协议是明文传输协议,无法防止中间人盗取、篡改信息等,所以http网站存在众多安全风险隐患。而https存在不同于http的默认端口及一个SSL加密/身份验证层(在http与tcp之间),将能有效地进行身份验证和加密传输,保护网站安全。
❓什么是.crt文件
.crt文件名扩展名主要属于X.509数字安全证书(.crt)文件类型。数字安全证书是按照X.509 v3证书标准(IETF的RFC 5280),用于认证、连接和文件保护、加密和身份验证的唯一字节序列。证书文件使用以下扩展名:.crt、.cer、.der、.pem。
❓什么是.key文件
KEY文件通常被各种软件用于保存许可证密钥文件。KEY文件属于授权文件一种,可以以纯文本格式保存,但通常包含某种形式的加密密钥字符串,用于验证购买信息并注册软件。
❓这俩个文件如何获得
笔者这里是使用的华为云服务器,通过申请获得证书文件夹,过程这里不再赘述,相关过程中会有详细指导,解压后你会得到一个这样的文件夹:
我们把里面的 .crt, .key 文件复制到服务器里,在配置处配置路径即可,ngnix里的文件路径我们自定义即可,不必模仿,例如笔者的/www/server/phpmyadmin
目录里面是这样的;
完成后,记得要重启服务器!
好了,快去访问你的https网站吧
最后
vue3 项目部署,Nginx配置https,重定向,详细流程相关推荐
- Spring Boot 配置 HTTPS 的详细流程
大家好,周末空下来,再学习一些小知识吧! 准备把面试的项目上线,因为是小程序要求必须https,记录下完整流程和走过的坑 第一步 申请SSL证书 这里选了免费的 https://freessl.cn/ ...
- nginx 配置https 并解决重定向后https协议变成了http的问题
nginx 配置https 并解决重定向后https协议变成了http的问题 参考文章: (1)nginx 配置https 并解决重定向后https协议变成了http的问题 (2)https://ww ...
- 1 阿里云Nginx配置https实现域名访问项目
第一步:签署第三方可信任的 SSL 证书 证书可以直接在阿里云里面申请免费的ssl证书 登录阿里云账号,在上方搜索栏内搜索ssl,点击ssl证书(应用安全) 来到这个页面后点击购买证书 如图选择免费版 ...
- 阿里云slb配置https重定向后变为http
阿里云slb配置https重定向后变http问题解决 背景描述 问题 部署结构 网上搜索到的方案 方案一 方案二 原理剖析 Servlet容器重定向 Shiro 重定向 Spring MVC 重定向 ...
- windows服务器通过nginx配置https
一.需求描述 公司为了保证网络安全,所有系统访问网址需要采取https+域名(隐藏端口)的形式进行访问 二.解决思路 1.通过openssl生成秘钥.p10证书申请(或者CSR文件生成工具-中国数字证 ...
- Nginx配置https,反向代理多实例tomcat的操作记录
案例说明: 前面一层nginx+Keepalived部署的LB,后端两台web服务器部署了多实例的tomcat,通过https方式部署nginx反向代理tomcat请求.配置一如下: 1)LB层的ng ...
- linux location root访问文件夹404_如何使网站支持https访问?nginx配置https证书
购买SSL证书 要想使用https访问你的网址,首先得拥有颁发的SSL证书.我使用的是免费版,有效期为一年,过期后再重新申请. 申请SSL证书 购买后,可在搜索框输入证书关键字进入到控制台. 点击证书 ...
- 腾讯云Nginx配置https
1. 申请ssl证书(腾讯云为例) 登录腾讯云的控制台 https://console.cloud.tencent.com/ssl 申请免费证书 确认申请 如果是腾讯云的域名就选择自动DNS,不是的话 ...
- 【微信小程序】 apache配置https,nginx配置https
1,简介 最近在做一个微信小程序的项目,把我搞得焦头烂额,微信小程序默认必须使用https加密请求,现在配置好了,所以记录一下,如果你也遇到疑惑,希望下面的文章可以帮到你~~! 2,配置https必须 ...
最新文章
- Linux基金会网络策略副总裁Marc Cohn:OPEN-O遍及网络,尽享服务
- Tomcat的热部署和重新启动和重新部署的关系
- python模拟键盘输入视频_python教程-模拟鼠标和键盘输入
- C语言的运算符的优先级与结合性+ASCII表
- java不要无限循环_java – 看似无限循环终止,除非使用System.out.println
- mysql 事务 引擎_mysql引擎和事务
- 网络安全实验报告 第一章
- 图形界限命令在命令行输入_CAD骚操作,恭喜你又学会了几个重要的命令
- Uploadify 3.2 参数属性、事件、方法函数详解
- idea搭建java openCV环境
- linux性能分析top iostat vmstat free,Linux性能分析工具(vmstat,iostat,sar)
- 什么是云计算机技术,云计算的核心技术是什么
- matlab四元一次方程求解,求解四元一次微分方程组
- wave overfly
- 信号转换芯片-LT8911EXB MIPI CSI/DSI转EDP
- java大学生网上请假系统ssm框架
- python-字典列表集合字符串
- 如何关闭VS的DEP保护(数据执行保护)
- Rasa课程、Rasa培训、Rasa面试、Rasa实战系列之Docker Duckling服务部署
- MOVICS系列教程(三) RUN Module
热门文章
- 夺命雷公狗—玩转SEO---62---TF-IDF核心算法与运用
- 井字棋版本1.0(对抗人工智障)
- Tableau-各种各样的条形图(含详细操作步骤)
- 像农民一样高贵地活着
- Unity3D加载火炬之光资源
- oracle rowid and postgresql ctid
- 供配电系统之功率的运算
- ptp(precision time protocol)时钟同步
- 如何做一个基于JAVA校园运动场地预约系统毕业设计毕设作品(springboot框架)
- python统计单词出现次数并排序_7-4 jmu-JavaPython-统计文字中的单词数量并按出现次数排序 (25分)...