前端与后端部署在同一个服务器时所遇到的问题

前言

今天是我学习前端的第一次项目部署，而且也算是我独自完成的第一个项目部署，就简单写了个页面和请求放到放服务器上去，一共花了我一天半左右的时间，一半是服务器系统的访问问题，一半是前端部署后的请求路径问题（我用的是Windows server 2012）

首先服务器方面的问题

1. 当我把前端文件放到服务器上之后，页面加载不出来

    在网上找了半天，什么解决方法都没找到，然后ping了一下，看自己电脑能不能访问，结果是不能。所有就猜测是服务器网络的问题，就在服务器官网找了一下，发现是服务器安全组的问题。

解决过程

想让从外网访问服务器上的页面，首先是要弄两个地方：

        1. 服务器官网控制台的安全组（轻量级是不绑定安全组的）

        

        2. 服务器系统的防火墙

•         防火墙此规则可以在两个地方设置
  • 一个实在类似于上面图上的位置
  • 一个就是进入系统后设置 

 

具体设置过程：

1. 右上角工具---高级安全windows防火墙

2. 进入到入站规则，并新建规则：端口---根据需要选择添加要访问的端口，或者选所有端口

 之后根据向导提示添加完新的入站规则，就可以访问到服务器上的页面了，但是有可能页面会是空白的。就我碰到的问题是因为我的vue项目在打包时没有配置打包时的静态资源路径导致的。

然后是页面请求找不到路径的问题

        在网上找了半天，看了20多个博客，总结了一下操作才得到解决

解决过程

前端想要在同一个服务器访问后端数据，首先要配置三个地方

1. 第一个就是前端代理请求服务器的路径，最好是用本地路径加端口号

    2.  第二个是后端服务（我用的是node）

3. 第三个是nginx的反向代理，通过nginx进行代理分发请求，将前端请求关联到后端

 

 这样就解决了前端请求后端数据的问题

感想

虽然在部署的过程中，碰到的问题让我难受了这么久，但是弄好了之后我还是挺开心的。

（顺便记录一下，方便自己之后的学习）