前言

嗨~，大家好，我是彪彪，又快要到金九银十的日子了，很多小伙伴应该和我一样，为了让自己的简历更加亮眼一点而选择写一个项目吧，结果我发现最难的不是写项目，而是如何把项目部署到服务器上，苦于没有关于这方面的知识，这期间我踩了不少坑，为了防止有和我一样的同学，我决定写这样一篇教学，从购买好服务器后，如何一步步把项目部署上去。本教程只要你有一个可以在本地允许的项目，那么跟着教程一步步操作即可。

再次声明，本教程属于新手类的，怎么简单怎么方便就怎么来，里面会配有大量的图片，目的只有一个：让和我一样的新手可以轻易的项目部署的服务器，所以步骤看着会很繁琐，大神看个乐就行。

先说一下我这个项目所用的技术栈是前端：vue，后端：node.js，数据库：MongoDB，下面大部分内容其实都是讲解如何安装所用到的软件，如果不需要可以通过目录跳转到需要的地方。

前期准备工作

1.服务器的选型

这里我是用了阿里云服务器，（腾讯云我已经部署好了，为了模拟第一次这次选用阿里云，其实操作都差不多），系统选用的是Windows Server 2019 数据中心版 64位中文版，这里也是为了更加方便的部署，毕竟让自己项目能从服务器中跑起来才是最主要的。~~其实主要是因为我不懂Linux命令~~

2.远程链接

系统安装好了我们就开始链接服务器吧，这个时候用Windows做服务器的优势就出来了，我们可以利用Windows的远程桌面连接来进入服务器和上传文件，用Mac的我在网上找了一份百度教程里面可以看看能不能用,mac如何远程连接windows，教程里用到的软件官网地址，或者用我下好上传到蓝奏云的文件

Win+r快捷键打开运行，输入mstsc 按下回车，之后这里会让你输入你服务器的公网ip地址
ip地址.png
之后还有你服务器的用户名和密码，默认的用户名是Administrator，密码是你购买时设置的。链接时如果出现证书提醒不用管它，直接确定就行
链接1.png

链接2.png
证书认证.png
如果出现连接失败说明你阿里/腾讯云的安全组没有设置80端口的访问，设置下就行，具体位置如下：

链接失败.png
安全组.png

设置安全组.png
这里为了方便我们就把之后要用到的端口都给它设置了，设置的规则是根据你后端服务器用到的端口决定的，比如说我这里用到了4000这个本地端口，那个我把他部署到服务器上的时候就要在安全组里添加4000这个端口开放

服务器端口.png

之后没有意外我们就能看到服务器的操作界面了，初次进入的时候需要等它加载一会儿，就此我们的前期准备工作完成

远程服务器界面.png

安装所需软件

1. 安装Node.js

之后我们先从node的安装开始，这是官网的地址，这是我提前下好的文件看需求使用就行，使用远程链接上传文件很简单，ctrl+c 选择你要上传的文件进行复制，然后到服务器的操作界面里 ctrl+v 进行粘贴就可以了 ~~没错这就是传说中的面向cv编程~~

之后一路Next即可，完成后我们来检查下是否安装成功了，win+r 输入cmd进入命令行窗口（这里注意要最大化远程桌面链接，不然你操作的是本机），或者点击搜索菜单，输入cmd并按下回车键

搜索菜单进入cmd.png
依次输入

node -v
npm -v 
复制代码

如果出现这样的问题不要慌
npm没有.png
进入C:\Program Files\nodejs里，在点击npm.cmd在里面再试一次
npm成功.png
就此node安装完成

2.数据库安装并配置

安装MongoDB

MongoDB官网下载地址，嫌慢可以用我下载好的密码1111，但我这个版本是3.2.4，因为怕和当时写的版本不一样导致冲突

下载好之后和node一样Next即可，然后选择complete让它完整安装，接着一路Next，就此完成mongodb的安装

配置MongoDB

这样的好处配置一次以后都不需要用命令来启动了，更加方便

1.配置环境变量

