Windows中将vue项目部署在nginx上,并配置域名cdn加速

目录

nginx常用命令

下载nginx:

 cdn加速

配置SSl,https

方式一:阿里云官网中配置【强烈推荐】

方式二:

注意:


nginx常用命令

开启nginx服务 :

start nginx

关闭nginx服务,快速停止nginx,可能并不保存相关信息:

nginx -s stop

关闭nginx服务,完整有序的停止nginx,并保存相关信息:

nginx -s quit

重载nginx服务,当你改变了nginx配置信息并需要重新载入这些配置时可以使用此命令重载nginx:

nginx -s reload

下载nginx:

nginx: downloadhttp://nginx.org/en/download.html

Windows中将vue项目部署在nginx上,并配置域名cdn加速_第1张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第2张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第3张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第4张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第5张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第6张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第7张图片

    server {
       listen       8066;
       server_name  localhost;
       
       location / {
           root   html/dist/;                  #root 是dist文件夹所在目录
           index  index.html index.htm;        #默认访问路径
           try_files $uri $uri/ /index.html;   #如果没有使用vue-router页面路由,不需要配置try_files
       }
       
    #    location /api {
    #        rewrite  ^.+api/?(.*)$ /$1 break;
    #        proxy_pass http://xxx.xxx.xxx.xxx:端口;
    #    }

       error_page   500 502 503 504  /50x.html;
       location = /50x.html {
            root   html;
       }
    }

 使用域名访问如下:

这里本地配置一个域名。打开路径:

C:\Windows\System32\drivers\etc

Windows中将vue项目部署在nginx上,并配置域名cdn加速_第8张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第9张图片

 cdn加速

Windows中将vue项目部署在nginx上,并配置域名cdn加速_第10张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第11张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第12张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第13张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第14张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第15张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第16张图片

  • 建议您源站的内容不使用同名更新,而是采用版本号的方式同步。

    为了能准确找到更新前和更新后的源站内容,建议您源站的内容以版本号的方式同步,即更新源站内容时采用不同的名称。例如,采用img-v1.0.jpg、img-v2.1.jpg的方式命名。

  • 缓存过期时间会影响回源频率,建议根据实际业务需求设置资源缓存时长。

    缓存过期时间过短,会导致CDN频繁回源,增加源站的流量消耗;缓存过期时间过长,会带来数据更新时间慢的问题。

  • 缓存在CDN节点上的资源,由于热度低可能被提前从节点上删除。
  • CDN节点在收到源站响应的静态文件资源的时候,会按照阿里云CDN缓存规则及优先级来执行。

Windows中将vue项目部署在nginx上,并配置域名cdn加速_第17张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第18张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第19张图片 

配置SSl,https

方式一:阿里云官网中配置【强烈推荐】

Windows中将vue项目部署在nginx上,并配置域名cdn加速_第20张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第21张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第22张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第23张图片

 Windows中将vue项目部署在nginx上,并配置域名cdn加速_第24张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第25张图片

方式二:

在各自的服务器中代码配置,有点复杂

    server {
       listen   8023;

       location / {
           root   html/dist/;                  #root 是dist文件夹所在目录
           index  index.html index.htm;        #默认访问路径
           try_files $uri $uri/ /index.html;   #如果没有使用vue-router页面路由,不需要配置try_files
       }
       
    #    location /api {
    #        rewrite  ^.+api/?(.*)$ /$1 break;
    #        proxy_pass http://xxx.xxx.xxx.xxx:端口;
    #    }

       error_page   500 502 503 504  /50x.html;
       location = /50x.html {
            root   html;
       }
    }
	
	    # HTTPS server
    #
    server {
       listen       443 ssl;
       server_name  demo.lj0503.top;

       ssl_certificate      C:/Users/Administrator/Desktop/LjSoftware/nginx-1.20.2/ssl/7825196_demo.lj0503.top.pem;
       ssl_certificate_key  C:/Users/Administrator/Desktop/LjSoftware/nginx-1.20.2/ssl/7825196_demo.lj0503.top.key;

       ssl_session_cache    shared:SSL:1m;
       ssl_session_timeout  5m;

       ssl_ciphers  HIGH:!aNULL:!MD5;
       ssl_prefer_server_ciphers  on;

       location / {
	        proxy_pass          http://47.108.235.175:8023;
			proxy_redirect      http://    https://; 
			proxy_set_header    Host    $host;
       }
    }

Windows中将vue项目部署在nginx上,并配置域名cdn加速_第26张图片Windows中将vue项目部署在nginx上,并配置域名cdn加速_第27张图片

注意:

如果域名使用cdn加速后访问项目,项目没有更新,看看是否是没有刷新预热!!!

你可能感兴趣的:(Vue2,其他)