nginx静态资源的服务器配置方法

3119555200 发布于2022-09-15 06:56 / 767人阅读

一配置HTTP服务器

先进行动静分离，选用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;
}
}

二 nginx HTTP服务器

静态资源：后台不需要处理请求，数据不变

动态资源：后台需要处理数据后渲染到网页

进行网站静态化

upstream tomcat{
server localhost:8080;
}
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html;
}
location ~* \.(gif|jpg|jpeg|png|bmp|swf|css|js)$ {
root html;
}
location ~ *jsp$ {
proxy_pass http://tomcat; 
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

三反向代理

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

3.1 思路

为了避免了接口暴露的不安全，通过nginx实现域名的方式访问网站

· 访问网站/ [location /]，然后默认这个页面是首页

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

· 默认首页

在vue中首页编写多个接口，进行请求转发到 springboot项目(api 服务)

3.2 配置部署前后端分离项目

dockerCompose

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

nginx 主要配置

upstream apistream{
server api:8888;
}
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://apistream;
}
}

超融合服务器云服务器 nginx访问静态资源 nginx伪静态配置 jsp的静态资源 nginx的安装与配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127721.html

前端必须知道的Nginx的常用配置

摘要：负载均衡是通过后端引入一个负载均衡器和至少一个额外的服务器来缓解这类问题增加的服务器和原本的服务器提供相同的内容。负载均衡不需要前端进行配置，主要是服务端进行配置，前端稍作了解即可。 Nginx主要功能负载均衡反向代理动静分离配置https 负载均衡负载均衡是一门计算机网络技术，主要用来优化资源使用、最大化吞吐率、最小化响应时间、同时避免过载的目的。如果一个网站只有一台服...

tracymac7 2019-07-25 14:27 评论0 收藏0
服务器部署静态资源（通过nginx反向代理）

摘要：场景最近一直在做一个养老项目，符合时代发展，此项目为一个前后端分离的项目，对于后台的部署比较熟悉，说到前端的静态资源部署一时间有点蒙圈，后来查阅资料发现，其实很简单。场景最近一直在做一个养老项目，符合时代发展，此项目为一个前后端分离的项目，对于后台的部署比较熟悉，说到前端的静态资源部署一时间有点蒙圈，后来查阅资料发现，其实很简单。前提工具基础知识工具软件推荐本地与服务...

liujs 2019-08-26 11:39 评论0 收藏0
服务器部署静态资源（通过nginx反向代理）

摘要：场景最近一直在做一个养老项目，符合时代发展，此项目为一个前后端分离的项目，对于后台的部署比较熟悉，说到前端的静态资源部署一时间有点蒙圈，后来查阅资料发现，其实很简单。场景最近一直在做一个养老项目，符合时代发展，此项目为一个前后端分离的项目，对于后台的部署比较熟悉，说到前端的静态资源部署一时间有点蒙圈，后来查阅资料发现，其实很简单。前提工具基础知识工具软件推荐本地与服务...

klinson 2019-08-05 12:59 评论0 收藏0
nginx反向代理、动静分离、负载均衡

摘要：反向代理要说反向代理，我们就先要理解正向代理下面我们就谈谈正向代理和反向代理吧。客户端才能使用正向代理。反向代理总结就一句话代理端代理的是服务端。因此，动态资源转发到服务器我们就使用到了前面讲到的反向代理了。反向代理要说反向代理，我们就先要理解正向代理 ,下面我们就谈谈正向代理和反向代理吧。正向代理一个位于客户端和原始服务器(origin server)之间的服务器，为了从原始...

DTeam 2019-07-25 14:13 评论0 收藏0
nginx反向代理、动静分离、负载均衡

摘要：反向代理要说反向代理，我们就先要理解正向代理下面我们就谈谈正向代理和反向代理吧。客户端才能使用正向代理。反向代理总结就一句话代理端代理的是服务端。因此，动态资源转发到服务器我们就使用到了前面讲到的反向代理了。反向代理要说反向代理，我们就先要理解正向代理 ,下面我们就谈谈正向代理和反向代理吧。正向代理一个位于客户端和原始服务器(origin server)之间的服务器，为了从原始...

eechen 2019-06-21 15:12 评论0 收藏0
Nginx实践篇（1）- Nginx作为静态资源web服务 - 静态资源压缩

摘要：一静态资源服务静态资源类型类型文件类型浏览器端渲染图片视频文件等其他下载文件静态资源服务场景二静态资源核心配置文件读取是一种高效传输文件的模式设置为表示启动高效传输文件的模式。语法压缩开启压缩，可以加快资源响应速度，同时节省网络带宽资源。一、静态资源web服务 showImg(https://segmentfault.com/img/remote/1460000015873025?w...

张率功 2019-08-08 10:14 评论0 收藏0