Mac环境安装Nginx指南实录

在Mac电脑上运行Nginx,最简便且推荐的方法是使用 Homebrew 安装和管理。以下是详细步骤指南:


✅ 一、安装 Homebrew(如已安装可跳过)

打开终端(Terminal),执行以下命令安装 Homebrew(Mac 上最常用的包管理工具):

bash 复制代码
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装完成后,执行:

bash 复制代码
brew --version

✅ 二、使用 Homebrew 安装 Nginx

bash 复制代码
brew install nginx

安装完成后,可查看版本确认:

bash 复制代码
nginx -v

默认安装路径为:

  • 配置文件:/usr/local/etc/nginx/nginx.conf(Apple Silicon 为 /opt/homebrew/etc/nginx/nginx.conf
  • 网页根目录:/usr/local/var/www(或 /opt/homebrew/var/www

✅ 三、启动 Nginx

bash 复制代码
brew services start nginx

或手动启动:

bash 复制代码
nginx

打开浏览器访问:

shell 复制代码
http://localhost:8080

如果看到 "Welcome to nginx!" 页面,说明运行成功。


✅ 四、常用命令

操作 命令
启动 nginxbrew services start nginx
重启 brew services restart nginx
停止 brew services stop nginx
重新加载配置 nginx -s reload
测试配置 nginx -t

✅ 五、修改配置示例

编辑配置文件:

shell 复制代码
nano /usr/local/etc/nginx/nginx.conf

添加一个简单的虚拟主机:

nginx 复制代码
server {
    listen 8080;
    server_name localhost;

    location / {
        root /usr/local/var/www;
        index index.html;
    }
}

保存后执行:

shell 复制代码
nginx -s reload

✅ 六、设置开机自启(可选)

shell 复制代码
brew services start nginx

Homebrew 会自动将其注册为 launchd 服务,实现开机自启。


✅ 七、卸载(如需要)

bash 复制代码
brew uninstall nginx

本次项目需要做的实操事情

如何把安装好的Nginx静态资源替换成宿主机本地绝对路径,省得记相对规则:

shell 复制代码
location / {
    root   /opt/homebrew/var/www;
    index  index.html index.htm;
}

使用nginx命令启动之后

shell 复制代码
nginx -t      # 语法检查
nginx -s reload

静态资源如何存放

将前端静态资源直接打包成dist文件夹,然后使用下述命令,复制的是"dist 里面的文件",而不是 dist 文件夹本身

shell 复制代码
# 进入 dist
cd dist
# 把内部所有文件复制到 nginx 根目录
cp -r * /opt/homebrew/var/www/

Nginx如何添加自定义请求头

shell 复制代码
server {
    listen       8080;
    server_name  localhost;

    location / {
        root   /opt/homebrew/var/www;
        index  index.html index.htm;
    }

    location /kb/ {
        proxy_pass http://localhost:10003;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Custom-Header custom-value;  # 添加自定义头
    }

    location /user/ {
        proxy_pass http://localhost:10003;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Custom-Header custom-value;  # 添加自定义头
    }

    location /assistant/ {
        proxy_pass http://localhost:10003;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Custom-Header custom-value;  # 添加自定义头
    }

    location /kl/ {
        proxy_pass http://localhost:10003;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Custom-Header custom-value;  # 添加自定义头
    }

    location /platform/ {
        proxy_pass http://localhost:10003;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Custom-Header custom-value;  # 添加自定义头
    }
}
相关推荐
林深现海13 小时前
Jetson Orin nano/nx刷机后无法打开chrome/firefox浏览器
前端·chrome·firefox
黄诂多13 小时前
APP原生与H5互调Bridge技术原理及基础使用
前端
前端市界13 小时前
用 React 手搓一个 3D 翻页书籍组件,呼吸海浪式翻页,交互体验带感!
前端·架构·github
万岳科技程序员小金13 小时前
多商户商城系统源码 + APP/小程序开发:技术架构与应用解
程序员·开源·源码·多商户商城系统源码·多商户商城小程序·多商户商城app开发·多商户商城平台开发
文艺理科生13 小时前
Nginx 路径映射深度解析:从本地开发到生产交付的底层哲学
前端·后端·架构
千寻girling13 小时前
主管:”人家 Node 框架都用 Nest.js 了 , 你怎么还在用 Express ?“
前端·后端·面试
C澒13 小时前
Vue 项目渐进式迁移 React:组件库接入与跨框架协同技术方案
前端·vue.js·react.js·架构·系统架构
全栈工程师修炼指南13 小时前
Nginx | stream content 阶段:UDP 协议四层反向代理浅析与实践
运维·网络·网络协议·nginx·udp
清山博客14 小时前
OpenCV 人脸识别和比对工具
前端·webpack·node.js
要加油哦~14 小时前
AI | 实践教程 - ScreenCoder | 多agents前端代码生成
前端·javascript·人工智能