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

网友投稿 • 2022年10月9日 am10:58 • 云知识 • 阅读 0

一配置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;
}
}

原创文章，作者：网友投稿，如若转载，请注明出处：https://www.cloudads.cn/archives/4067.html

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

相关推荐

发表评论