Nginx和vue编译后的存放位置的配置实践

 更新时间:2025年09月05日 11:14:42   作者:工欲善其事&必先利其器  
这篇文章主要介绍了Nginx和vue编译后的存放位置的配置过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Nginx和vue编译后的存放位置

/home/appadm/nginx/conf/目录下的nginx.conf文件中的内容如下:

worker_processes  auto;
events {
    worker_connections  65535;
}

http {
    include       mime.types;
    include conf.d/*.conf;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
}

主要是这句

include conf.d/*.conf; 依赖于conf.d目录下的 以.conf为后缀的文件

/home/appadm/nginx/conf/conf.d目录下的lc_rpt.conf文件内容如下:

server {
    listen 8001 ssl;
    server_name 11.x.x.5 192.168.x.2;
    
    ssl_certificate /app/sslkey/cert.crt;
    ssl_certificate_key /app/sslkey/key.key;
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout  10m;
    error_page 497 301 https://$http_host$request_uri;
    
    proxy_set_header Host $host:$server_port;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
    #重点 end
    #dex  index.html index.htm;
    
    location / {
  	    root   /app/lc_rpt_web/;
        index  index.html index.htm web/index.html;
  	    try_files $uri $uri/ /web/index.html;
    }
    #反向代理的作用
    location /oauthApi/ {
        proxy_set_header Host $host:$server_port;
        proxy_pass http://192.168.x.3:8003/;
    }
    
    #后端基础服务,反向代理的作用
    location /indicator-lpt/ {
  	    proxy_pass http://192.168.x.3:8002/indicator-lpt/;
    }
}

root /app/lc_rpt_web/; #前端的内容存放的路径,和下面的解压dist目录时存储的路径保持一致。

/app/lc_rpt_web/目录下的manager.sh脚步内容如下:


  • unzip /app/lc_rpt_web/dist.zip -d /app/lc_rpt_web/ – 这句是将上传到服务器上的vue编译压缩后的包,解压到/app/lc_rpt_web/目录下,在这个目录下生成dist目录,dist目录下就是最新的前端内容
  • rm -rf /app/lc_rpt_web/web_bak – 删除之前的备份
  • mv /app/lc_rpt_web/web /app/lc_rpt_web/web_bak – 将当前运行的前端内容转为备份
  • mv /app/lc_rpt_web/dist /app/lc_rpt_web/web – 将解压后的最新的前端内容转为运行的前端内容,仅有内容变化,无配置变化,无需重启nginx
  • rm -f /app/lc_rpt_web/dist.zip – 删除上传到服务器上的dist.zip

背景:

前端通过 npm run build:dev 后,执行相关的脚步后生成的编译后的结果是dist.zip

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • nginx lua防火墙防SQL注入配置

    nginx lua防火墙防SQL注入配置

    本文详细介绍了基于Nginx和Lua的防火墙配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-07-07
  • Nginx启动失败:端口80被占用问题的解决方案

    Nginx启动失败:端口80被占用问题的解决方案

    在Linux服务器上部署 Nginx 时,可能会遇到 Nginx 启动失败的情况,尤其是错误提示bind()to 0.0.0.0:80 failed,这种问题通常是由于端口80被其他进程占用导致的,本文将详细分析这一问题的原因,并提供多种解决方案,帮助你快速恢复Nginx的正常运行
    2025-02-02
  • 教你使用Nginx限制百度蜘蛛频繁抓取的问题

    教你使用Nginx限制百度蜘蛛频繁抓取的问题

    这篇文章主要介绍了使用Nginx限制百度蜘蛛频繁抓取的问题,百度蜘蛛对网站的抓取频率高和抓取量骤增导致服务器负载高,经常收到警告信息,每分钟允许百度蜘蛛抓取200次,超过频率限制的返回503,对Nginx限制蜘蛛频繁抓取相关知识感兴趣的朋友一起看看吧
    2022-01-01
  • 关于Nginx中虚拟主机的一些冷门知识小结

    关于Nginx中虚拟主机的一些冷门知识小结

    这篇文章主要给大家介绍了关于Nginx中虚拟主机的一些冷门知识,文中通过图文以及实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • nginx添加ssl模块的方法教程

    nginx添加ssl模块的方法教程

    这篇文章主要给大家介绍了关于nginx添加ssl模块的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习许吧。
    2017-12-12
  • 详解nginx 301跳转到带www域名方法

    详解nginx 301跳转到带www域名方法

    这篇文章主要介绍了详解nginx 301跳转到带www域名方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • nginx 1.0.0配ngx_cache_purge实现高效的反向代理

    nginx 1.0.0配ngx_cache_purge实现高效的反向代理

    nginx默认安装就会带有反向代理的功能,但想要更好的使用,还得配备frickle.com的ngx_cache_purge模块,用于清除指定URL的缓存。
    2011-06-06
  • Nginx服务器配置https安全协议的实现

    Nginx服务器配置https安全协议的实现

    HTTP是互联网中最常用的协议,用于从服务器传输超文本到浏览器,HTTPS是HTTP的安全版本,本文就来介绍一下Nginx服务器配置https安全协议的实现,感兴趣的可以了解一下
    2024-09-09
  • Nginx安全配置全过程

    Nginx安全配置全过程

    这篇文章主要介绍了Nginx安全配置全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Apache和Nginx的优缺点详解_动力节点Java学院整理

    Apache和Nginx的优缺点详解_动力节点Java学院整理

    Nginx和Apache一样,都是HTTP服务器软件,在功能实现上都采用模块化结构设计,都支持通用的语言接口。下面通过本文给大家分享Apache和Nginx比较 功能对比,感兴趣的朋友参考下吧
    2017-08-08

最新评论