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

3,879 阅读3分钟

前言

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的反向代理。