vue3 项目部署，Nginx配置https,重定向，详细流程

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

文章目录

前情提要
应用场景
- 安装
- 使用
实战解析
最后

前情提要

在这里插入图片描述
一个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;
}