在轻量级服务器（windows环境）上部署项目（后台管理页面）

前言：最近对服务器产生了兴趣，于是在学长的建议下，去阿里云买了一个学生服务器。待会会说我购买的过程。本人也是一个菜鸟程序员，刚接触不久，也习惯了使用windows系统，所以我上来不打算使用Linux系统来部署项目，因此我的云服务器也就没有选择Linux。我在这之前也在网上查阅了，大部分的人都建议去用Linux系统，因为我个人的一些原因，Linux先放一边，等我有时间，好好去学一学，这个肯定要去学习的。说了一些言外话，接下来步入正题吧！！

云服务器的购买和配置

1.首先先打开阿里云官网

链接：

阿里云官网

2.选中产品分类中的轻量级服务器（用来学习完全足够了）

3.学生的话，实名注册后有优惠，还是比较便宜的。

云翼计划

先进行实名认证后，享受优惠

我选择了轻量级服务器，系统镜像：windows,之后如果有需要是可以重置系统的。

购买完成后

这里啰嗦一句：因为我之前也没有碰过服务器这东西，去网上搜了一下别人的笔记，这里给链接：

zhuanlan.zhihu.com/p/53651203

服务器上的一些配置也是从这里看到的。

开放端口

先配置防火墙，按照图中的黄色部分配置好，红色之后再配置。

开放那些常用的端口，像HTTP端口为80，HTTPS端口为443，SSH端口为22，FTP端口为21，MySql端口为3306。当然如果为了简单，你可以粗暴地开放所有TCP、UDP端口，但出于安全的考虑并不建议你这么做。

选择域名，并为服务器绑定域名

我是直接购买的，价格自己选定。

附上链接：mi.aliyun.com/

注意下：当你域名购买成功后，需要你进行备案，不然你的域名就会出现以下的信息提示，需要你进行备案，域名备案的条件是三个月以上才可以。如果你只是进行学习的话，也可以只用公网的Ip来进行访问也是可以的。

当域名购买完成后，需要进行DNS解析，这里不多说，阿里云的文档都有说明。

之后进行远程连接，会让你设置两次密码，第一次是远程连接的密码，第二次是云服务器上的账户密码。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xc2VW73s-1571989140418)(C:\Users\hui\AppData\Roaming\Typora\typora-user-images\1571911354619.png)\]

这是第一次密码

这是第二次密码

登录之后

这是在网页上进行连接，下面我说另一个方法，windows上自带的远程桌面连接。

windows+R 、之后确定

界面如下

输入你的公网ip，这里说一下，把本地文件传输到服务器上的一种方法，其实方法很多，有兴趣也可以去试试别的方法。点击 显示选项

然后 本地资源，接着 详细信息 ，

最后选择你要传输的文件

连接成功后的画面

到这一步，云服务器已经购买完毕，你可以把它当作另一台电脑来使用。

在云服务器上使用Tomcat部署项目。

在使用Tomcat之前，要先在云服务器上安装tomcat环境。这里附上一篇： Tomcat的安装教程

还是比较简单的，安装完毕后，试一下效果。http://localhost:8080/

出现上图的效果，说明Tomcat已经安装成功了

接下来我们安装JDK环境、mysql环境

附上两篇链接：

（1）JDK: www.cnblogs.com/liuhongfeng…

（2) mysql: blog.csdn.net/zhouzezhou/…

JDK安装完成后，我们来检测一下

同样的mysql安装完成后，也来检测一下

环境安装完成后，接下来步入主道了。

先来到我的本地，我使用vscode来打开后端管理的项目。这里提一下，这个项目是别人，我只是拿来学习，我主要学习的是后端，这个前端项目是git下来的，写的挺好的，如果感兴趣可以去瞧一瞧。

这里附上链接：toutiao.io/g/419312

$外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7G4c2BRH-1571989140468)(C:\Users\hui\AppData\Roaming\Typora\typora-user-images\1571968607285.png)$

打开后是这个样子的，项目目录结构我就不说了，这里主要要做的事情是打包。

打包的话，用过npm的应该知道，语句是：npm run build。

在控制台输入
$外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tzX8LTHg-1571989140470)(C:\Users\hui\AppData\Roaming\Typora\typora-user-images\1571968736133.png)$

但是在打包之前，有两个地方需要注意的是：

（1)找到config目录下的index.js,有两个环境一个是dev，一个是build。

我们需要更改的是build环境下的配置

