Nginx 常用的基础配置(web前端相关方面)
文章出处:https://juejin.cn/post/7196859948554715195
基础配置
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;
}
}
链接:https://juejin.cn/post/7196859948554715195
来源:稀土掘金
Nginx 常用的基础配置(web前端相关方面)的更多相关文章
- HTML5零基础学习Web前端需要知道哪些?
HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...
- Web前端相关资源
Web前端相关 GRUNT: js task runner Sea.js: js模块化 knockout.js:MVVM开发前台,绑定技术 Angular.js: 使用超动感HTML & JS ...
- 零基础转行web前端,如何高效的去学习web前端
web前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML.CSS和JavaScript这些基础知识点,但学前端开发除了要学这些基础知识外,学员还要在这之上进行延伸和深入的去学,而且互联网时代不 ...
- nginx常用功能和配置
nginx常用功能和配置 1.nginx常用功能和配置 1.1 限流 1.2 压力测试工具--Ab 1.2.1安装 1.2.2 测试 1.2.3 返回值 1.3 limit_conn_zone 1.4 ...
- 零基础学习Web前端开发
目录 技术背景 开发环境 学习过程 参考资料 结束语 技术背景 什么是前端开发? 前端开发是创建Web页面或App等将界面呈现给用户的过程.通过使用 HTML,CSS,JavaScript,以及它们衍 ...
- 零基础学WEB前端-CSS
CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...
- 零基础转行web前端,要学习多久?需要掌握些什么?
web前端开发技术人才越来越吃香,而且web前端领域划分越来越细,对技术的需求越来越高,想学习web前端的人也是越来越多.那么,如何学习web前端知识?从哪开始?转型成为web前端工程师需要学些什么? ...
- Nginx简介与基础配置
何为Nginx? Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.最初是为了解决C10k的问题,由Igor ...
- web前端相关的书籍
一.Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备:前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScr ...
- centos7安装nginx并配置web前端环境。
1.安装nginx -sudo yum install nginx 2.启动nginx - systemctl start nginx 3.修改nginx路径配置,/etc/nginx/nginx.c ...
随机推荐
- axios-api,js结构化定义、调用业务api接口。
axios-api @no-996/axios-api基于 axios 可建立结构化实例的工具,有以下特点: 基于 axios,兼容 axios 的 api,可无缝的迁移使用. 内置了两种常用的请求终 ...
- OpenHarmony社区运营报告(2023年4月)
本月快讯 • 2023年4月9日,OpenAtom OpenHarmony(以下简称"OpenHarmony")3.2 Release新版本发布.相比一年前的OpenHarmo ...
- 一种基于DeltaE(CIE 1976)的找色算法Cuda实现
书接上文 一种基于DeltaE(CIE 1976)的找色算法 Delta E 是评估色彩准确度的重要测量指标.摄影师.影片编辑和平面设计师等创意专业人士都应重视这项标准,因其是选择专业级显示器的重要考 ...
- C# 中一维数组和二维数组详解
String[][]是二维数组.例如:String[][] str=new String[4][4],这是创建了一个有bai4行4列元素的数组. String[]代表一维数组.例如:String[] ...
- openGauss 2.1.0 闪回特性
openGauss 2.1.0 闪回特性 openGauss 2.1.0 于 2021 年 9 月 30 日发布,是 openGauss 的一个 Preview 版本,该版本生命周期仅为半年.该版本的 ...
- 开源相机管理库Aravis例程学习(一)——单帧采集single-acquisition
目录 简介 源码 函数说明 arv_camera_new arv_camera_acquisition arv_camera_get_model_name arv_buffer_get_image_w ...
- 如何巧妙应对iOS键盘难题?
前言 写过移动端的同学或多或少都遇到过软键盘带来的各种各样的问题,最典型的就是输入框被软键盘遮挡.fixed元素失效等问题,并且这些问题在iOS上的表现让人难以接受. webview的差异 在移动端上 ...
- 【直播回顾】Hello HarmonyOS系列应用篇完美收官!
6月15日晚上19点,Hello HarmonyOS系列应用篇第七期直播 <分布式应用开发>,在HarmonyOS社群内成功举行.随着本系列直播最后一课的完美收官,开发者们在逐渐掌握技术知 ...
- nginx重新整理——————http请求的11个阶段中的precontent阶段[十六]
前言 简单介绍一下precontent阶段. 正文 介绍一下这个阶段的几个模块. ngx_http_try_files_module 模块. syntax : tryfiles file... uri ...
- React中的key的作用
一.是什么 首先,给出react组件中进行列表渲染的一个示例: const data = [ { id: 0, name: 'abc' }, { id: 1, name: 'def' }, { id: ...