nestjs+nuxt实战（二），部署服务端完整流程，以及爬坑的详细过程

上次发的实战本来是说搞完整的整套流程的，由于中间花了些时间，最终还是只在本地前后端加数据库整个跑通了，因为之前讲过服务端部署流程所以那一期就没讲服务端部署了，但是想了想，这次这个加上了前端的部署跟调用，还是应该加上前端部署跟前后端整体跑通才算数，所以

开始

先讲下这次用到的东西：1、一台阿里云服务器实例加一个弹性公网

2、一套nestjs代码+mysql

3、nuxt前端代码

4、WinSCP

代码开发工具用的vscode，插件Database Client连接本地数据库，tongyilingma帮我快速构建前端代码，当然里面的逻辑还是要你自己写的

1、nestjs服务端部署

这个之前讲过，这次用我们的新代码重新部署一遍

       1、代码文件上传    

还是用WinSCP，几天没用密码忘了，搞半天。。。。

连接远程服务器之后可以看到，还是上次那些文件，注意，WinSCP不会自动保存上次登录站点并且自动保存，所以要注意你这里是不是这种root开头的文件夹，如果是C/D开头的这种看清楚，可能没连上远程服务器，两边都是本地文件夹

还是一样，我们把后端文件拖到nest文件夹内 ，最主要的就是src文件夹跟package.json文件

因为之前有过这个文件夹跟里面的一些文件，直接覆盖的话之前文件夹内比现在多的文件还是会保留，所以我们直接把全部文件跟文件夹删掉，包括dist跟node_modules

注意：删除操作最好去阿里云远程连接服务器删，不要用WinSCP，会很慢

正常来说只有这几个文件跟文件夹是必须的，当然你如果在项目里面建了跟src同级的目录那另算

2、安装依赖

阿里云远程连接，切换到nest目录，安装依赖

 3、测试环境打包

先假设我们的项目分三个环境，dev，test，prod

我们部署这个环境就当做test环境吧，运行package.json中写的命令

"build:test": "cross-env NODE_ENV=test nest build NODE_ENV=test",

记得把你config里面test环境变量配置成你这台服务器的，主要是数据库配置

npm run build:test

报错了，看了我之前文章的应该猜到咋回事了，让我们本地试试

 本地没问题

看下本地node版本号

再看下服务器上的

记住一点，之前讲过的，nestjs要求node版本号大于等于16，好，我们切到16版本 

可以看到这里我们切换到16版本了，但是默认还是使用的14版本，既然我们后面都是使用16+的版本，那我们这里更改一下默认设置（首先你要确认你切换的这个node版本你已经安装了）

nvm alias default 16

可以看到默认node版本设置已经成功了 ，后面就不用每次切换了，再运行以下打包命令

完成了，直接ls查看目录，或者WinSCP刷新查看一下,可以看到已经有dist目录了

切换到dist目录,用pm2命令查看正在运行的项目，可以看到之前的项目还在运行中，所以先把之前的同名项目停掉

 再运行

 傻了，他会跑现有的同名项目,所以直接把之前的同名项目删掉，然后启动项目的语句应该是

pm2 start main.js

 启动成功，让我们先调接口创建一个管理员吧

报错了，我们看一下服务端日志，数据库的问题，找不到我们新加的这个库 

我记得我之前安装sql的时候设置过开机自启动的，阿里云远程连接服务器上打开一个新终端，查看下mysql安装列表

 查看一下sql状态

可以看到在12号就已经启动了的,没问题，那我连接一下数据库，查看现在有哪些库

所以可以看到，现在是没有我们用的的user_db这个库的，那新建一个

有了，再调一下之前的创建管理员接口 

又报错，继续看日志

他说我们的role表不存在，看下user_db库下的表

 

没有，这是怎么回事，猜测应该是运行main.js的时候没有连上正确的数据库表，所以没有正确创建实体，后续创建库之后并不会再次自动创建实体，所以我们试下重新启动main.js

尝试了下，还是不行，看下代码配置

本地试一下就知道为啥了，改成false，保存，新建一个test实体，保存，刷新数据库，没有 ，改成true，保存，刷新一下数据库，出来了，所以是这个问题

一般synchronize这个选项在测试跟生产环境是不建议打开的，我们这里测试环境也当做生产环境操作吧，这里配置的是false，他不会自动加载，那咋办，只能自己一个一个建mysql表了

4、服务器数据库建sql表

作为一个前端，不会写那么长的sql咋办，

1、问AI

2、vscode里面这个mysql插件里面可以看，连接上数据库之后，点击某个具体的表，点击，Properties，点击DDL，就可以看到建表语句了，直接copy过去，在远程服务器上运行语句

