前言

今天看黑马程序员的javaweb课程，看到前后端联调这一节犯了难。因为老师使用的开发环境是win10，而我用的是Mac，不想装虚拟机，就想着研究一下如何在Mac上实现前后端联调。因为之前只简单学了一下前端三大件，没有系统学过nginx，所以有什么问题请多包涵。

前提：获取老师的文件包我们需要的是“day10-SpringBootWeb案例”这个文件。

本地nginx

安装nginx

homebrew install nginx

配置nginx

1. 用vim打开该配置文件 vim /opt/homebrew/etc/nginx/nginx.conf
2. 粘贴如下配置

Last login: Mon Sep 25 07:53:17 on ttys000
➜  ~ vim /opt/homebrew/etc/nginx/nginx.conf
➜  ~ cd /opt/homebrew/etc/nginx
➜  nginx git:(stable) ls
fastcgi.conf           koi-win                scgi_params
fastcgi.conf.default   mime.types             scgi_params.default
fastcgi_params         mime.types.default     uwsgi_params
fastcgi_params.default nginx.conf             uwsgi_params.default
koi-utf                nginx.conf.default     win-utf
➜  nginx git:(stable) vim /opt/homebrew/etc/nginx/nginx.conf
    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       90;
        server_name  localhost;

        location / {
            root   html/tlias;
            index  index.html index.htm;
        }

        location ^~ /api/ {
                        rewrite ^/api/(.*)$ /$1 break;
                        proxy_pass http://localhost:8080;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

重点
listen 90指的是监听端口，到时候访问前端用的就是localhost:90。
而proxy_pass http://localhost:8080指的是转发端口，将IDEA的Tomcat服务转发给nginx。

将前端页面配置到nginx

将文件夹下 04. 前端环境/nginx-1.22.0-tlias/html 文件夹复制到/opt/homebrew/var/www/文件夹下，并改名tlias(不改名也可以，只是前面配置中的 root html/tlias需要把tlias换成你的文件夹的名字)

End

这时候nginx所需的前后端联调的前置工作就已经完成了，剩下需要后端进行功能的实现。