收藏！前端如何将项目部署到服务器（Nginx）-精简版

2025-04-24 22:51:03 1 阅读

前言

最近在公司部署项目时遇上了一点关于nginx的问题，于是就有了这篇，同样适合前端第一次接触需要启nginx访问的项目

主要适合小白朋友，nginx是什么，nginx有什么用，最后到nginx的实际应用，项目部署。

nginx

公司项目刚刚上线，用户量少访问量不大，并发量低，一个jar包启动应用就能够解决问题了。但是随着项目的不断扩大，用户体量大增加，一台服务器可能就无法满足我们的需求了（当初是一个人用一个服务器，现在是多人用一个服务器，时间长了服务器都要红温）。

于是乎，我们就会想着增加服务器，那么我们多个项目就启动在多个服务器上面，用户需要访问，就需要做一个代理服务器，通过代理请求服务器来做前后端之间的转发和请求包括跨域等等问题。

那么到这就不得不说一下nginx的反向代理了，正向代理指的其实就是比如我们通过VPN去请求xxx，这里就是因为用到了其他地方的代理服务器，这是一个从客户端到服务端的过程，然而反向代理其实就是，因为我们有多个服务器，最后都映射到了代理服务器身上，客户端最终访问的都是例如：baidu.com，但是事实上他底下是有多台服务器的。

既然他有多台服务器，每台服务器的性能，各种条件都是不同的，这里就要说到nginx的另一个能力—负载均衡，可以给不同的服务器增加不同的权重，能力更强的服务器可以增大他的负荷，减轻其他服务器的负荷

这就是大家常说的nginx:Nginx 是一个高性能的 HTTP 和反向代理服务器，它还支持 IMAP/POP3/SMTP 代理服务器。

nginx的特点：

高性能：
- 高并发连接处理能力：Nginx 使用异步事件驱动模型（如 epoll, kqueue 等），能够高效地处理大量并发连接。
- 低资源消耗：与 Apache 相比，Nginx 在相同硬件环境下通常消耗更少的内存和其他系统资源。
稳定性：
- 运行稳定：在高负载情况下依然保持稳定运行，崩溃或错误的发生率较低。
- 平滑升级：可以在不停止服务的情况下进行升级或配置更改。
丰富的功能集：
- 反向代理：可以作为反向代理服务器，将请求转发到后端服务器。
- URL 重写：通过简单的配置即可实现复杂的 URL 重写规则。
- 动态内容与静态内容分离：可以配置为只处理静态文件请求，而动态请求则交给后端应用服务器处理。
高度可配置性：
- 灵活的配置选项：可以根据需要定制各种配置选项，以适应不同的应用场景。
- 容易管理：配置文件结构清晰，易于理解和修改。
负载均衡：
- 支持多种负载均衡算法，例如轮询、加权轮询、最少连接数等，可以帮助分散到多个后端服务器的流量。
缓存功能：
- 可用作HTTP缓存服务器，减少对后端数据库或应用服务器的压力。
安全性：
- 提供 SSL/TLS 加密支持，保障数据传输安全。
- 可以设置访问控制、防火墙规则等来增强安全性。
模块化架构：
- 支持第三方模块扩展功能，比如 Nginx+Lua 使得开发者可以在 Nginx 中直接使用 Lua 脚本语言编写插件或处理逻辑。
日志与监控：
- 详细的访问和错误日志记录，便于故障排查和性能分析。
- 支持实时监控和统计，方便管理员了解当前系统的状态。

nginx下载

nginx.org/ 大家自行下载，我下载的是一个稳定版本，以防万一。下载完毕之后大家自行解压即可（默认大家是windows系统），解压完毕之后，可以看到nginx.exe就是我们的启动文件，conf就是配置文件，nginx.config中可以看到server的listen监听端口为80，这意味着当我们访问了80端口就会被nginx拦截，首先启动nginx，可以直接双击nginx.exe也可以通过cmd命令行直接输入nginx.exe运行（推荐，因为这样不会关闭窗口，双击的话就是一闪而过了）

接下来我们浏览器访问localhost:80

启动成功。

nginx常用命令

停止：nginx.exe -s stop 安全退出：nginx.exe -s quit 重新加载配置文件：nginx.exe -s reload（常用）例如我们更改了端口查看nginx进程：ps aux|grep nginx

实际应用

下载完毕后打开可以看到：

于是我们建立aa、bb两个文件夹，我们将index.html 分别放入aa和bb，这两个页面都打上自己的标记aa/bb

然后我们对nginx进行配置 nginx.conf

server {
       listen       8001;
       server_name  localhost;

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

    server {
       listen       8002;
       server_name  localhost;

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

如果没结束，记得reload

nginx.exe -s reload

接下来我们放一个项目进去，打包后放入html中

修改配置文件，然后reload

 server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

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

然后我们访问localhost，端口默认是80所以不用写，如果失败，可能是reload失败，再次reload就可

其他配置问题

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;
    }
}

一个比较全面的配置

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

# 指定运行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;          
        } 
    }
}