Nginx 常用的基础配置(前端相关方面)

这篇具有很好参考价值的文章主要介绍了Nginx 常用的基础配置(前端相关方面)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

基础配置

隐藏 Nginx 版本信息

禁止ip直接访问80端口

启动 web 服务 (vue 项目为例)

PC端和移动端使用不同的项目文件映射

一个web服务,配置多个项目 (location 匹配路由区别)

配置负载均衡

SSL 配置 HTTPS


        最近很多朋友问到Nginx配置前端 web 服务,所以特地写了这篇文章;希望能够帮助更多的朋友。文章来源地址https://www.toymoban.com/news/detail-812835.html

基础配置

user                            root;
worker_processes                1;

events {
  worker_connections            10240;
}

http {
  log_format                    '$remote_addr - $remote_user [$time_local] ' '"$request" $status $body_bytes_sent ' '"$http_referer" "$http_user_agent"';
  include                       mime.types;
  default_type                  application/octet-stream;
  sendfile                      on;
  #autoindex                    on;
  #autoindex_exact_size         off;
  autoindex_localtime           on;
  keepalive_timeout             65;
  gzip                          on;
  gzip_disable                  "msie6";
  gzip_min_length               100;
  gzip_buffers                  4 16k;
  gzip_comp_level               1;
  gzip_types                  text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  gzip_types                    "*";
  gzip_vary                     off;
  server_tokens                 off;
  client_max_body_size          200m;

  server {
    listen                      80 default_server;
    server_name                 _;
    return                      403 /www/403/index.html;
  }

  include                       ../serve/*.conf;
}

隐藏 Nginx 版本信息

http {
  server_tokens         off;
}

禁止ip直接访问80端口

server {
  listen                80 default;
  server_name           _;
  return                500;
}

启动 web 服务 (vue 项目为例)

server {
  # 项目启动端口
  listen            80;
  # 域名(localhost)
  server_name       _;
  # 禁止 iframe 嵌套
  add_header        X-Frame-Options SAMEORIGIN;
  
  # 访问地址 根路径配置
  location / {
    # 项目目录
    root 	    html;
    # 默认读取文件
    index           index.html;
    # 配置 history 模式的刷新空白
    try_files       $uri $uri/ /index.html;
  }
  
  # 后缀匹配,解决静态资源找不到问题
  location ~* \.(gif|jpg|jpeg|png|css|js|ico)$ { 
    root           html/static/;
  }
  
  # 图片防盗链
  location ~/static/.*\.(jpg|jpeg|png|gif|webp)$ {
    root              html;
    valid_referers    *.deeruby.com;
    if ($invalid_referer) {
      return          403;
    }
  }
  
  # 访问限制
  location /static {
    root               html;
    # allow 允许
    allow              39.xxx.xxx.xxx;
    # deny  拒绝
    deny               all;
  }
}

PC端和移动端使用不同的项目文件映射

server {
  ......
  location / {
    root /home/static/pc;
    if ($http_user_agent ~* '(mobile|android|iphone|ipad|phone)') {
      root /home/static/mobile;
    }
    index index.html;
  }
}

一个web服务,配置多个项目 (location 匹配路由区别)

server {
  listen                80;
  server_name           _;
  
  # 主应用
  location / {
    root          html/main;
    index               index.html;
    try_files           $uri $uri/ /index.html;
  }
  
  # 子应用一
  location ^~ /store/ {
    proxy_pass          http://localhost:8001;
    proxy_redirect      off;
    proxy_set_header    Host $host;
    proxy_set_header    X-Real-IP $remote_addr;
    proxy_set_header    X-Forwarded-For
    proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
  }
  
  # 子应用二
  location ^~ /school/ {
    proxy_pass          http://localhost:8002;
    proxy_redirect      off;
    proxy_set_header    Host $host;
    proxy_set_header    X-Real-IP $remote_addr;
    proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
  }
  
  # 静态资源读取不到问题处理
  rewrite ^/api/profile/(.*)$ /(替换成正确路径的文件的上一层目录)/$1 last;
}

# 子应用一服务
server {
  listen                8001;
  server_name           _;
  location / {
    root          html/store;
    index               index.html;
    try_files           $uri $uri/ /index.html;
  }
  
  location ^~ /store/ {
    alias               html/store/;
    index               index.html index.htm;
    try_files           $uri /store/index.html;
  }
  
  # 接口代理
  location  /api {
    proxy_pass          http://localhost:8089;
  }
}

# 子应用二服务
server {
  listen                8002;
  server_name           _;
  location / {
    root          html/school;
    index               index.html;
    try_files           $uri $uri/ /index.html;
  }
  
  location ^~ /school/ {
    alias               html/school/;
    index               index.html index.htm;
    try_files           $uri /school/index.html;
  }
  
  # 接口代理
  location  /api {
    proxy_pass          http://localhost:10010;
  }
}

配置负载均衡

upstream my_upstream {
  server                http://localhost:9001;
  server                http://localhost:9002;
  server                http://localhost:9003;
}

server {
  listen                9000;
  server_name           test.com;

  location / {
    proxy_pass          my_upstream;
    proxy_set_header    Host $proxy_host;
    proxy_set_header    X-Real-IP $remote_addr;
    proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

SSL 配置 HTTPS

server {
  listen                      80;
  server_name                 www.xxx.com;
  # 将 http 重定向转移到 https
  return 301 https://$server_name$request_uri;
}

server {
  listen                      443 ssl;
  server_name                 www.xxx.com;
  ssl_certificate             /etc/nginx/ssl/www.xxx.com.pem;
  ssl_certificate_key         /etc/nginx/ssl/www.xxx.com.key;
  ssl_session_timeout         10m;
  ssl_ciphers                 ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  ssl_protocols               TLSv1 TLSv1.1 TLSv1.2;
  ssl_prefer_server_ciphers   on;
  
  location / {
    root                    /project/xxx;
    index                   index.html index.htm index.md;
    try_files               $uri $uri/ /index.html;
  }
}

到了这里,关于Nginx 常用的基础配置(前端相关方面)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Nginx缓存相关配置解析

    客户端需要访问服务器的数据时,如果都直接向服务器发送请求,服务器接收过多的请求,压力会比较大,也比较耗时;而如果在nginx缓存一定的数据,使客户端向基于nginx的代理服务器发送请求,可以有效节省时间。 Nginx缓存机制的作用 缓存能够提升性能,学会Nginx中如何使

    2024年02月21日
    浏览(43)
  • nginx 配置相关详解

    目录 Nginx的优点 Nginx简介 Nginx的优点 可以高并发连接 内存消耗少 成本低廉 配置文件非常易懂 稳定性高 内置有健康的检查功能 支持Rewrite重写 支持热部署 Nginx与Apache的对比 Nginx多进程工作原理跟设计 Nginx是如何实现高性能的 事件驱动模型 多进程机制 内存池 Nginx的安装配置

    2024年02月04日
    浏览(45)
  • nginx代理websocket相关配置

    map $http_upgrade $connection_upgrade {         default upgrade;         \\\'\\\' close; } # 转发ws location ^~ /ws {        # 后台准备的websocket地址端口        proxy_pass http://localhost:9092;        # 其他参数都一样        proxy_read_timeout 300s;        proxy_send_timeout 300s;        proxy_set_header  Host $

    2024年02月13日
    浏览(39)
  • 配置nginx常用命令

    在修改 Nginx 配置文件之后,您需要重新加载或重启 Nginx 以使配置更改生效。具体的命令和方式可能因操作系统和版本而有所不同。 以下是常见的重新加载或重启 Nginx 的方法: 1. 重新加载配置:    - 使用 `service` 命令(适用于 Ubuntu、Debian 等):      ```shell      sudo ser

    2024年02月10日
    浏览(37)
  • 前端必备 Nginx 配置

    Nginx (engine x) 是一个轻量级高性能的HTTP和反向代理服务器,同时也是一个通用 代理服务器 (TCP/UDP/IMAP/POP3/SMTP),最初由俄罗斯人Igor Sysoev编写。 基本命令 : 搭建好nginx服务器并启动过后,先看nginx默认配置,再介绍不同使用场景。 默认配置: Nginx 安装目录下, 复制一份`

    2024年02月07日
    浏览(32)
  • 前端nginx配置指南

    前端项目发布后,有些接口需要在服务器配置反向代理,资源配置gzip压缩,配置跨域允许访问等 配置文件模块概览 配置示例 反向代理 反向代理是Nginx的核心功能之一,是指客户端发送请求到代理服务器,代理服务器再将请求转发给后端的多个服务器中的一个或多个,并将后

    2024年01月16日
    浏览(32)
  • nginx配置前端不缓存

    修改nginx配置文件,直接在loacation模块下加入如下参数: 容器default.conf信息: 该方法修改完之后,并不能立刻清理客户端当前的缓存,因为客户端当前的html页面还没有缓存 “不缓存配置”,就是当前的\\\"no-cache, no-store\\\"配置,改配置还没有缓存到客户端的浏览器中,有点绕,但

    2024年02月12日
    浏览(48)
  • Nginx常用配置及代理转发

    tcp端口监听是唯一的,nginx要在哪个端口监听,是不能被占用的。配置一个server节点,就等于在server节点启动了一个tcp监听。 nginx同一个端口可以监听多个不同host的请求。配置文件中可以重复写同一个端口的server节点。 nginx默认读取配置文件路径下的nginx.conf,但是我们通常不

    2023年04月26日
    浏览(55)
  • nginx配置代理多个前端资源

    log: 背景 两套不同的前端使用同一个后端服务,前端使用的Nginx代理的dist包 前端 vue+elementui 后端 Python+flask Nginx代理设置 1.进入Linux机器,whereis nginx 查看Nginx安装位置  2.进到Nginx配置文件下 3.vim nginx.conf  通过多个server管理多个端口前端资源代理 #前端一,端口8080访问就可以

    2023年04月09日
    浏览(39)
  • nginx配置vue前端代理

    背景:做一个前后端分离的项目,我这里是vue3 + view + ts创建的前端项目,在前端配置跨域请求。 一、开发阶段 在vue.config.js中配置devserver的proxy进行代理请求配置,然后将所有请求改为/api开头的即可。但是这样配置只在开发阶段起作用。所以在nginx上部署的时候,需要再重新

    2024年02月03日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包