前端项目部署使用 nginx 详解

追光的栗子
324 阅读4分钟

nginx特点

  • 高性能：

    • 高并发连接处理能力：Nginx 使用异步事件驱动模型（如 epoll, kqueue 等），能够高效地处理大量并发连接。
    • 低资源消耗：与 Apache 相比，Nginx 在相同硬件环境下通常消耗更少的内存和其他系统资源。

  • 稳定性：

    • 运行稳定：在高负载情况下依然保持稳定运行，崩溃或错误的发生率较低。
    • 平滑升级：可以在不停止服务的情况下进行升级或配置更改。

  • 丰富的功能集：

    • 反向代理：可以作为反向代理服务器，将请求转发到后端服务器。
    • URL 重写：通过简单的配置即可实现复杂的 URL 重写规则。
    • 动态内容与静态内容分离：可以配置为只处理静态文件请求，而动态请求则交给后端应用服务器处理。

  • 高度可配置性：

    • 灵活的配置选项：可以根据需要定制各种配置选项，以适应不同的应用场景。
    • 容易管理：配置文件结构清晰，易于理解和修改。

  • 负载均衡：

    • 支持多种负载均衡算法，例如轮询、加权轮询、最少连接数等，可以帮助分散到多个后端服务器的流量。

  • 缓存功能：

    • 可用作HTTP缓存服务器，减少对后端数据库或应用服务器的压力。

  • 安全性：

    • 提供 SSL/TLS 加密支持，保障数据传输安全。
    • 可以设置访问控制、防火墙规则等来增强安全性。

  • 模块化架构：

    • 支持第三方模块扩展功能，比如 Nginx+Lua 使得开发者可以在 Nginx 中直接使用 Lua 脚本语言编写插件或处理逻辑。

  • 日志与监控：

    • 详细的访问和错误日志记录，便于故障排查和性能分析。
    • 支持实时监控和统计，方便管理员了解当前系统的状态。

nginx下载

点击下载 稳定版本，下载并解压完毕，可以看到nginx.exe就是我们的启动文件，conf就是配置文件，nginx.config中可以看到server的listen监听端口为80，启动可直接双击nginx.exe也可通过cmd命令行直接输入nginx.exe运行

image.png

image.png

接下来浏览器访问localhost:80,如下图显示，说明启动成功

image.png

nginx常用命令

# 停止
nginx.exe -s stop 

# 安全退出
nginx.exe -s quit 

# 重新加载配置文件
nginx.exe -s reload

# 查看nginx进程
ps aux|grep nginx

配置测试界面并访问

  1. 在html文件夹中新建 test1 和 test2 文件夹目录 ,里面放入对应html测试界面

image.png

  1. 在nginx进行配置 nginx.conf
server {
   listen       8001;
   server_name  localhost;

   location / {
       root   html/test1;
       index  index.html index.htm;
   }
}

server {
   listen       8002;
   server_name  localhost;

   location / {
       root   html/test2;
       index  index.html index.htm;
   }
}
  1. 浏览器访问 localhost:8001 和 localhost:8002 查看

部署项目页面并访问

  1. 在html文件夹中放入打包好的 dist 项目文件

image.png

  1. 修改配置文件，再重启(reload)
 server {
    listen       8066;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   html/dist;
        index  index.html index.htm;
}
  1. 浏览器访问localhost:8066查看，如果失败，可能是reload失败，再次reload就可

nginx其他配置

Nginx的主配置文件(conf/nginx.conf)按以下结构组织：

  • 全局块与Nginx运行相关的全局设置
  • events 与网络连接有关的设置
  • http 代理、缓存、日志、虚拟主机等的配置
  • server 虚拟主机的参数设置（一个http块可包含多个server块）
  • location 定义请求路由及页面处理方式

前端开发中经常会遇到跨域问题，nginx可以做代理轻松解决，事实上原理和cors一样

设置请求头:

server {
    location /api {
        proxy_pass http://backend_server;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'Origin, Content-Type, Accept';
    }
}

缓存问题：

proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=my_cache:10m max_size=1g inactive=60m use_temp_path=off;

server {
    location / {
        proxy_cache my_cache;
        proxy_pass http://backend;
        add_header X-Cache-Status $upstream_cache_status;
    }
}

https提升安全性：

server {
    listen 443 ssl;
    server_name example.com;

    ssl_certificate /etc/nginx/ssl/example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/example.com.key;

    location / {
        proxy_pass http://backend_server;
    }
}

请求接口代理：

server {
    # 对/api请求转发到8989端口下node.js服务
    location /api { 
        proxy_pass http://127.0.0.1:8989; 
    }
}

nginx全面配置

# 全局段配置
# ------------------------------

# 指定运行nginx的用户或用户组，默认为nobody。
#user administrator administrators;

# 设置工作进程数，通常设置为等于CPU核心数。
#worker_processes 2;

# 指定nginx进程的PID文件存放位置。
#pid /nginx/pid/nginx.pid;

# 指定错误日志的存放路径和日志级别。
error_log log/error.log debug;

# events段配置信息
# ------------------------------
events {
    # 设置网络连接序列化，用于防止多个进程同时接受到新连接的情况，这种情况称为"惊群"。
    accept_mutex on;

    # 设置一个进程是否可以同时接受多个新连接。
    multi_accept on;

    # 设置工作进程的最大连接数。
    worker_connections  1024;
}

# http配置段，用于配置HTTP服务器的参数。
# ------------------------------
http {
    # 包含文件扩展名与MIME类型的映射。
    include       mime.types;

    # 设置默认的MIME类型。
    default_type  application/octet-stream;

    # 定义日志格式。
    log_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for';

    # 指定访问日志的存放路径和使用的格式。
    access_log log/access.log myFormat;

    # 允许使用sendfile方式传输文件。
    sendfile on;

    # 限制每次调用sendfile传输的数据量。
    sendfile_max_chunk 100k;

    # 设置连接的保持时间。
    keepalive_timeout 65;

    # 定义一个上游服务器组。
    upstream mysvr {   
      server 127.0.0.1:7878;
      server 192.168.10.121:3333 backup;  #此服务器为备份服务器。
    }

    # 定义错误页面的重定向地址。
    error_page 404 https://www.baidu.com;

    # 定义一个虚拟主机。
    server {
        # 设置单个连接上的最大请求次数。
        keepalive_requests 120;

        # 设置监听的端口和地址。
        listen       4545;
        server_name  127.0.0.1;

        # 定义location块，用于匹配特定的请求URI。
        location  ~*^.+$ {
           # 设置请求的根目录。
           #root path;

           # 设置默认页面。
           #index vv.txt;

           # 将请求转发到上游服务器组。
           proxy_pass  http://mysvr;

           # 定义访问控制规则。
           deny 127.0.0.1;
           allow 172.18.5.54;          
        } 
    }
}
avatar
文章
阅读
粉丝