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

前言

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

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

nginx

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

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

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

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

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

nginx的特点：

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

小结

本文主要适合小白朋友学习nginx是什么、用于做什么，nginx的常用命令，nginx如何进行配置，最后实际操作一次简单的nginx。

=转载=