node与vue部署后台管理

一个人能力太小，聚沙成塔，抱团取火，分享知识，帮助学习，
有愿意或者有问题一起钻研，新人也好，老手也好，希望在这个寒冬下，尽力生活，
欢迎 一起 qq群，306671879。学习前端

首先需要一台服务器，新手可以去腾讯白嫖或者试用一台，选择window或者Linux 如果你一时不太熟或者不喜欢 又或者你暂时不太熟，又想比较快的部署一个网站，建议选择window，
假设你已经有了node的后端项目，与MySQL数据库或者其他，一般白嫖的服务器不会很多，大概六十到四十g左右的样子，自己用是绝对够用，
先在服务器安装node 然后把项目移到服务器里面去，服务器一般有远程连接或者window有资源盘的连接，把项目复制到指定文件下，比如我目前搭建的环境，是node vue还有nginx nginx有两台，node是项目是选中fastify框架搭建的api 数据库是MySQL 虽然使用了redis 但是没有部署上去，而且还加上了websocket 这些在我本地的开发环境是没有问题的，但是线上估计需一个线上ip地址导致我没有成功部署，如果有大佬部署过可以指教一下，
两台nginx的作用 一个是用作vue打包项目的部署，vue一般都是单页面居多，所以白屏是不可避免的，通常我们会使用webpack去分割打包资源的bundle，把公用的模块提出来作为chunk，也就是别让一个js文件太大，这样利用并发加载的浏览器方式，提升资源加载速度，原本一个文件要加载很久，但是现在分成其他文件，加载的时候也就是算最大文件加载的时间，由于最大的已经被分割成几个比较小的js文件，所以大大提升的速度，然后使用webpack的gzip的插件，类似于compression-webpack-plugin这样的，然后去nginx开启gzip，这样单页面打包的结果，会出现压缩文件，这样服务器加载资源会很小很快，白屏就会提高很多，然后配置nginx的history路由使用规则，因为history是走服务器会出现资源找不到的时候，

如上图所示的配置，是开启history，gzip开启如下

加在http的服务里 这样就完成，然后设置root的文件位置，我是指定dist文件，你可以指定其他都可以的，

然后第二台nginx我是用作来配置图片文件服务器，因为我上传的时候通过node接收文件，然后把图片唯一值与用户绑定，然后把资源文件放到nginx指定的读取图片资源的目录下面，这样读取图片的时候，node就不用去浪费更多的资源去读图片，而是交给nginx这样性能比较好又快的来加载图片，所以我一般会在vue的代码里面拼接图片资源地址。
配置图片如下

用作部署单页面的nginx 我会配置代理的转发，用来与本地开发的时候设置的vue config js 里 的 proxy一致，来保证部署很转发是成功的，有些时候我们使用的是自定义的插件代理而不是vue-cli 比如 http-proxy-middleware插件
代码如图

如图的代理在本地 是说如果是 指定前缀开头的接口 请求我们会转发到target地址位置，然后重写前缀，重写与否是在于后端是否需要前缀，不需要就是

然后部署打包的位于nginx的 conf也需要 改成对应的

如图所示是表示后端没有前缀也不需要，所以需要重写，使用元组的正则，如果需要前缀你应该就明白

直接这样它会默认的带上后缀然后转发，不需要特别的处理，
然后有一些特别的需要，会让项目启动的时候带上一些header自定义内容，nginx是有内置的全局变量


这些变量方便你配置，location 后面的写法都是正则的书写方法，
然后一般nginx用作资源服务器与代理，与负载均衡，也就是多台服务器来接受请求，避免过载，然后nginx会使用一些权重 轮询 设置一些ip等等第三方的操作来 让请求去到指定的ip服务器上面处理 然后返回结果