nginx+node+vue+node部署个简单的先后端分离应用

前言

linux服务器上使用nginx部署前端静态资源和反向代理后台接口。

nginx

简介

官网介绍

nginx(engine x)是一款轻量级的Web服务器/反向代理服务器及电子邮件代理服务器。

安装配置

安装

安装完，使用nginx -v,查看是否安装成功。

命令行参数

• nginx -v 能够查询版本
• nginx -t 测试配置文件
• nginx -s signal
  • nginx -s stop 快速关闭
  • nginx -s quit 优雅地关闭（处理完全部的请求）
  • nginx -s reopen 从新打开日志文件
  • nginx -s reload 从新加载配置（开启一个新的工做进程来使用新的配置，优雅地关闭老的工做进程）
• nginx -p 前缀名称 设置nginx路径前缀（默认/usr/share/nginx）
• nginx -c 文件名称 设置新的配置文件
• nginx -g 指令名称 设置全局的指令

配置文件

linux系统安装完，有个默认的nginx.conf配置文件通常在/etc/nginx目录下。

nginx的配置文件主要由几个指令控制的模块组成。这些指令有简单的指令和块级指令（模块）。简单的指令包括名称和参数，二者之间要有空格，使用逗号结尾。模块由花括号组成。使用#来注释。

官网上列出的全部指令

默认文件如上图，#注释掉的指令，不少为默认配置或者提示如何配置。咱们要搭建一个http服务器，最主要的是配置http模块里的内容。

http模块里能够配置简单的指令，好比要引入的媒体类型文件等等。最重要的仍是要配置server模块，会涉及到的监听端口，域名，路由匹配等等。

server详解

官网server解释

server主要是配置一个虚拟的服务器，配置ip地址和域名均可以，listen指令监听链接虚拟服务器的地址和端口号，server_name指令能够列出全部server names。

listen

官网listen解释

listen指令配置的主要是ip地址和端口。ip地址和端口或者ip地址或者主机名：

• listen 127.0.0.1:8000;
• listen 127.0.0.1;
• listen 8000;
• listen *:8000;
• listen localhost:8000;

只有ip地址的话，默认是80端口。

server_name

设置虚拟服务器的名字，能够是多个。根据请求中的HOST字段，能够匹配特定的server块。

详解

location

根据请求的URI,配置不一样的处理，至关于路由。

location值能够为特定的字符串或者一个正则表达式。nginx优先检查特定字符串，而且采用匹配到最长的字符串定义的location。根据正则表达式在配置文件出现的前后顺序检查。若是没有匹配到正则表达式，则使用以前的location。

• ~*修饰符 忽略大小写
• ~修饰符 大小写敏感
• ^~修饰符 不使用正则
• =修饰符 精准匹配
• @ 重定向

proxy_pass

官网解释

根据特定location中匹配到的URI，设置被代理的虚拟服务器协议和地址。http或者https协议必需要有，地址能够是具体的域名或者ip地址（端口号无关紧要）。例如：

proxy_pass http://localhost:8000/uri/;
复制代码

nginx变量

官网上列出的全部变量

诸如：$host $remote_addr

一个简单demo

咱们将vue完成的前端包部署在 /data/vue-app/dist目录下，将node开发的后台应用部署启动后，监听7001端口。URI匹配到 /,就会去前端包的主页，因为是单页面应用且路由是history模式，因此有个 try_files指令的对未匹配到的路径时，让应用进入主页的处理，而当匹配 /api/路径下的xhr请求时，则会转发到node写的后台应用。例如URI是 /api/login时，nginx就会转发到node后台应用，后台服务给出响应，再经过nginx返给前端。

后台node应用是用阿里开源的 eggjs写的，经过nginx的简单配置，实现先后端分离和nginx的反向代理。