标记出来的地方，原来是‘/ ’，改为‘./’。原因是：当打包完成后，会生成dist文件夹，dist文件夹下有index.html和static文件夹，index.html是访问的首页，static文件夹下存放静态文件，页面加载的时候需要加载静态文件，之所以改成‘./’，是因为浏览器可以找到正确的静态文件路径，不然你打开网页就只有空白，控制台会报出错误，有兴趣的，可以尝试一波，也不会花费多少时间，体验一下。

这里在啰嗦一下，我们为什么改的是build中的配置呢，而不是改dev中的配置呢。以下是我个人的理解，如果有错误的地方还需要大家的帮助。

npm run build 默认情况下是打包prod环境里面的东西，配置在build.js中。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CvhQH0WS-1571989140488)(C:\Users\hui\AppData\Roaming\Typora\typora-user-images\1571969609022.png)\]

注意看图中黄色部分画出的地方，我们再来到webpack.prod.conf.js中。

看图中红色部分标出的文件路径，这就是它打包的路径过程，正常我们开发过程中都是在dev中进行，真正进行生产的时候就在prod中。我们来到prod.env.js中。

生产环境中,它和后台进行数据交互的地址使用的是线上地址，也就是用服务器部署的后台项目的地址。我这里用的是原作者的线上的后台API的地址。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ibCzSCu-1571989140495)(C:\Users\hui\AppData\Roaming\Typora\typora-user-images\1571969927044.png)\]

之前我用来学习的是使用本地地址，请看。好了，我要说的就是这么多。给你们看一下，打包之后的文件夹。

完成之后就是这个样子的。那么，赶快去云服务器上将它部署起来，跑起来吧。

先来到Tomcat的文件夹下

找到webapps下，将打包好的前端项目dist文件复制到webapps下

之后重启Tomcat服务器，tomcat安装好后默认的端口是8080，不过你也可以在server.xml文件下更改端口号，在云服务器上访问的地址【本地ip或者localhost:8080/项目名字/】我这里的地址是:localhost:8080/dist/index.html 。

注意

还记得云服务器上防火墙的配置吗？

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OfydEUEm-1571989140516)(C:\Users\hui\AppData\Roaming\Typora\typora-user-images\1571972924482.png)\]

这个要记得配置一下，要开放你的端口，不然本地测试的时候没办法访问8080端口，我又设立一个8090，是因为我改过Tomcat的端口号。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oJTwcxOk-1571989140518)(C:\Users\hui\AppData\Roaming\Typora\typora-user-images\1571972124142.png)\]

成功之后就这是个界面，注意每个人路径可能有所不同，不过大部分是我这个，具体还请根据自身服务器的情况来配置。

登陆之后的界面，我这是连接原作者的线上后台服务器

这只是在云服务器上的本地测试，接下来到我本地的来测试一番，首先先连接云服务器上的Tomcat的地址:

公网（ip）：8080

出现这个说明，已经连接上云服务器。如果你的域名已经备案成功了，可以直接用域名来替代公网ip。因为你的域名已经和你的公网ip的地址绑定在一起了。

成功，你也可以把你的地址发给别人测试一下，手机也是可以的。这里我不描述了，总之Tomcat还是比较简单的，当然我一开始自己摸索也花费了一段时间，主要就是卡在地址上。

在云服务器上使用Nginx部署项目

Nginx介绍

1.什么是Nginx？

Nginx (engine x) 是一款轻量级的Web 服务器、反向代理服务器及电子邮件（IMAP/POP3）代理服务器。

主要是这三种：我这里要用到是将Nginx当作Web服务器来使用。

想知道什么是反向代理服务器的，这里给一个链接：

baike.baidu.com/item/%E5%8F…

一看就懂了！！

Nginx的简易教程

这里给一个链接：yq.aliyun.com/articles/62…

上面说的也很详细，主要是如何去配置Nginx的配置文件。

1.我们先下载nginx吧

链接：nginx.org/en/download…

我的本地和云服务器上都是windows系统，所以下载windows的zip包

2.下载完成后把zip包传输到云服务器上

3.先启动nginx服务器，到这个目录下cmd，打开控制台，输入start nginx。

在云服务器上本地测试：localhost

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qt9ijPE0-1571989140550)(C:\Users\hui\AppData\Roaming\Typora\typora-user-images\1571974785639.png)\]

出现这个说明nginx启动成功，接下来在本地测试一下：

