目录
一、
nginx 作用
二、
nginx 静态HTTP
服务器配置
三、nginx HTTP服务器（动静分离–nginx+tomcat实现动静分离）
四、 反向代理—-使用proxy_pass
nginx 配置springboot+vue 前后端分离项目
1、思路：nginx 结合自身特性，本身一个静态资源的服务器，
2、通过dockerCompose+nginx配置实现部署spirngboot+vue前后端分离项目
一、nginx 作用
静态HTTP服务器
HTTP服务器（动静分离）
反向代理
负载均衡
二、nginx 静态HTTP服务器配置
Nginx本身也是一个静态资源的服务器，当只有静态资源的时候，就可以使用Nginx来做服务器，同时现在也很流行动静分离，就可以通过Nginx来实现。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# nginx 静态资源配置–静态服务器(也是最简单的配置)
server {
listen 80; # 监听端口号
server_name localhost; # 主机名
index index.html index.htm; # 默认页名称
root html; # 静态资源存放目录
location / { # 匹配路径
root html; # 文件根目录
index index.html index.htm; # 默认页名称
}
error_page 500 502 503 504 /50x.html; # 报错编码对应页面
location = /50x.html {
root html;
}
}
● url 和 uri:
网址是url，url=主机:端口+uri
uri 是资源，是location后面的匹配规则，即 location uri
● location uri，当规则匹配上了就到root目录找页面
?
1
2
3
4
location / { #匹配路径
root html; #文件根目录
index index.html index.htm; #默认页名称
}
● location 配置方法
location 配置可以有两种配置方法
① 前缀 + uri（字符串/正则表达式）
② @ + name
前缀含义
= ：精确匹配（必须全部相等）：大小写敏感
~* ：忽略大小写
^~ ：只需匹配uri部分
@ ：内部服务跳转
三、nginx HTTP服务器（动静分离–nginx+tomcat实现动静分离）
静态资源：数据不变，请求不需要后台处理；动态资源：模板，jsp、templates等，数据需要后台处理后渲染到网页，动态网页。
Nginx可以根据一定规则把不变的资源和经常变的资源区分开，对动静资源进行拆分，实现对静态资源的做缓存，从而提高资源响应的速度。这就是网站静态化处理的核心思路。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
upstream tomcat{
server localhost:8080;
}
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html;
}
# 所有静态请求都由nginx处理，存放目录为html
location ~* \.(gif|jpg|jpeg|png|bmp|swf|css|js)$ {
root html;
}
# 所有动态请求都转发给tomcat处理
location ~ *jsp$ {
proxy_pass
http://tomcat; # 代理转发
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
四、 反向代理—-使用proxy_pass
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
server {
listen 80;
server_name blog.yilele.site;
index index.html;
location / {
root /shan/blog/;
index index.html;
}
location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
root /shan/blog/;
index index.html;
add_header Access-Control-Allow-Origin *;
}
# 反向代理
location /api {
proxy_pass http://ip地址或域名:端口号;
}
}
nginx 配置springboot+vue 前后端分离项目
1、思路：nginx 结合自身特性，本身一个静态资源的服务器，
(1) 通过nginx实现域名的方式访问网站，以及把对数据的请求通过nginx反向代理转发给后端容器(后端服务)，避免了接口暴露的不安全
① 访问网站，首先习惯上访问网站的首页，通常访问路径是/ [location /]，然后默认页面是首页;
?
1
2
3
4
location / {
root /shan/blog/;
index index.html;
}
② 默认页面，首页需要像css、js、图片等静态资源，才能显示出样式、动态效果等，需要通过匹配规则[location ~*.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$]，指定root 到那个目录下获取这些静态资源。
?
1
2
3
4
5
location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
root /shan/blog/;
index index.html;
add_header Access-Control-Allow-Origin *;
}
③ 默认首页，需要有数据
在vue中首页实际上编写了很多个接口在请求数据，这些动态数据是来自 springboot项目(api 服务)，需要咱通过定义一个匹配接口路径的规则[location /api]，然后进行请求转发到 springboot项目(api 服务)
2、通过dockerCompose+nginx配置实现部署spirngboot+vue前后端分离项目
(1) dockerCompose 主要内容：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
version: “3”
services:
api:
image: api
container_name: api
expose:
– “8888”
nginx:
image: nginx
container_name: nginx
ports:
– 80:80
– 443:443
volumes:
– /mnt/docker/nginx/:/etc/nginx/
– /mnt/shan/blog:/shan/blog
links:
– api
depends_on:
– api
(2) nginx 主要配置：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
upstream apistream{
server api:8888;# 通过dockerCompose编排，服务名相当于域名
}
server {
listen 80;
server_name blog.yilele.site;
index index.html;
location / {
root /shan/blog/;
index index.html;
}
location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
root /shan/blog/;
index index.html;
add_header Access-Control-Allow-Origin *;
}
location /api {# 请求https://blog.yilele.site/api 会代理转发到 api:8888
proxy_pass http://apistream;
}
}
到此这篇关于nginx静态资源的服务器配置方法的文章就介绍到这了,更多相关nginx静态资源服务器内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！
原文链接：https://www.cnblogs.com/shan333/p/16431672.html
声明： 猿站网有关资源均来自网络搜集与网友提供，任何涉及商业盈利目的的均不得使用，否则产生的一切后果将由您自己承担！ 本平台资源仅供个人学习交流、测试使用 所有内容请在下载后24小时内删除，制止非法恶意传播，不对任何下载或转载者造成的危害负任何法律责任！也请大家支持、购置正版！ 。本站一律禁止以任何方式发布或转载任何违法的相关信息访客发现请向站长举报，会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。本网站的资源部分来源于网络，如有侵权烦请发送邮件至：2697268773@qq.com进行处理。
