学习Nginx的动机？：

产生问题及分析

在修改老项目中的echart模块时缺乏配置项文档的帮助，因为官网现在已经不提供echart3的文档了。于是在同事的资源分享下，我准备在本地运行该版本的文档项目，但是报错了！！！（该纯静态资源并且版本很老，并未使用任何编译工具webpack\gulp等）

报错如下：同源策略禁止读取位于 file:///Users/a111/Downloads/echarts3-docs-master/efe-meta/html/full-intro.html 的远程资源。（原因：CORS 请求不是 http）

这个问题是由于浏览器的同源策略（Same-Origin Policy）导致的。同源策略限制了一个网页从一个源加载的文档或脚本与来自另一个源的资源进行交互。

关于跨域的解决方法：

使用本地服务器：

将你的项目部署到一个本地服务器上，例如使用 Apache、Nginx 或 Python 的 SimpleHTTPServer。通过 http://localhost 或其他合适的本地域名来访问你的页面，而不是使用 file:/// 协议。这样,浏览器就不会对跨源请求进行限制。
浏览器插件：

有些浏览器插件可以临时禁用同源策略，用于开发和测试目的。注意，在生产环境中不要使用这些插件，因为同源策略是为了保护用户安全而设计的。
跨域资源共享（CORS）：

如果你有控制对方服务器的权限，可以在服务器端配置 CORS 头部，允许特定源的请求访问资源。在服务器端设置响应头中的 Access-Control-Allow-Origin 字段，将其设置为允许的域名。

简单分析了这几种方法，方法3不试用该项目，方法2没有挑战性。方法1 很合理～并且好玩，有意思。因此我选择了方法一，在本地搭建Nginx服务器并将该前端项目在此环境中运行。

根本动机

最近项目不太紧，可以缓缓了～想着学点别的东西，拓展下技术栈～

安装并运行Nginx服务

安装Nginx：

在控制台中执行指令，确保你的mac里已经安装了brew。

javascript 复制代码

brew install nginx

运行Nginx服务：

javascript 复制代码

brew services start nginx 或 sudo nginx

mac中默认运行的端口是8080，运行地址为：http://localhost:8080 也可以是你的ip地址+ 8080

如果想要修改端口号，那么我们需要先找到nginx配置文件。这是在隐藏文件夹中的文件，执行command + shift + . 可以查看隐藏文件。我的 mac 是 M1版本的，nginx配置位置为/opt/homebrew/etc/nginx/nginx.conf。

提供两种修改方式：

将配置文件在编辑器（vscode）中打开并进行修改。
在控制台中，通过指令修改。

javascript 复制代码

1. 打开文件 - 用vim 打开配置文件（sudo vim 文件路径）
 	sudo vim /opt/homebrew/etc/nginx/nginx.conf
2. 编辑 - 按下 i 键进行编辑
3. 保存并退出 - 按下esc键，并输入:wq

Nginx常用指令：

javascript 复制代码

nginx // 启动 Nginx
nginx -s stop // 停止Nginx，与 -s quit 类似，但等待连接完成的时间较短。如果连接时间较长，可能会被强制终止，因此不够优雅
nginx -s quit // 停止Nginx， 这会优雅地停止 Nginx 服务器，允许当前连接完成，然后关闭服务器
pkill -9 nginx // 强制停止 Nginx， 只有在无法通过正常方式停止 Nginx 时，才考虑使用该指令，比如在正常的停止过程中遇到问题或者服务器无响应的情况。
nginx -s reload // 重新加载配置
nginx -t // 测试配置文件语法，可以由此查看配置文件路径
nginx -v // 查看 Nginx 版本
ps aux | grep nginx // 查看 Nginx 进程, 列出所有正在运行的与 Nginx 相关的进程。

在执行nginx启动指令时，遇到端口占用问题怎么办？

nginx: [emerg] bind() to 0.0.0.0:8080 failed (48: Address already in use)

最直接办法就是杀死当前端口的进程，其次也可以更改 Nginx 监听的端口并重新加载配置。

常见步骤如下：

查找占用端口的进程：

使用以下命令查找占用指定端口的进程：
bash 复制代码
```
sudo lsof -i :<port>
```
将 <port> 替换为实际的端口号8080。此命令将列出占用该端口的进程及其 PID。你可以根据需要终止或重新配置占用端口的进程。
js 复制代码
```
COMMAND   PID   USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
nginx   25224   root    6u  IPv4 0xd69412a9b50ec98f      0t0  TCP \*:http-alt (LISTEN)
nginx   25309 nobody    6u  IPv4 0xd69412a9b50ec98f      0t0  TCP \*:http-alt (LISTEN)
```
输出结果显示我的8080端口已经被nginx服务占用了，有两个进程正在运行，进程id分别 25224、25309。