安装完成后我们来添加mongodb的环境变量，将MongoDB的bin目录添加到path下，首先我们在远程桌面上点击开始菜单，接着点击控制面板——系统与安全———系统——高级系统设置——环境变量——path——编辑——新建，输入C:\Program Files\MongoDB\Server\3.2\bin 确定即可。这一步的目的是为了在任何地方打开cmd窗口都可以使mongodb的命令。

2.将MongoDB设置为windows系统服务

这一步的目的是为了省去每次启动都需要输入数据路径

首先在c盘根目录创建如下文件夹:

C:\data\log
C:\data\db
复制代码

创建db文件.png

之后在MongoDB的bin目录下创建一个名为mongod.config的文件

systemLog:
    destination: file
    path: c:\data\log\mongod.log
storage:
    dbPath: c:\data\db
net:
    port: 27017
复制代码

cfg设置.png

或者用我给你们准备好的mongod.config
，防止出错。

以管理员身份打开命令行窗口执行以下指令（打开命令行窗口在右键以管理员身份打开的才行，不然有可能提示你权限不够）

sc.exe create MongoDB binPath= "\"C:\Program Files\MongoDB\Server\3.2\bin\mongod.exe\" --service --config=\"C:\Program Files\MongoDB\Server\3.2\mongod.cfg\"" DisplayName= "MongoDB" start= "auto"
复制代码

管理员命令行.png
这样子就说明你成功创建了一个服务项
管理员命令行成功.png

接着我们打开系统服务器，启动名为MongoDB的服务

右击任务栏打开任务管理器，这里有一个服务，点进去按下m键，找到MongoDB，右键启动即可。

启动服务1.png
启动服务2.png

启动服务3.png
如果无法启动服务，在管理员的命令行窗口中输入如下指令

sc delete MongoDB

然后从第一步重新开始，以上我们就完成了MongoDB的安装与配置

安装Nginx并上传项目到服务器

Nginx官网下载地址，这是我提前下好的，然后上传解压就完成了Nginx的安装（官网给的就是免安装版）

之后把本地项目上传到服务器，要注意后端文件夹里的node_modules删除掉，不然上传会很慢, 把打包好的前端dist文件放到Nginx的html文件夹内，后端文件放到桌面，方便直接启动，或者随便你放在哪里，只要能找到

位置1.png
位置2.png
然后我们把删除掉的依赖在重新下回来，在你的后端文件夹内点击路径输入cmd然后回车，这样的好处就是不用自己去找路径了，然后输入npm install，等它补全依赖后输入 node server.js启动后台服务器（这个命令主要看你启动页面叫什么名字，或者看package.json里的scripts命令）

之后没有报错一般就说明服务器启动成功了，具体的还要后台代码是怎么写的

Nginx配置

配置Nginx路径

终于到了我们的重头戏，如何来配置Nginx来使用户访问服务器时能看到页面，首先打开Nginx文件里面的conf文件夹，里面有一个nginx.conf文件，双击用记事本打开，找到location，把root的指定路径填写为 html/dist

配置Nginx1.png
这里的路径就是你打包生成的前端文件夹路径，而index是用来指定网站的初始页，这里我的打包文件默认也是index.html所以就没更改配置。

默认样式.png

配置Nginx反向代理

这一步非常重要，没有配置好你的所有请求服务器都不会响应的，这里的反向代理和你配置正向代理的逻辑是一样的，比方说我在devServer里配置了遇到/api开头的，就把他转到本地端口4000上，并且把路径里的/api删掉，那么我Nginx的配置也是一样的，只不过语法有些不同
正向代理.png
配置Nginx2.png

我的话是在nginx.conf里添加一个新的location配置，这个具体配置还是要看你前端代理是怎么写的，然后转换成Nginx的语法就行，详细语法我就不讲了，有需要的同学可以自行搜索，毕竟我对这个也是一知半解

location /api {     
         rewrite  "^/api/(.*)$" /$1 break;  
         proxy_pass http://你服务器的IP地址:你后台所用到的端口;
}
复制代码

配置并保存好了就可以运行Nginx了，直接双击nginx.exe，然后查看任务管理器中是否有这个进程，如果没有说明你在配置nginx.conf有错误，可能是语法错误，或者是切换到全角状态下输入了逗号，建议删掉重新配置。

