首页 > 系统相关 >Nginx 常用的基础配置(web前端相关方面)

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

时间:2023-05-17 13:44:49浏览次数:36  
标签:web http index 前端 server Nginx html proxy location

基础配置

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

 

标签:web,http,index,前端,server,Nginx,html,proxy,location
From: https://www.cnblogs.com/tiancai/p/17408506.html

相关文章

  • 前端-VUE
    工程化这里要从node.js开始。node.js要弄一个基于事件驱动、非阻塞I/O的的web服务,发现V8引擎+JavaScript很合适。这样Js就能直接写后端应用。然后发展成作为本地的运行容器(类似jdk),将js导入到了本地运行领域。以此位基础,发展出了生态环境,里面关系挺绕的,各种轮子,互相占位。......
  • 支持复制粘贴word图片的eWebEditor编辑器
    ​ 自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接......
  • 12、Nginx 常见模块 stub_status:Nginx状态页
    Nginx状态页基于nginx模块ngx_http_stub_status_module实现,在编译安装nginx的时候需要添加编译参数--with-http_stub_status_module,否则配置完成之后监测会是提示语法错误注意:状态页显示的是整个服务器的状态,而非虚拟主机的状态官方文档http://nginx.org/en/docs/http/ngx......
  • .NET + SignalR 的反向代理 websocket/http 数据隧道
    开源项目TuToDataTunnel:https://github.com/viordash/TuToDataTunnel,这个项目可以满足以下几个需求:使用一个公网IP地址和一个tcp端口,默认端口为80http。Websocket或http隧道传输、性能或可访问性。理想情况下,将自动选择最佳可用交换协议。同时通过隧道传输多个TCP和u......
  • 部署ChatGPT-web版
    记录1.GItHub找到所需项目(ChatGpt.Server是web版)https://github.com/239573049/ChatGpt.Desktop2.开发环境测试是否可以使用,可以使用在进行发布,放置服务器上或者本机也行3.NET7IIS发布问题解决4.打开网址进入设置填写Token(ChatGPT令牌)申请网址https://platform.openai.com......
  • VUE前端随笔计2
    又是小白记录问题的一次,老规矩,还是抄别人的代码来改。 在表标签中找到了一个点击事件定位代码,对比别人的,发现自己的删多了,把这个补充回去就行了,具体意思不太明白,大概是给这个模型里面填充这行数据。 ......
  • 简单聊两句前端模块化
    在前端开发中,模块化是一种将代码拆分为独立模块的开发方法。它通过将功能相似或相关的代码组织成可复用、可维护的模块,以提高开发效率和代码质量。模块化的主要目的是解决传统的JS开发存在的问题,例如全局命名冲突、代码复用困难、依赖管理混乱等。通过模块化,可以将代码拆分为独立......
  • Missing binding E:\server\dovip\buyer-pc-web\node_modules\node-sass\vendor
    errorin./src/components/Search.vue?vue&type=style&index=0&id=7cb41050&scoped=true&lang=scss&SyntaxError:Error:MissingbindingE:\server\dovip\buyer-pc-web\node_modules\node-sass\vendor\win32-x64-83\binding.nodeNod......
  • vite 使用 webworker
    不能和vite.config的server.origin配置一起使用。可以使用第三方插件。可以使用fetch请求和处理数据。  //////////////////App.vue<button@click="go">发送消息</button>//vite第一种用法:newURL+import.meta.urlvarmyWorker=newWorker(newURL('./......
  • wazuh告警通过webhook推送到飞书
    使用wazuh自带的shuffle脚本实现 步骤:1.进入:/var/ossec/integrations复制shuffle、shuffle.py两个文件,并重命名为:custom-feishu、custom-feishu.py备注:一定要按这个方式命名,自定义告警前,都要加custom2.编辑custom-feishu.py,修改generate_msg函数: 3.如果想看告警......