博主的 mac 是 m2。
结合以下两篇,成功配置前端环境。
macOS 配置苍穹外卖前端环境_macbook怎么nginx下载外卖-CSDN博客
苍穹外卖-Mac配置前端开发环境_sudo 启动 nginx 有什么区别-CSDN博客
一、安装nginx
我使用的是 homebrew,homebrew 的安装请自行搜索。
bash
brew install nginx
我的安装目录是:/opt/homebrew/Cellar/nginx
配置文件在:/opt/homebrew/etc/nginx
二、启动 nginx
bash
brew services start nginx
三、配置 nginx
修改nginx.conf文件,我的在/opt/homebrew/etc/nginx/nginx.conf
bash
vim /opt/homebrew/etc/nginx/nginx.conf #使用 vim 进入 nginx.conf文件
确保在 命令状态(如果不在,按 esc 键),键入 ggdG 快速删除原文件的内容
bash
ggdG #快速删除文件中的所有内容
粘贴以下内容(配置文件配置的端口是80,有大佬说是为了不和后端的8080端口冲突)
bash
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
map $http_upgrade $connection_upgrade{
default upgrade;
'' close;
}
upstream webservers{
server 127.0.0.1:8080 weight=90 ;
#server 127.0.0.1:8088 weight=10 ;
}
server {
listen 80;
server_name localhost;
location / {
root html/sky;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# 反向代理,处理管理端发送的请求
location /api/ {
proxy_pass http://localhost:8080/admin/;
#proxy_pass http://webservers/admin/;
}
# 反向代理,处理用户端发送的请求
location /user/ {
proxy_pass http://webservers/user/;
}
# WebSocket
location /ws/ {
proxy_pass http://webservers/ws/;
proxy_http_version 1.1;
proxy_read_timeout 3600s;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "$connection_upgrade";
}
}
}
保存退出
重新加载配置文件
bash
sudo /opt/homebrew/bin/nginx -s reload
四、复制文件到对应位置
查看版本,下面的路径要用到
bash
ls /opt/homebrew/Cellar/nginx
我的是1.27.4

苍穹外卖的资料通过黑马程序员的公众号自己找一下可以找到,请自行搜索。资料里有多个文件,目前我只下载了 资料.rar。
解压 资料.rar
进入解压好的 资料-day01-前端运行环境-nginx-1.20.2
把里面的 html 拷贝,粘贴到 下载

把 html 文件夹复制一份到 /opt/homebrew/Cellar/nginx/1.27.4 (这里1.27.4改为你自己的版本)
bash
cp Downloads/html /opt/homebrew/Cellar/nginx/1.27.4 #1.27.4改为你自己的版本
五、访问网页
打开浏览器,导航栏输入
bash
localhost
#或者
127.0.0.1
可以正常访问
