一图了解nginx在项目中的使用
Nginx最重要的功能之一便是请求转发,从而解决了项目中的跨域问题。
如果前端是vue
后端对应的是springboot项目
两个项目一定是在不同的端口启动
那么则一定会发生跨域问题,所以接下来有请nginx登场
先来一张原理图
也就是说nginx服务器对外暴露一个端口 -> 9001端口
在vue中也就是直接把9001端口作为我们的base_API地址
这样在请求的过程中,nginx会根据路径去转发我们的请求
看一下我们的nginx的配置文件
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 81;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
server {
listen 9001;
server_name localhost;
location ~/eduservice/ {
proxy_pass http://localhost:8001;
}
location ~/eduoss/ {
proxy_pass http://localhost:8002;
}
}
}
最主要的配置是server中的我们写的配置
首先对外暴露nginx的端口号9001
服务名就是本地地址
然后location配置项 也就是写上对应的路径并且在每一个location中写好我们对应的转发地址,比如 路径请求地址中有eduservice的 则转发到 localhost:8001端口。如果请求路径中带有eduoss的请求则转发到我们的本地端口8002的地址中。
8001是一个springboot模块
8002也是一个对应的springboot模块
然后就是我们对应的前端的请求地址了
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://localhost:9001"',
})
没错我们需要把base_api的地址写成我们的nginx的地址,这样一来我们的跨域问题就成功解决了
打开前端项目瞅一眼
首先 首页请求用户信息的请求也是通过9001的端口然后转发给本地的8001端口
然后再看一下讲师列表
大家可以看到 请求地址是:
http://localhost:9001/eduservice/teacher/pageTeacherCondition/1/5
路径中包含了eduservice,所以nginx还是会帮我们把请求转发给我们本地的8001端口的服务
最后就是nginx的使用小技巧了
linux下使用nginx的教程有很多 我就不过多赘述,这里讲一下windows下如何启动nginx
- 解压我们从官网下载的nginx启动包
- 在此目录下打开cmd 然后输入nginx.exe 然后光标闪烁无报错则代表启动成功
3.关闭nginx指令
nginx.exe -s stop
一定要用这命令关闭nginx,因为nginx使用的是多路复用技术。
END
相关文章
- 彩虹女神跃长空,Go语言进阶之Go语言高性能Web框架Iris项目实战-用户系统EP03
- 购物车项目的初步(黑马程序员)
- FastAPI项目部署--nginx+gunicorn部署
- Thinkphp5学习019-项目案例-登录帐户使用异步提交
- 经验分享:如何开发一个成功的 NFT 项目,社区建设技巧
- Centos8下django项目部署 nginx+uwsgi的教程
- redis在项目中的应用详解数据库
- 状态Linux查看Nginx服务状态的简单方法(linux查看nginx)
- Linux下Nginx安装使用详细指南(linux安装nginx详细教程)
- 缓存Linux实现Nginx缓存的快速删除(linux删除nginx)
- 日志Linux删除Nginx日志:简易清理方式(linux删除nginx)
- 配置Linux下快速删除Nginx配置的技巧(linux删除nginx)
- Linux安装Nginx:一步一步指南(linux下载nginx)
- Nginx网站架构实战——08、nginx Rewrite语法详解
- Nginx主配置文件nginx.conf详解
- 清空项目如何清理Redis缓存(清除项目中redis缓存)
- 以Redis集群加JWT验证实现高效安全的项目架构(redis集群jwt)
- 在Nginx上部署ThinkPHP项目教程