主进程： 主进程通常以root用户身份运行，负责启动和管理工作进程。主进程主要执行以下任务：
- 读取并解析配置文件。
- 打开监听的端口，并等待客户端的连接。
- 启动工作进程来处理客户端请求。
- 处理信号，如重新加载配置文件等。
工作进程： 工作进程通常以非特权用户身份（如nobody）运行，处理实际的客户端请求。每个工作进程都独立地处理一部分客户端连接，从而允许Nginx同时处理多个请求。可通过 worker_processes 配置工作进程数量。
更改 Nginx 监听的端口（可选）：

如果不想终止占用端口的进程，可以考虑修改 Nginx 的配置文件，将其监听的端口更改为其他可用的端口。打开 Nginx 配置文件，找到 listen 指令，并将端口号更改为其他值

javascript 复制代码

server {
        listen       8080; 
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
}

然后重新加载 Nginx 配置：

bash 复制代码

sudo nginx -s reload

停止占用端口的进程：

如果确定其他进程占用了 Nginx 需要使用的端口，并且这个进程是不必要的，可以考虑终止该进程。使用 kill 命令或其他适当的工具来终止该进程。

bash 复制代码

sudo kill -9 <PID>

bash 复制代码

将 `<PID>` 替换为实际的进程 ID，也就是我们之前查看的端口占用的进程id  25224、25309。  `sudo kill -9 25224 25309` \
执行该指令之后，再次运行sudo nginx。 那么我们新的nginx服务就启动起来了。

等待一段时间再尝试：

有时候端口占用是短暂的，可能是因为之前的 Nginx 进程尚未完全退出。在尝试重新启动 Nginx 之前，等待一段时间，然后再次尝试。

在Nginx服务中部署前端项目

常见配置信息

这里我只列举了部分配置信息，仅供参考～

javascript 复制代码

// server常见配置
listen - 指定监听的端口
server_name - 指定服务器名称：
location - 定义请求路径的处理规则
access_log - 配置访问日志
error_log - 错误日志：
root - 指定文档根目录
index - 指定默认文档
include - 引入其他配置文件

// server中location的常见配置
root - 指定文档根目录
alias - 别名配置，将请求的 URL 路径映射到服务器文件系统中的另一个路径
index - 指定默认文档
proxy_pass - 反向代理配置， 将请求转发给指定的后端服务器
expires - 设置缓存过期时间
add_header - 添加 HTTP 头部：
limit_req 和 limit_req_zone - 请求速率限制
gzip - 启用压缩
gzip_types - 指定允许压缩的 MIME 类型。

增加配置信息

在nginx文件夹中增加html前端资源文件夹，并将项目文件放入其中。以此类推，如果是vue、react等项目，可以将打包后的dist文件夹放入其中。
增加Nginx.conf配置信息。

javascript 复制代码

   server {
        listen       8080;
        server_name  localhost;
        // echart项目
        location /echart {
            alias   /opt/homebrew/etc/nginx/html/echarts3-docs/;
            index  index.html;
        }
        location / {
            root   html;
            index  index.html index.htm;
        }
    }

在浏览器中打开 http://localhost:8080/echart

容易遇到的问题

输入网址后，浏览器报403、404。针对这个问题，一般来说是路径配置的问题，我当时就因为路径结尾少了 \ 而导致访问异常，加上 \ 后，再执行 nginx -s reload即可。

任何异常问题，都可以通过查看异常日志进行分析嗷。我的异常日志路径如下： /opt/homebrew/var/log/nginx/error.log，仅供参考。

最后

这篇文章是我了解并使用Nginx的一个小小总结。如果你能一字不差地看到这里的话，你大概率能在本地运行Nginx服务并部署自己的前端项目了～

祝你有所收获～

Nginx服务部署前端纯静态项目--初体验

学习Nginx的动机？：

产生问题及分析

关于跨域的解决方法：

根本动机

安装并运行Nginx服务

安装Nginx：

运行Nginx服务：

Nginx常用指令：

在执行nginx启动指令时，遇到端口占用问题怎么办？

在Nginx服务中部署前端项目

常见配置信息

增加配置信息

容易遇到的问题

最后