如何实现Nginx本地搭载，及前后端交互。_本地配置nginx 前后端联调

作者：Cpp五条 | 2024-04-27 10:01:42

踩

本地配置nginx 前后端联调

1、本地环境准备

1、下载Nginx，安装到本地。具体安装可参考百度。下载地址nginx：下载；

安装到本地，打开具体文件如下图。

2、前端工作

1、需要前端人员将前端代码文件压缩后给后端开发人员。一般打包的前端文件命名是dist。
2、解压dist文件到本地。可以现在本地建好前端web文件夹。如何前端文件有多个可以根据实际需求建多个文件夹。如图实例。在D盘下建manage_web文件夹，又在下面建两个子文件夹。

将解压好的dist文件放在其中一个文件夹中。解压后具体文件如下。

3、后端工作内容。

1、首先，在本地Nginx文件中打开config文件。如图。

2、打开config文件后，修改里面的配置。具体如下。下代码包含如何搭载多个端口配置。


 
#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 {
        #监听端口，可改，也可以不改，即浏览器访问时的端口号。server_name，访问名称，
        可改，可不改。
        listen       80;
        server_name  localhost;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        #必须配置，该location{}代码配置的是在本地的前端页面路径，具体路径要到index页面下。
        location / {
                      #前端index页面路径（本地路径）
                      root   D:/manage_web/mangae/dist/dist;
                      index  index.html index.htm;
                }
        #必须配置 该location{}为配置后端项目运行路径，即Nginx需要代理的路径；
        /rights-cms-api/是配置文件XML中 servlet:context-path: /rights-cms-api （为自己项目路径的前缀）
        location /rights-cms-api/{
                 proxy_set_header Host $http_host;
                 proxy_set_header X-Real-IP $remote_addr;        
                 proxy_set_header REMOTE-HOST $remote_addr;        
                 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        
                         proxy_read_timeout  3600;
                         #需要代理的 本地项目启动地址
                 proxy_pass http://localhost:8096/rights-cms-api/;        
         }                
 
 
        #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;
        }
                
                        
 
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}
 
        # 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;
        #}
    }
        #搭载多个配置如下。具体意思如上。
         server {
        listen       900;
        server_name  localhost;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        location / {
                      root   D:/manage_web/web/dist/dist;
                      index  index.html index.htm;
                }
                
                location /rights-core-api/{
                 proxy_set_header Host $http_host;
                 proxy_set_header X-Real-IP $remote_addr;        
                 proxy_set_header REMOTE-HOST $remote_addr;        
                 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        
                         proxy_read_timeout  3600;
                 proxy_pass http://localhost:9098/rights-core-api/;        
         }                
 
 
        #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;
        }
                
                        
 
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}
 
        # 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;
    #    }
    #}
 
 
    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;
 
    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;
 
    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;
 
    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;
 
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
 
}

3、在idea上配置Nginx。如图。

按下图在nginx文件中找到如下文件，放在相应位置。

配置完成后，可以在idea上启动Nginx。

4、最后idea启动nginx的config文件里面的配置的项目服务。在谷歌浏览器上访问nginx的config文件中的地址。http://localhost:80 即可以实现前后端交互。

谢谢！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/496138