前端简易的nginx使用笔记

139 阅读3分钟

本文已参与[新人创作礼]活动, 一起开启掘今之路

笔记灵感来源:最近由于公司处于大量项目的交付期,很多系统需要我们前端去现场更新系统,萌新之前也没有参与过部署项目的工作,一直纯粹的干着前端系统开发,一开始感觉nginx也是很复杂的一个东西,脑子里也有疑问,这活需要我们前端干?后端或者运维搞定不就行了,但最后这半个月的工作发现其实也不尽然,很多时候并不是后端和运维都能时刻在线的,我们又时候开发到半夜功能实现,明天一早需要检查就需要我们自己去部署,这时候才发现会一点nginx是真的有用,感谢组长教我

nginx介绍

   nginx具体做什么的我就不在这一一赘叙了,就简单的说介绍一下Nginx 的最重要的使用场景:
    1.  静态资源服务,通过本地文件系统提供服务;
    2.  反向代理服务,延伸出包括缓存、负载均衡等;

为什么前端需要使用nginx

    大家都知道我们前段与后端联调最容易发生的一个问题就是跨域,何为跨域?
    就是在浏览器上当前访问的网站向另一个网站发送请求获取数据的过程就是**跨域请求**。
    如果我们不做任何处理,那跨域问题就会导致项目凉凉,所以就出现了很多的手段去解决跨域,
    例如 jsonP,ifrome,正向代理,反向代理等 这里就用到了nginx

nginx相关的安装以及使用教程

安装我就不写了 实在是懒得去复制,真有看文章的可以自己百度,度娘yyds

有一些常用的操作命令就写一下吧

    nginx -s reload # 向主进程发送信号,重新加载配置文件,热重启 
    nginx -s reopen # 重启 
    Nginx nginx -s stop # 快速关闭 
    nginx -s quit # 等待工作进程处理完成后关闭 
    nginx -T # 查看当前 Nginx 最终的配置 
    nginx -t -c <配置路径> # 检查配置是否有问题,如果已经在配置目录,则不需要-c

nginx的nginx.conf的基础代码块

```js
user  nginx;                        # 运行用户,默认即是nginx,可以不进行设置
worker_processes  1;                # Nginx 进程数,一般设置为和 CPU 核数一样
error_log  /var/log/nginx/error.log warn;   # Nginx 的错误日志存放目录
pid        /var/run/nginx.pid;      # Nginx 服务启动时的 pid 存放位置

events {
    use epoll;     # 使用epoll的I/O模型(如果你不知道Nginx该使用哪种轮询方法,会自动选择一个最适合你操作系统的)
worker_connections 1024;   # 每个进程允许最大并发数
}
### 其实对于前端而言 如果只是简单的去更改nginx就一下代码是最需要了解的
http {   # 这是http的不需要证书很简单的
    server {
	listen       8808;       # 配置监听的端口
	server_name  localhost;    # 配置的域名
	
	location / {
		root   /usr/share/nginx/html;  # 网站根目录
		index  index.html index.htm;   # 默认首页文件
	}
	
	error_page 500 502 503 504 /50x.html;  # 默认50x对应的访问页面
	error_page 400 404 error.html;   # 同上
    }
    # 这个就是后端的接口的代理,so easy,# 请求跨域,约定代理后端服务请求path以/api/开头
    location  ^~/api/ {
        proxy_pass http://10.1.13.14:8808/; # 后端真实的服务器地址转发
        client_max_body_size 500m;  
        proxy_connect_timeout 600;
        proxy_send_timeout 600;
        proxy_read_timeout  600;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade"; 
        proxy_set_header HOST $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }


}
```