上海微网站建设百度指数属于行业趋势及人群

博主的 mac 是 m2。

结合以下两篇，成功配置前端环境。

macOS 配置苍穹外卖前端环境_macbook怎么nginx下载外卖-CSDN博客

苍穹外卖-Mac配置前端开发环境_sudo 启动 nginx 有什么区别-CSDN博客

一、安装nginx

我使用的是 homebrew，homebrew 的安装请自行搜索。

brew install nginx

我的安装目录是：/opt/homebrew/Cellar/nginx
配置文件在：/opt/homebrew/etc/nginx

二、启动 nginx

brew services start nginx

三、配置 nginx

修改nginx.conf文件，我的在/opt/homebrew/etc/nginx/nginx.conf

vim /opt/homebrew/etc/nginx/nginx.conf #使用 vim 进入 nginx.conf文件

确保在 命令状态（如果不在，按 esc 键）,键入 ggdG 快速删除原文件的内容

ggdG #快速删除文件中的所有内容

粘贴以下内容（配置文件配置的端口是80，有大佬说是为了不和后端的8080端口冲突）

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/;}# WebSocketlocation /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";}}
}

保存退出

重新加载配置文件

sudo /opt/homebrew/bin/nginx -s reload

四、复制文件到对应位置

查看版本，下面的路径要用到

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改为你自己的版本）

cp Downloads/html /opt/homebrew/Cellar/nginx/1.27.4 #1.27.4改为你自己的版本

五、访问网页

打开浏览器，导航栏输入

localhost
#或者
127.0.0.1

可以正常访问