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

时间：2025-01-17 20:40:41

目录

nginx常用命令

下载nginx：

 cdn加速

配置SSl，https

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

方式二：

nginx配置跨域

注意：

nginx常用命令

开启nginx服务 ：

start nginx

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

nginx -s stop

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

nginx -s quit

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

nginx -s reload

下载nginx：

nginx: downloadhttp:///en/

注意：通过双击启动的nginx服务，在关闭服务时需要在任务管理器中右键关闭，直接用nginx -s quit或者nginx -s stop是没有用的。这两个退出命令只对以start nginx启动的服务有效。

如果出现以下界面，说明是端口冲突了，中改下端口即可：

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

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

 使用域名访问如下：

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

C:\Windows\System32\drivers\etc

 cdn加速

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

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

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

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

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

 

配置SSl，https

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

 

方式二：

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

    server {
       listen   8023;

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

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

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

       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;
       }
    }

nginx配置跨域

在中加上以下代码即可

# 设置允许跨域的域，* 表示允许任何域，也可以设置特定的域
add_header 'Access-Control-Allow-Origin' '*';

# 允许的方法
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

# 允许的头信息字段
add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type';

# 缓存时间
add_header 'Access-Control-Max-Age' 1728000;

# 预检请求的处理
if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type';
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
    return 204;
}

注意：

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

相关文章