一图了解nginx在项目中的使用

Nginx最重要的功能之一便是请求转发，从而解决了项目中的跨域问题。

如果前端是vue

后端对应的是springboot项目

两个项目一定是在不同的端口启动

那么则一定会发生跨域问题，所以接下来有请nginx登场

先来一张原理图

也就是说nginx服务器对外暴露一个端口 -> 9001端口

在vue中也就是直接把9001端口作为我们的base_API地址

这样在请求的过程中，nginx会根据路径去转发我们的请求

看一下我们的nginx的配置文件

代码语言：javascript复制


#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模块

然后就是我们对应的前端的请求地址了

代码语言：javascript复制

'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端口

然后再看一下讲师列表

大家可以看到请求地址是：

代码语言：javascript复制

http://localhost:9001/eduservice/teacher/pageTeacherCondition/1/5

路径中包含了eduservice，所以nginx还是会帮我们把请求转发给我们本地的8001端口的服务

最后就是nginx的使用小技巧了

linux下使用nginx的教程有很多我就不过多赘述，这里讲一下windows下如何启动nginx

解压我们从官网下载的nginx启动包

在此目录下打开cmd 然后输入nginx.exe 然后光标闪烁无报错则代表启动成功

3.关闭nginx指令

代码语言：javascript复制

nginx.exe -s stop

一定要用这命令关闭nginx，因为nginx使用的是多路复用技术。

END

nginx 网站 vue.js

0 人点赞