前后端项目部署到服务器记录

前言

  以前将前后端分离项目部署到服务器上的经验，这次借学校课程大作业的机会将之前实验室的前后端项目作为课程大作业部署到服务器上，因此记录一下。由于自己已经注册过腾讯云，所以让对象注册了个腾讯云，白嫖了一个服务器，服务器具体配置如下图：

1. Nginx安装

1.1 Nginx简介

  Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的。从2004年发布至今，凭借开源的力量，已经接近成熟与完善。Nginx功能丰富，可作为HTTP服务器，也可作为反向代理服务器，邮件服务器。支持FastCGI、SSL、Virtual Host、URL Rewrite、Gzip等功能。并且支持很多第三方的模块扩展。

1.2 Nginx应用场景

1. http服务器。Nginx是一个http服务可以独立提供http服务。可以做网页静态服务器。
2. 虚拟主机。可以实现在一台服务器虚拟出多个网站。例如个人网站使用的虚拟主机。
3. 反向代理，负载均衡。当网站的访问量达到一定程度后，单台服务器不能满足用户的请求时，需要用多台服务器集群可以使用nginx做反向代理。并且多台服务器可以平均分担负载，不会因为某台服务器负载高宕机而某台服务器闲置的情况。

1.3 Nginx安装配置

1. Nginx安装
   从Nginx官网下载相应的安装包，具体的安装步骤参考网上教程，安装后的目录结构如下:
   
2. Nginx配置
   Nginx的配置文件在安装目录下conf/nginx.conf文件中，主要配置server，我的配置如下：
   
     监听80端口，同时将包含 /api/ 的后端接口代理到 http://62.234.59.184:81/，实现反向代理。
   注意：需要在云服务器控制台将81端口开放（80作为http服务器Apache和Nginx的请求默认端口已经开放），否则会出现访问到前端页面但是页面里没有数据：
   

2. 前端Vue打包

  前端项目Vue的打包方法十分简单，在项目目录下执行npm run build，生成的dist文件夹即时我们需要的打包文件夹：

3. 后端Springboot打jar包

  后端打包比较麻烦，需要借助mvn的命令，对于利用idea进行项目开发，可以通过idea中内嵌的mvn指令进行jar打包，具体操作流程如图：

说明：首先将清除目标目录中的生成结果，接着双击package进行jar打包，更多的mvn指令含义参考 mvn命令，这样在项目目录下会生成target目录，target目录下的jar包就是我们需要的：

4. 数据库配置

  本系统使用的数据库有mysql和neo4j，讲道理应该使用docker镜像进行配置的，但是我比较嫌麻烦，而且云服务器配置够的情况下，我直接本地配置，具体的配置方法可自行网上查询。


  然后就是要将数据导入到数据库中，具体的方法也可自行网上查询。

5. 各个部分配合的注意点

5.1 前端运行

  将前面打包的dist目录放到Nginx安装目录中的html目录下：

  然后在Nginx安装目录下打开cmd窗口，并执行Nginx。另外如果Nginx配置有更新或者dist有更改，需要执行nginx -s -reload进行重载（其实也可以kill进程在重新启动Nginx）。

5.2 后端运行

  后端运行比较简单，直接在前面生成的target目录下执行java -jar xxx.jar即可：

5.3 注意点

  在部署的过程中遇到一个许久的bug就是没有将前端项目中请求的baseurl中的ip改为服务器公网ip，导致一直前端拿不到后端数据，所以在打包前需要检查一下这个。

6. 总结

  头一次将前后端分离系统部署到服务器上，所以出了很多问题，但是收获也不少。首先，熟悉了整个的部署流程以及 Nginx 的使用方法；其次，在部署的过程中，由于前端访问后端的 baseurl 设置为 localhost 或服务器内网 IP，导致内网访问能够拿到后端数据，公网访问拿不到后端数据，在最后一天把这个问题找到并解决，感受到了 debug 的煎熬感；最后，感觉自己在前后端开发上还有很大的不足，以及实践经验较少，这次部署还有很多不足，一方面使用的服务器不是linux，这和现在部署的主流还是相悖的；另一方面就是没有使用docker容器化部署，导致需要配置的环境比较多。且行且学习，加油！

参考：从零开始将springboot项目部署到云服务器（ecs）上