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

媒介

近来在公司部署项目时遇上了一点关于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

1. server {
2.        listen       8001;
3.        server_name  localhost;
5.        location / {
6.            root   html/aa;
7.            index  index.html index.htm;
8.        }
9.     }
11.     server {
12.        listen       8002;
13.        server_name  localhost;
15.        location / {
16.            root   html/bb;
17.            index  index.html index.htm;
18.        }
19.     }

复制代码

如果没竣事，记得reload

1. nginx.exe -s reload

复制代码

接下来我们放一个项目进去，打包后放入html中
修改设置文件，然后reload

1. server {
2.         listen       80;
3.         server_name  localhost;
5.         #charset koi8-r;
7.         #access_log  logs/host.access.log  main;
9.         location / {
10.             root   html/dist;
11.             index  index.html index.htm;
12.         }

复制代码

然后我们访问localhost，端口默认是80所以不用写，如果失败，可能是reload失败，再次reload就可
其他设置问题
Nginx的主设置文件(conf/nginx.conf)按以下布局构造：

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

前端开辟中经常会遇到跨域问题，nginx可以做署理轻松办理，事实上原理和cors一样，设置哀求头

1. server {
2.     location /api {
3.         proxy_pass http://backend_server;
4.         add_header Access-Control-Allow-Origin *;
5.         add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
6.         add_header Access-Control-Allow-Headers 'Origin, Content-Type, Accept';
7.     }
8. }

复制代码

缓存问题：

1. proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=my_cache:10m max_size=1g inactive=60m use_temp_path=off;
3. server {
4.     location / {
5.         proxy_cache my_cache;
6.         proxy_pass http://backend;
7.         add_header X-Cache-Status $upstream_cache_status;
8.     }
9. }

复制代码

https提升安全性

1. server {
2.     listen 443 ssl;
3.     server_name example.com;
5.     ssl_certificate /etc/nginx/ssl/example.com.crt;
6.     ssl_certificate_key /etc/nginx/ssl/example.com.key;
8.     location / {
9.         proxy_pass http://backend_server;
10.     }
11. }

复制代码

一个比较全面的设置

1. # 全局段配置
2. # ------------------------------
4. # 指定运行nginx的用户或用户组，默认为nobody。
5. #user administrator administrators;
7. # 设置工作进程数，通常设置为等于CPU核心数。
8. #worker_processes 2;
10. # 指定nginx进程的PID文件存放位置。
11. #pid /nginx/pid/nginx.pid;
13. # 指定错误日志的存放路径和日志级别。
14. error_log log/error.log debug;
16. # events段配置信息
17. # ------------------------------
18. events {
19.     # 设置网络连接序列化，用于防止多个进程同时接受到新连接的情况，这种情况称为"惊群"。
20.     accept_mutex on;
22.     # 设置一个进程是否可以同时接受多个新连接。
23.     multi_accept on;
25.     # 设置工作进程的最大连接数。
26.     worker_connections  1024;
27. }
29. # http配置段，用于配置HTTP服务器的参数。
30. # ------------------------------
31. http {
32.     # 包含文件扩展名与MIME类型的映射。
33.     include       mime.types;
35.     # 设置默认的MIME类型。
36.     default_type  application/octet-stream;
38.     # 定义日志格式。
39.     log_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for';
41.     # 指定访问日志的存放路径和使用的格式。
42.     access_log log/access.log myFormat;
44.     # 允许使用sendfile方式传输文件。
45.     sendfile on;
47.     # 限制每次调用sendfile传输的数据量。
48.     sendfile_max_chunk 100k;
50.     # 设置连接的保持时间。
51.     keepalive_timeout 65;
53.     # 定义一个上游服务器组。
54.     upstream mysvr {   
55.       server 127.0.0.1:7878;
56.       server 192.168.10.121:3333 backup;  #此服务器为备份服务器。
57.     }
59.     # 定义错误页面的重定向地址。
60.     error_page 404 https://www.baidu.com;
62.     # 定义一个虚拟主机。
63.     server {
64.         # 设置单个连接上的最大请求次数。
65.         keepalive_requests 120;
67.         # 设置监听的端口和地址。
68.         listen       4545;
69.         server_name  127.0.0.1;
71.         # 定义location块，用于匹配特定的请求URI。
72.         location  ~*^.+$ {
73.            # 设置请求的根目录。
74.            #root path;
76.            # 设置默认页面。
77.            #index vv.txt;
79.            # 将请求转发到上游服务器组。
80.            proxy_pass  http://mysvr;
82.            # 定义访问控制规则。
83.            deny 127.0.0.1;
84.            allow 172.18.5.54;         
85.         }
86.     }
87. }

复制代码

小结

本文重要适合小白朋友学习nginx是什么、用于做什么，nginx的常用下令，nginx如何举行设置，最后实际操作一次简朴的nginx。
=转载=

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。