Mac实现IDEA和nginx前后端联调(新手向)

发布时间 2023-09-25 09:47:32作者: MarvelLee

前言

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

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

本地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所需的前后端联调的前置工作就已经完成了,剩下需要后端进行功能的实现。