Vue 3 + Koa2 + MySQL 开发和上线部署个人网站

Vue 3 + Koa2 + MySQL 开发和上线部署个人网站

记录个人的一个操作步骤, 顺序不分先后, 嫌啰嗦请出门右转!

环境说明:
服务器: 阿里云轻量应用服务器
服务器系统: CentOS8.2
本地环境: macOS 12.7.2
Node: 20.10.0
MySQL: 8.0.26
Vue: 3.3.11
Koa: 2.7.0
pm2: 5.3.1
Nginx: 1.14.1

一, 环境配置

除 Nginx 外, 服务器环境 和 本地环境 都是上述配置, Nginx 仅在 服务器端有配置.
MySQL 也可以不在本地安装, 我项目中一直使用的都是服务器上的数据库.
本地和服务器版本 保持一致 的目的是本地调试通过之后, 再上传服务器的话不会有什么误差.

环境配置的具体步骤就不再一一赘述了. 我是阿里云服务器, 所以直接找的 阿里云文档, 文档步骤非常清晰.

二, 前端配置

使用 Vue 官网项目创建指令, 创建单文件应用.

npm create vue@latest

根据我个人项目需求, 我选择配置了 Vue Router, Pinia, 没有选用 TS.

这里提一句, Vue 3之后, 使用 Vite 来搭建的项目框架, 好多配置都不用再新建 vue.config.js 来配置, 可以通过 vite.config.js 来配置.

跨域配置

这部分专门写了一篇博客, 传送门.

最开始是在 Koa 项目中配置了 Cors 来实现的跨域, 后期修改为 前端配置 proxy 实现. 实际开发过程的话, 还是建议前端配置比较方便, 要不然后端上线还要再修改关于 Cors 的配置.

三, 后端配置

项目创建可以参考这篇文章, 注意使用的是 koa2, 不要弄错, 传送门.

koa2 -e my-app

跨域

起初使用 koa2-cors 在后端配置了跨域资源共享, 后期修改为 Vue 配置 proxy 实现. 这里顺便说一下使用方式:

安装指令:

npm install --save koa2-cors

然后, 在 app.js 文件中进行配置

// 跨域相关配置
const cors = require('koa2-cors') //引入koa2-cors
 
app.use(cors()); //后端允许跨域访问

注意放置位置, 要在 路由的 use 之前.

pm2.conf.json

因为要使用 pm2 来管理后端项目运行, 因此本地全局安装了 pm2.

安装指令:

npm install pm2@latest -g

然后再在 koa 项目的根目录中新建了 pm2.conf.json 文件, 用于 pm2 的相关配置, 我的配置内容如下:

{