前端开发用得着的nginx配置(场景)

前端的工作过程里，本地开发、提供测试环境，总得有个用着顺手的服务器软件，这个场景里nginx很流行。

介绍两个好用的配置项：rewrite try_files @xxxx

rewrite

比较常见，主要用于将带版本号的静态文件路径替换成本地文件路径

例如人人网发布文件路径里面包含一个a0000的版本号，通过下面这句配置就能将http://xnimg.cn/a0001/js/base.js换成http://xnimg.cn/js/base.js直接影射到本地目录结构中。

代码如下:

rewrite "^/a?([0-9]+)/(.*)" /$2 last;

try_files

尝试在本地的多个路径中查找需要的文件，如果依然没找到才会返回404。下面配合@xxx配置实现一个更方便的功能。

location @xxx

这样定义了一个可以供其他配置调用的“请求处理方法”（handler），结合try_files如果本地没找到自动去线上取回指定文件。

if ( $document_uri ~*"^/[ab]?([0-9]+)/(.*)"){
  set $no_version_path /$2;
}

location / {
  try_files $document_uri $no_version_path =404;
  error_page 404 = @online;
  log_not_found off;
}

location @online{
  proxy_pass http://$host:80/$request_uri
}

第一个if语句是一个匹配，把$2第二个分组值（去掉版本号的路径）保存到变量$no_version_path;

try_files的顺序：有版本号的路径、没有版本号的路径、如果404 调用@online；

@online中用$host,$request_uri这两个nginx变量拼出请求的文件路径直接代理请求到线上。

这样配置的服务器，只需要在本地存放你所关心的几个静态文件，其他不需要调试的文件全部代理到线上，省得每次花时间更新自己不关心的工程代码。

赞 (0)

相关推荐

  • 前端开发用得着的nginx配置(场景)

    前端的工作过程里,本地开发.提供测试环境,总得有个用着顺手的服务器软件,这个场景里nginx很流行. 介绍两个好用的配置项:rewrite try_files @xxxx rewrite 比较常见,主要用于将带版本号的静态文件路径替换成本地文件路径 例如人人网发布文件路径里面包含一个a0000的版本号,通过下面这句配置就能将http://xnimg.cn/a0001/js/base.js换成http://xnimg.cn/js/base.js直接影射到本地目录结构中. 复制代码 代码如下: re

  • 前端开发工具nvim来代替VSCode安装配置

    前端开发工具nvim来代替VSCode安装配置

    目录 1. Neovim是什么 2. 我们为什么需要Neovim 3. 如何配置Neovim 3.1 安装第三方终端 3.2 安装neoviem 3.3 快速启动neovim 3.4 创建neovim配置文件 3.5 配置字体 4. 终端模拟器之选 4.1 iterm2 4.2 alacrittty 4.3 kitty 4.4 Neovide 1. Neovim是什么 在此之前,我一直都是使用VSCODE或者WEB STORM编辑器的. 他们确实好用方便. 直到我得了腱鞘炎之后. 不得不寻求减少

  • nginx配置多个前端项目实现步骤

    最近一台服务器要配置多个前端项目,当然前后端分离就需要nginx来配置了. 单个项目还好说,如下修改nginx的nginx.conf配置文件 #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; pid /usr/local/nginx/logs/nginx.pid; events { worker

  • 写给前端的nginx配置指南基于docker所有配置秒级运行(最新讲解)

    写给前端的nginx配置指南基于docker所有配置秒级运行(最新讲解)

    目录 通过 docker 高效学习 nginx 配置 root 与 index location location 修饰符验证 location 优先级验证 proxy_pass add_header Cache CORS HSTS CSP 作业 三年经验的前端或多或少与 nginx 配置打过交道. nginx 的重要性不言而喻. 本篇文章以前端的视角,介绍下 nginx 的常见配置. 通过 docker 高效学习 nginx 配置 推荐一种高效学习 nginx 的方法: 在本地使用 nginx

  • Nginx配置参数中文说明详解(负载均衡与反向代理)

    PS:最近在看<<高性能Linux服务器构建实战>>的Nginx章节,对其nginx介绍的非常详细,现把经常用到的Nginx配置参数中文说明摘录和nginx做负载均衡的本人真实演示实例抄录下来以便以后查看! Nginx配置参数中文详细说明 #定义Nginx运行的用户和用户组 user www www; # #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; # #全局错误日志定义类型,[ debug | info | notice | war

  • 本地通过nginx配置反向代理的全过程记录

    本地通过nginx配置反向代理的全过程记录

    前言 Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO性能.我们在日常开发中使用到Nginx的主要有以下几个场景: Nginx作为http服务器 跨域请求 负载均衡 网络资源的动静分离 作为前端,我们主要是关注前两个场景 一.下载安装 点此下载 ,下载完成后解压,解压后文件如下: 解压(双击nginx.exe,双击后一个黑色的弹窗一闪而过) 找到nginx解压目录下,鼠标右键,找到git bash打开,输入命令start ./nginx.exe回

  • 利用njs模块在nginx配置中引入js脚本

    目录 前言 一 安装 NJS 模块 方法一: 动态加载 NJS 模块 方法二: 编译时增加模块 二 NJS模块运行环境的特点 三 NJS 模块支持的指令及对应的处理阶段 四 NJS 的简单用法示例 五 NJS 支持的指令 参考资料 总结 前言 由于许多 web 开发并不熟悉 lua 语言. 因此 nginx 推出了 njs 模块, 可以在 nginx 的配置中引入 js 脚本, 从而实现一些更复杂的 nginx 配置功能. 以下介绍 njs 模块的特性和用法 一 安装 NJS 模块 要求 ngi

  • 修改Nginx配置返回指定content-type的方法

    目录 一.我们遇到了什么问题? 二.解决方法 总结 一.我们遇到了什么问题? 今天前端的同学向我请教了一个Nginx服务配置的问题.我作为组里的底层开发,当然是对此类问题还是有信心的.因为我私下里对Nginx也是学习了一点,再不济通过丰富的google经验,解决此类配置问题也是不在话下的O(∩_∩)O.但是问题并没有我想象的那么简单,花费了我不少时间( ╯□╰ ).不多废话了,直接上需求. Nginx配置中一般根据conf/mime.types文件中配置来根据文件扩展名(文件扩展名对大小写不敏感

  • 前端将项目部署到服务器(Nginx)的完整步骤

    目录 一.准备环境 二.安装Nginx 1. 安装Nginx依赖 2.下载Nginx 3.解压下载好的Nginx 压缩包 4.编译安装Nginx 5.启动Nginx服务 三.操作步骤 1.使用Xshell连接服务器 2.上传静态资源文件 3. 配置Nginx 4. 重启Nginx服务 总结 我们在会开发项目的同时,也应该了解一下前端是如何部署项目的: 一.准备环境 1.服务器或者虚拟机(后端已经搭建好的,这里就不讲述如何搭建服务器了)2.Xshell 和 Xftp --> 存放静态文件和操作服务

  • nginx配置客户端保存cookie的实现

    目录 问题 解决 问题 昨晚在部署一个前人留下的dotnet core后台服务,在服务器上小心翼翼的修改前端代码,把ajax请求地址换成了localhost,登录.请求数据正常.但是把localhost换成ip地址,发现登录正常,cookie也返回了,但验证登录状态(向后台发送请求,验证携带的cookie)时报错了,一直401 这个程序的前端.后端都不是我写的,问了前端开发: 这说的没错,cookie确实返回来了,但再次请求时请求头没有携带cookie.奇了怪,然后就发现了: 根据提示,浏览器是

随机推荐