出现这个也表示连接到云服务器上，大胜利！

我们还是引用Tomcat中的后台管理页面的项目来进行测试

我们把打包好的后台项目放到云服务器上的c盘根目录123文件夹下

项目部署好了，接下来是最重要的一步，

nginx最重要的是配置文件的编写，先说说配置文件在哪里

我用了vscode打开的nginx3.conf，下面附上代码：

#user  nobody;
worker_processes  1;

# 全局错误日志
error_log  C:/tool/nginx-1.17.4/nginx-1.17.4/logs/error.log;
error_log  C:/tool/nginx-1.17.4/nginx-1.17.4/logs/error.log  notice;
error_log  C:/tool/nginx-1.17.4/nginx-1.17.4/logs/error.log  info;

pid        C:/tool/nginx-1.17.4/nginx-1.17.4/nginx.pid;


# 工作模式及连接数上线
events {
    worker_connections  1024;
}

# 设定http服务器，利用它的反向代理功能提供负载均衡支持
http {
    # 设定mime类型(邮件支持类型),类型由mime.types文件定义
    include      C:/tool/nginx-1.17.4/nginx-1.17.4/conf/mime.types;
    default_type  application/octet-stream;

    # 设定日志
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                     '$status $body_bytes_sent "$http_referer" '
                     '"$http_user_agent" "$http_x_forwarded_for"';

    access_log C:/tool/nginx-1.17.4/nginx-1.17.4/logs/access.log  main;
    rewrite_log     on;


    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;
    tcp_nodelay        on;

    # gzip压缩开关
    #gzip  on;

    # 配置虚拟机
    server {
        #监听80端口，80端口是知名端口号，用于HTTP协议
        listen       80;

       #主机域名,实际项目发布的话，填公网上的域名，本地部署的话，可以在		#C:\Windows\System32\drivers\etc\hosts文件中添加IP和域名的映射
        server_name   www.hui.com;

        # 编码格式
        charset utf-8;

        # 代理配置参数
        proxy_connect_timeout 180;
        proxy_send_timeout 180;
        proxy_read_timeout 180;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarder_For $remote_addr;
        
        #location后面设置映射的路径
        location /dist/ {
            # 首页
            # index  index.html index.htm;
            # 指向java的目录
            root  /123;
        }


        #静态文件,nginx自己处理
        # localhost ~ ^/(images|javascript|js|css|flash|media|static)/{
        #     root C:\Demo\src\main\resources
        #     expires 30d;
        # }

        # 设定查看Nginx状态的地址
        location /NginxStatus{
            stub_status         on;
            access_log          on;
            auth_basic          "NginxStatus";
            auth_basic_user_file conf/htpasswd;
        }

        # 禁止访问 .htxxx文件
        location ~ /\.ht{
            deny all;
        }

        #错误处理页面（可选择性配置）
        #error_page   404              /404.html;
        #error_page   500 502 503 504  /50x.html;
        #location = /50x.html {
        #    root   html;
        #}
    }
}

这里主要说明一下server(虚拟机)的配置，其他都是常规配置，可以在我前面发的链接中找到相关资料，别人说的很详细，这里主要关注三个点。1.server_name 2.location 3.root

先说server_name，后面的名字是可以随便起的，我所说的随便起是因为我的域名没有备案，所以没办法访问，因此我就不打算用我的域名，我便随便起了一个,如果你的域名已经备案推荐使用域名，其实就是你的云服务器上的公网ip，只不过给了个包装，毕竟活生生的把ip地址放出去不安全。上面也有注释，在云服务器上本地测试的时候记得加东西。

接着说说location，location后面接的是你ip地址后面的项目地址，就用我这个项目来说，我dist文件夹下的有static静态文件和index.html首页，我需要浏览器找到index.html这个网页，我就配置了/dist/的路径，毕竟我的项目名字就叫做dist，所以访问地址就是 www.hui.com/dist/ ，其实就是云服务器上的公网ip加项目地址。这里有讲解nginx配置文件中location的知识点，如果我的没有听懂就去看看这个，我推荐你去看一看，有帮助的。 location的知识点

最后说一说root，其实说完location，差不多也猜到了root，正如其意，根路径，因为我将dist文件放入到123文件夹下，因为我给的路径是 /123。也可以去试试别的看能不能跑起来。

这个给一个nginx root中的知识点：

root知识点

当文件配置完毕后，打开控制台