建表，报错了，查到是需要升级mysql版本，这个过程中花了不少时间去解决，单独写了一篇文章描述问题过程与解决办法了，在这里，阿里云服务器mysql5升级mysql8爬坑 ，

升级成功之后连接数据库，重新跑建表语句,记住，copy过来的建表语句记得加上英文的";"符号

报错了，没有关联表，那我们先建关联表吧

再建user表

 之前本来是想搞角色表跟权限表的，后面一想没必要搞那么复杂，就只搞了user,role,token三个表了

5、创建数据

数据库问题解决，node服务之前是开着的不用动，我们再请求一下接口创建管理员试试

终于成功了，激动地快哭了，查下表

 有了

2、前端本地连服务器 

好了，接下来就是部署前端了，我们先把前端的代理地址换到阿里云服务器的这个弹性公网地址

成功了

3、前端部署服务端

在打前端包之前，得改一下我们的请求配置，因为我们之前都是本地请求，用的axios，没有配置baseUrl，现在要请求远端了，所以要配置url了，url就是我们的代理地址，直接把代理地址改到url里面去，如果有多个环境要自己配，我们这里假设只有本地dev跟服务端环境

 1、前端代码上传

2、安装依赖

 出了一大堆node版本问题，需要升级一下服务端的node版本

还是跟之前升级16一样，升级完之后把默认使用版本也改到18

没问题了

3、打包

可以看到，打包完之后怎么启动服务都告诉你了

但是我们还是用之前的pm2跑

 看，又是突然找不到了，我们之前是全局安装了的，所以，重连--------还是不行，大概知道问题了，node升级了，重装一下pm2,重装完pm2顺便把之前的nest服务也重启一下

访问不到，看下日志 

 可以看到，因为在同一台服务器上，并且3000端口已经被之前的nest服务监听了

4、更换监听端口

 停掉前端服务，更换监听端口重启

没生效，找的教程，不生效的原因是教程里面是另外写了个一个服务的js去启动的，这个环境变量会传到那个js里面去，而我们这里没有，所以换种方式，官方的，加个文件，改个端口号

还是没生效，换种方式，在script语句里面注入变量，也是官方推荐方法

也没搞定，一气之下直接把后端服务先停了，也监听3000端口，终于有了，可是。。。。。。我页面呢，这什么玩意

本地试了下，发现是脚本的问题，运行脚本不能叫PORT=3001，去掉之后本地打包没问题了

服务端更换package.json文件重新跑打包脚本，终于可以了，但是这里我们后端服务停了，所以找不到

尝试换后端监听端口,前端端口号换成3000，后端监听端口换成3001，前端请求里面的baseUrl跟nest里面的跨域地址也要记得更换，换完之后都重启一下

 

可以看到接口是通了，只不是超时了，看下后端日志,搞了半天，发现好像是dist目录下的main文件没更新，所以端口号没变，直接rm -rf dist删除dist目录重新打包

后面重新打包重新请求一直不通，没请求到后端，吃饭的时候我就在想，之前3000的端口为啥就没问题呢，突然灵光一现，端口号，安全组！！！！！！！！！！！！！！！，阿里云安全组设置，之前提过的，3001这个端口之前没加过，加上，再试下

直接调是没问题了，再启动前端工程，在前端工程里面调用一下试试

 

5、跨域问题解决

报跨域问题，我们之前后端项目里面是打开了跨域的，但是可以看到我们用的还是localhost，改一下,改完更新文件重新打包，重新启动项目，刷新页面

 通了，棒，这个返回是我自己做的拦截，到登录页登录一下，换个token回来,刷新页面

 

有了，新增一个用户试试

 

也没问题，其他的跟本地一样的就不再演示了，至此，完整流程走通，一个简单的用户体系就搞完了

6、结束

可以看到整篇文章跨度很大，从4月份一直写到了5月份，因为中间零零散散解决一些小问题，程序员从0到1搞新东西就是这样，会踩很多坑，有时候会在一个小问题上卡很久，一直尝试一直解决不了，有时候可能去吃个饭，转两圈突然一下就想到问题所在了

再加上工作的事，这段时间在找工作

打个小guanggao，现在是2024年5月，有要前端工程师的老板可以看看我，七年前端（加上实习七年半），node写后端也行，也能上手 ，前端主用vue，后端sql什么的都懂点，也喜欢鼓捣点实用的东西，不喜欢背八股，刷力扣啥的，CSDN写的文章全原创，你要在哪找到一样的，告诉我，我去锤他