面向前端开发人员的 Nginx

通过阅读我的博客文章来支持我的工作：面向前端开发人员的 Nginx

本文将以更简单的方式向前端开发人员解释 Nginx

Nginx 是一个功能强大且高效的 Web 服务器，主要解决了C10k 问题。它能够以极快的速度提供数据。我们还可以将 Nginx 用于其他目的，例如反向代理、负载平衡和缓存文件。

你可能会问我，作为一名前端开发者，为什么需要学习 Nginx。在现代前端开发的世界里，你在前端做的一切都会被编译成一个 HTML、JS 和 CSS 文件。因此，了解 Web 服务器在生产环境中如何处理你的文件将会非常有用。

Nginx 架构：

nginx 的基本架构由一个主进程及其对应的工作进程组成。主进程负责读取配置文件并维护工作进程，而工作进程则负责实际处理请求。

Nginx 是一个主从、事件驱动和非阻塞架构。

Master - Master 负责维护和验证配置。它还负责创建和终止工作进程。
工作进程- 工作进程负责处理共享套接字中的请求。每个工作进程都可以处理数千个请求，因为这些进程是单线程且非阻塞的
缓存加载器- 缓存加载器根据请求元数据使用磁盘中存在的数据更新工作实例。
缓存管理器- 缓存管理器负责验证和配置缓存过期

Nginx安装：

让我们看看如何在开发机器中安装 nginx。我正在使用 macOS。请随意在 linux、windows 中安装。

要在 Mac 上安装 nginx，您需要在机器上安装Homebrew 。

注意：对于 Ubuntu 或 Windows，请遵循此官方安装指南

$ brew install nginx
$ nginx -v

现在，您可以在屏幕上看到类似这样的内容

要检查 Web 服务器是否正在运行，请在浏览器中运行http://localhost:8080。您应该会看到 nginx 默认页面

瞧！我们已经在本地机器上成功安装了 nginx。

现在我们将了解如何使用 nginx 服务器部署 React 应用程序。我们将部署Shante Autsin的随机报价生成器应用程序

源代码：https://github.com/ShanteDenise/React-Random-Quote-Generator

使用 nginx 服务器部署应用程序

在机器上安装nginx之后，我们可以访问/usr/local/etc/nginx位置中的nginx配置文件，可以看到nginx中的文件和目录如下

在配置服务器之前，我们需要构建 React 应用程序并将文件移动到 nginx 目录。

在 macOS 中，nginx 的默认文件位置是/usr/local/var/www。您需要将构建移动到 nginx 文件夹。

$ sudo mv -v /<build directory> /usr/local/var/www/demo

之后，我们需要在nginx.conf文件中配置服务器

$ sudo nano nginx.conf

nginx 配置文件中主要有两个块。http和server块。nginx 配置文件只有一个 http 块，我们可以在 http 块内创建多个 server 块。我们将在另一篇文章中看到 nginx 的指令和块概念。

在配置文件中添加以下代码

http {
         ...
  server {
        listen       8080;
        server_name  localhost;
    location / {
            root   /var/www/demo;
            index  index.html index.htm;
        }

之后，您需要重新启动nginx服务。

$ sudo brew services restart nginx

最后，在浏览器中运行localhost:8080 ，你会看到应用程序运行类似这样的内容。

太棒了！！！..现在应用程序正在使用 nginx 网络服务器运行。

在下一篇文章中，我们将了解 nginx 的工作原理以及如何自定义 nginx 服务器。祝您编码愉快！