查看Nginx是否运行.png
以上这些如果都配置好了，那么恭喜你，你已经成功的把你的项目部署到服务器上了，输入你所绑定的域名或者你服务器的ip地址就可以查看了。当然，我强烈建议你把下面一步gzip压缩也配置下，因为真的很有用。

Nginx性能优化（gzip压缩）

不说了直接让你们看看开启后和开启后的效果

效果对比

这是没开启gzip压缩时：

未开启时1.png

未开启时2.png

这是开启后所花费的时间：

开启时1.png

未启时2.png

没开前10到20秒，开了之后1到5秒左右，性能至少提高了4倍！虽然还是没有达到首屏1s的效果，但至少是达到了可以访问的程度。因此开启gzip压缩还是很有必要的。

开启gzip压缩

开启gzip压缩首先我们要下载一个webpack的插件来帮助我们压缩js、css和我们需要压缩的文件，注意的是如果你使用的是vue-cli3脚手架搭建的项目下载要使用6.1.1，脚手架不支持最新版，在你的项目里打开cmd窗口，输入：

npm install [compression-webpack-plugin]()@6.1.1 --save-dev
复制代码

安装成功之后在vue.config.js中进行配置如下信息（对，这意味着你要重新打包一次）

const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js", "css"];  //你所需要压缩的文件
module.exports = {
        configureWebpack: config => {
            if (process.env.NODE_ENV === "production") {
                return {
                    plugins: [
                        new CompressionWebpackPlugin({                    
                            algorithm: "gzip",
                            test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
                            threshold: 10240, //对超过10k的数据进行压缩
                            minRatio: 0.6 // 压缩比例，值为0 ~ 1
                        })
                    ]
                };
            }
        }
    }
复制代码

配置vueconfig.png
然后再Nginx服务器中配置，设置好了之后重启下Nginx就行

 gzip on;
  # 检查是否存在请求静态文件的gz结尾的文件，如果有则直接返回该gz文件内容，不存在则先压缩再返回
  gzip_static on;
  # 设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。
  # 默认值是0，不管页面多大都压缩。
  # 建议设置成大于10k的字节数，配合compression-webpack-plugin
  gzip_min_length 10k;
  # 对特定的MIME类型生效,其中text/html被系统强制启用
  gzip_types text/javascript application/javascript text/css application/json;
  # Nginx作为反向代理的时候启用，开启或者关闭后端服务器返回的结果
  # 匹配的前提是后端服务器必须要返回包含‘Via’的 header头
  # off(关闭所有代理结果的数据的压缩)
  # expired(启用压缩,如果header头中包括‘Expires’头信息)
  # no-cache(启用压缩,header头中包含Cache-Control:no-cache)
  # no-store(启用压缩,header头中包含‘Cache-Control:no-store’)
  # private(启用压缩,header头中包含‘Cache-Control:private’)
  # no_last_modefied(启用压缩,header头中不包含‘Last-Modified’)
  # no_etag(启用压缩,如果header头中不包含‘Etag’头信息)
  # auth(启用压缩,如果header头中包含‘Authorization’头信息)
  # any - 无条件启用压缩
  gzip_proxied any;
  # 请求加个 vary头，给代理服务器用的，有的浏览器支持压缩，有的不支持，所以避免浪费不支持的也压缩
  gzip_vary on;
  # 同 compression-webpack-plugin 插件一样，gzip压缩比（1~9），
  # 越小压缩效果越差，但是越大处理越慢，一般取中间值
  gzip_comp_level 6;
  # 获取多少内存用于缓存压缩结果，‘16  8k’表示以8k*16 为单位获得。
  # PS: 如果没有.gz文件，是需要Nginx实时压缩的
  gzip_buffers 16 8k;
  # 注：99.99%的浏览器基本上都支持gzip解压了，所以可以不用设这个值,保持系统默认即可。
  gzip_http_version 1.1; 
复制代码

注意这里的配置我是都是照搬沉末_大佬的 vue项目部署的最佳实践中的服务器配置gzip压缩，具体的内容大家可以点进去看看，里面提供了很多优化方案,我也是在这里才学到要用gzip压缩来提高性能的。