Mac环境Nginx从安装到项目部署

const
476 阅读4分钟

前端项目开发完成后，需要将生成的静态文件部署到服务器上，以便用户能够访问和使用。而Nginx作为一个轻量级、高性能的Web服务器，能够提供静态文件的服务，并且支持反向代理、负载均衡等功能，适合用于前端项目的部署。使用Nginx进行部署可以提高网站的访问速度和并发能力，提供更好的用户体验。

下面的内容，是Nginx从0到1的安装部署过程：

（一）安装Homebrew

由于Homebrew是Mac上的一个包管理工具，它简化了软件安装过程，使我们可以通过简单的命令行操作来安装和管理软件。使用Homebrew安装Nginx可以避免手动下载和配置的复杂性。 所以，配置nginx之前，我们先安装Homebrew：

方式一：官网（brew.sh/）的安装命令：

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

方式二：使用国内镜像安装Homebrew

（Homebrew在国内使用时可能会遇到下载速度慢的问题。为了解决这个问题，可以通过使用国内镜像来加速Homebrew的安装和软件包的下载）

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)”

1.png

看执行结果，这里有两个问题需要解决：

  • 问题一：全局设置了http和https代理，需要移除
  • 问题二：安装Homebrew没有存放位置，需要手动创建

解决问题一：

  1. 查看全局配置项，执行命令： git config —global -l 1.png
  2. 取消全局https.proxy和http.proxy，并查看全局配置 1.png

解决问题二：

进入/usr/local目录，并创建Homebrew文件夹，执行以下命令：

  1. cd /usr/local
  2. sudo mkdir homebrew

上述两个问题解决完事儿，再次执行安装命令： 3.png 2.png 到这里，Homebrew就下载完了。

我们可以执行brew -v 查看他的版本号：

截屏2024-11-21 14.34.54.png 能看到版本号，说明Homebrew安装成功！

（二）Nginx的安装、启动、结束
  1. 安装nginx
1. brew install nginx
2. nginx -v

6.png 有版本号，说明安装成功！

  1. 启动nginx

执行命令：

nginx

截屏2024-11-21 15.18.12.png 在浏览器运行http://localhost:8080： （如下图所示，启动成功）
image.png

  1. 结束Nginx进程：
nginx -s stop

或者

nginx -s quit

如果nginx没有正常响应，还可以强制结束进程：

pkill nginx

或者

killall nginx
（三）查看Nginx存放位置

方式一：如果是通过Homebrew安装的Nginx，可用brew查看nginx信息（这将列出Nginx的信息，包括安装路径。）

brew info nginx

14.png

方式二：nginx -t

nginx -t

12.png

（四）修改nginx.conf文件配置

步骤一：在命令行中执行：（或者将nginx.conf文件以文本的形式编辑也可以）

vim /usr/local/etc/nginx/nginx.conf

步骤二：将打包好的dist文件路径配置到root中（在nginx.conf 文件的server中 的 location 的root），如下所示：

server {
    listen 8080;
    server_name localhost;
    #charset koi8-r;
    #access_log logs/host.access.log main;
    location / {
        root /Users/weitiantian/Desktop/vite-demo/vite-project/dist; // 如果一个请求的URI是/index.html时，web服务器将会返回服务器上的/Users/weitiantian/Desktop/vite-demo/vite-project/dist/index.html的文件。
        index index.html index.htm;
    }
}

步骤三：修改后重新加载配置文件

nginx -s reload
（五）在浏览器访问：http://localhost:8080/index.html

如果页面能正常访问，说明部署成功！

——————————————————————————————

踩坑指南：

在这个过程中，可能会遇到下面这个问题：（当然，没遇到的同学最好，遇到的同学可参考以下解决方案）

报错：nginx: [alert] kill(63221, 1) failed (3: No such process) 11.png

分析错误：

错误信息 nginx: [alert] kill(进程号, 1) failed (3: No such process) 表明Nginx在尝试发送信号给指定的进程时失败了。具体来说，kill(进程号, 1) 是一个系统调用，用于向指定的进程发送信号。这里的 1 表示 SIGHUP 信号，通常用于重新加载配置文件或平滑重启服务。然而，当Nginx尝试发送这个信号时，系统返回了一个错误码 3，表示“没有这样的进程”。

所以，可能是以下这几种原因引起的：

  1. 进程已不存在：Nginx试图发送信号的进程可能已经被其他操作终止，或者根本没有启动过。
  2. 配置文件错误：Nginx的配置文件中可能存在错误，导致Nginx无法正确识别或管理其进程。
  3. 权限问题：当前用户可能没有足够的权限来发送信号给指定的进程。
  4. 系统资源限制：系统可能因为资源限制（如进程数量限制）而无法创建新的进程。

排查问题 && 解决方案：

  1. 查找所有与nginx相关的进程信息，执行命令：
ps aux | grep nginx

截屏2024-11-22 01.32.15.png 观察输出：若Nginx正在运行，会看到与Nginx相关的进程信息；若没有任何输出，说明没启动nginx，需要我们执行nginx命令。【解决上述问题1】

  1. 如果哪个nginx进程是目前用不到的，执行下面命令终止掉：【解决上述问题4】
sudo kill -9 <进程ID>
  1. 执行nginx -t, 如果输出以下内容，说明nginx.conf配置没有问题【排除上述问题2】 截屏2024-11-22 01.56.34.png
  2. 还有一个是mac权限问题，需要我们在执行命令时，前面加sudo【解决上述问题3】
avatar
文章
阅读
粉丝