在 mac 上使用 Nginx 部署前端项目

前言

本文将介绍如何在 Mac 上使用 Nginx 部署前端项目，记录下每一步的过程，方便日后查看和学习。假设桌面上已经有一个构建好的 dist 文件夹，接下来将一步步完成部署。

安装 Homebrew

Homebrew 是 macOS 上的包管理工具，可以方便地安装和管理软件包。

Homebrew 安装 终端中输入以下命令：

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

检查 Homebrew 安装 终端中输入以下命令：

brew -v

如果显示类似 Homebrew <版本号> 的信息，说明 Homebrew 已经成功安装。

安装 Nginx

Nginx 安装 在终端中输入以下命令：

brew install nginx

验证 Nginx 安装 在终端中输入以下命令：

nginx -v

如果显示类似 nginx version: nginx/1.21.6 的信息，则说明安装成功。

Nginx 命令

启动 Nginx：在终端中输入以下命令：

nginx

这会启动 Nginx 服务，Nginx 默认端口为 8080 因此我们页面访问 http://localhost:8080看到以下内容说明 Nginx 启动成功。

停止 Nginx：在终端中输入以下命令：

nginx -s stop

重新加载 Nginx：在终端中输入以下命令：

nginx -s reload

当你修改了 Nginx 的配置文件（如 nginx.conf）后，可以使用此命令重新加载配置，使更改生效，而不必停止 Nginx 服务。

配置 Nginx

查找 Nginx 配置文件地址

使用 nginx -t 命令检查配置文件路径。

nginx -t

查找要部署文件地址

在 Nginx 配置中，root 指令用于指定静态资源文件的根目录路径。在终端中进入到项目所在的目录，并执行 pwd 命令，可以获取当前工作目录的绝对路径。

编辑 Nginx 配置文件

打开配置文件

# 输入上面所查到的 Nginx 配置文件地址
vim /opt/homebrew/etc/nginx/nginx.conf

在 server 中写入以下信息

# 这是一个简单的 Nginx 配置示例
server {

    listen 8080;  # 监听端口 8080
    server_name localhost;  # 设置服务器名称为 localhost

    location / {
        root /Users/xxxxxx/Desktop/dist;  # 设置静态文件的根目录路径
        index index.html index.htm;  # 设置默认首页为 index.html
    }
}

启动 Nginx

使用以下命令启动 Nginx 服务：

nginx

如果 Nginx 已经在运行，可以使用以下命令重新加载配置：

nginx -s reload

1. 打开浏览器，在地址栏输入 http://localhost:8080。
2. 如果一切正常，应该能够看到你的前端项目在浏览器中加载。