【保姆级教程】Vue3+MySQL+Koa2部署到云服务器
完整的前后端部署流程,让你上线一个自己的项目!
·
1. 环境准备
- 阿里云ECS云服务器
- CentOS 7.5 64位
- Node:14.15.1
- MySQL:8.0
- nginx
2. 部署步骤
若还未搭建相关环境的同学,请务必先参考以下文章对环境配置后,才能进行项目部署的操作哦~(都是博主实测有效的步骤)
Node环境搭建:Centos7安装Node环境(只需五步)
MySQL环境搭建:Centos7安装MySQL(只需六步)
nginx安装:Centos7安装Nginx(只需三步)
1)Vue3 打包部署
- 打包
npm run build
(若项目中引入了element-plus
,打包时可能会报错,解决方法见第3点_过程问题
) - 在CentOS7下(博主这边通过
FinalShell
连接云服务器,你们可以自行选择如Xshell
之类的都可以),在/etc/nginx/conf.d/
路径下,新建一个default.conf
配置文件,配置内容如下
本例的项目存放路径示例为:根目录/www/guide
server
{
listen 80; # 监听的端口 http是80,https是443
server_name www.xxx.com; # 你的域名(若没有则可忽略)
# 页面访问路径
location / {
root /www/guide; # 指向index.html的目录
try_files $uri $uri/ /index.html; # 解决刷新报404的问题
index index.html index.htm; # 文件
}
}
- 在根目录,新建一个文件夹存放web项目
/www
- 将打包后的
dist
文件夹放入刚刚新建的文件夹中,这里以/www/guide/
举例(guide
是我本项目的项目名),至此完成前端项目部署!
2)MySQL 数据库部署
由于已经在本地准备好了测试用的表结构和数据,因此直接从本地拷贝一份到服务器上的MySQL即可
- 将本地数据库的结构和数据进行转储(如第一步:右键 -> 转储SQL文件)
- 将转储后的文件运行到服务器上的数据库中即可(如第二步:右键 -> 运行SQL文件即可),至此完成MySQL的部署!
3)Koa2 部署
-
拷贝项目(除了
node_modules
,其他都拷贝到服务器上,路径如图)
-
由于本例后端为
5050
端口,故需要到阿里云控制台开放5050
端口(进入阿里云控制台 - 安全组 - 配置规则可以配置) -
进入koa项目目录下,通过
cnpm install
安装依赖 -
运行koa项目
npm run dev
后如下图,至此完成Koa2的部署!
3. 过程问题
1)Vue3 打包时,若项目中包含 element-plus
可能会报错导致无法打包
解决方法:在Vue3项目的根目录下,进入 tsconfig.json
添加如下代码即可解决
{
"compilerOptions": {
...,
"skipLibCheck": true
}
}
更多推荐
已为社区贡献6条内容
所有评论(0)