[其他] 如何将node+vue项目部署到服务器

红太狼 2023-10-11 14:21 14阅读 0赞

## **背景** ##

1. 项目服务端是 koa + mysql，前端是 vue + antd，虽然是自己一个人开发，但是还是选择了前后端分离，这样后边更好分别维护（有计划要用go把服务端重写）

2. 服务器是买在阿里云，考虑到和开发环境一样会减少很多麻烦，所以装的是win server2012。

## 准备工作 ##

一、阿里云实例操作

1. 找到实例： 登录阿里云之后依次进入 “控制台” —— “云服务器ECS” —— “实例”，在实例列表中就能看到你的服务器了。

![format_png][]

实例

2. 找到我们需要的三个信息：公网IP（用于外网访问服务器资源）、远程连接（用于远程操作服务器）、安全组配置（用于配置让外网能访问的端口）。

![format_png 1][]

三个信息

3. 点击 “远程连接”，输入远程连接密码（在生成服务器的时候配置好的），进入服务器。

二、服务器环境配置

1. node 的安装与配置：通windows本地安装与配置，具体见下面链接：

[node的安装与配置][node]

2. mysql 的安装与配置：同样也和本地一样：

[mysql的安装 ][mysql_]

[mysql的配置][mysql]

这里需要注意的是8.0.4之后的mysql修改密码的命令是：

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql\_native\_password BY 'password';

3. 新建数据表：因为我本地已经把sql语句写好了，所以只需要复制粘贴执行一下就ok。也可以使用自己常用的可视化工具来操作，这里就不详细说了。

## 开始部署 ##

这里我们是前后端分别部署，前端项目就是一个静态页面，后端项目就是在服务器上启动一个服务。另外为了方便我这里就直接拿百度云传了，推荐使用 FileZilla 工具来管理服务器资源。

一、前端的部署

前端部署其实就是搭建一个网站

1. 在服务器上，搭建一个网站，详细教程见下边链接：

[server2012搭建一个网站][server2012]

2. 阿里云配置服务器的时候默认会配置 22、80、443、3389 这几个端口到安全组，如果没有可以手动配置下。

3. 用外网访问我们的公网IP，能够看到一个IIS的默认页面，证明我们成功了。

4. 将我们传到服务器上的前端项目（index.html + 一些js + 一些css + 一些静态资源）放到 C：inetpub/ wwwroot 目录下，替换默认生成的IIS页面，再访问我们的公网IP，这个时候发现页面已经变成我们项目了，部署成功！

二、服务端的部署

服务端部署，实际就是在服务端启动一个服务

1. 将上传到服务器的后端项目放在桌面（可以放在任意位置）

2. 进入cmd，一路cd到我们的项目根目录，然后执行 npm install 安装项目依赖

3. npm start 启动项目，这时候能看到我们服务启动地址是: localhost:8413

![format_png 2][]

服务端启动项目

4. 配置安全组：点击我们一开始三个信息中的“安全组配置”，进入安全组列表，点击右方“配置规则”，进入配置

![format_png 3][]

安全组列表

点击“添加安全组规则”，将我们刚刚启动的 8413 端口配置进去

![format_png 4][]

新增一条安全规则

5. 配置好之后，我们再用 外网IP：端口 （http://333.33.33.3:8413）这样的方式即可访问到启动的服务了。可以使用postman这样的工具来测试。

这里需要说明： 推荐使用 pm2 来启动和管理node服务，强迫症可以搜索一下去除接口中的端口号。

三、数据库自动备份

1. 新建 备份脚本，桌面新建一个bat 文件： backup.bat，文件中输入下面内容

@echo off

set "Ymd=%date:~,4%%date:~5,2%%date:~8,2%"

"C:/Program Files/MySQL/MySQL Server 8.0/bin/mysqldump" --opt -u root --password=yourpassword yourdatabase > D:/db\_backup/lily\_%Ymd%.sql

@echo on

set Ymd 是指保存文件的日期格式

C:/Program Files/MySQL/MySQL Server 8.0/bin/mysqldump 是指 mysqldump文件所在地址

yourpassword 是指你的数据库密码

yourdatabase 是指需要备份的database

D:/db\_backup/lily\_%Ymd%.sql 是指你备份文件的存放地址

修改好以上信息之后，双击 backup.bat 执行，发现备份目录里已经有了一份备份的mysql数据，证明脚本ok了！

2. 依次点击： 服务器管理器 —— 工具 —— 任务计划程序

![format_png 5][]

任务计划

3. 点击 “创建基本任务”，按照提示依次选择每天几点，操作是启动程序，然后选择我们刚刚新建的bat程序，最后保存

![format_png 6][]

创建基本任务

4. 创建成功后，在计划程序库中就能看到我们这项计划了

![format_png 7][]

任务计划

至此，部署完毕

其他

因为是测试服务器，只有1m带宽，实际下载速度也就100kb左右，然而前端项目因为引入了UI框架，打包之后首次加载资源大概在1.5m左右，因此首次进入的平均时间在15s左右，体验相当差。

想了个办法是在vue项目打包的时候，publicPath 配置成七牛云地址，然后把打包后的资源都放到七牛云上边。服务器上只放一个index.html。实际测试了一下，平均访问速度控制在了1s以内，七牛云牛X！

所以针对个人或者小公司，带宽上不去的时候这也许是一个方法

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzUzOTQxMy0zNDQyMmMzOGFjYTI1YzMxLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzEyMDAvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzUzOTQxMy03MDVjMDAzNWRmNTk1ZDFiLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzEyMDAvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[node]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.cnblogs.com%2Fzhouyu2017%2Fp%2F6485265.html
[mysql_]: https://links.jianshu.com/go?to=https%3A%2F%2Fblog.csdn.net%2Fclouderpig%2Farticle%2Fdetails%2F79556149
[mysql]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.jb51.net%2Farticle%2F140952.htm
[server2012]: https://links.jianshu.com/go?to=https%3A%2F%2Fblog.csdn.net%2Fweixin_42973273%2Farticle%2Fdetails%2F84238939
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzUzOTQxMy1mZWViMTcyNTc4NGVmYmU2LnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzEyMDAvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzUzOTQxMy05MWExNGVhNjg3NmQ3MTJkLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzEyMDAvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzUzOTQxMy1iOWUwNzA5NzI0NGJlMGY1LnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzEyMDAvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzUzOTQxMy02NmI0NzI2ZDQ0MTRiNTdiLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzEyMDAvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzUzOTQxMy1kMjUwM2FjYzc1NjJjNWIwLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzEyMDAvZm9ybWF0L3dlYnA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzUzOTQxMy1mOTIwNmFkZDY2OTY2YmJhLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzEyMDAvZm9ybWF0L3dlYnA?x-oss-process=image/format,png