1. 环境准备

  • 阿里云ECS云服务器
  • CentOS 7.5 64位
  • Node:14.15.1
  • MySQL:8.0
  • nginx

2. 部署步骤

  若还未搭建相关环境的同学,请务必先参考以下文章对环境配置后,才能进行项目部署的操作哦~(都是博主实测有效的步骤)

1)Vue3 打包部署

  1. 打包 npm run build(若项目中引入了 element-plus,打包时可能会报错,解决方法见第3点_过程问题
  2. 在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;    # 文件
        }
	}
  1. 在根目录,新建一个文件夹存放web项目 /www
  2. 将打包后的 dist 文件夹放入刚刚新建的文件夹中,这里以 /www/guide/ 举例(guide 是我本项目的项目名),至此完成前端项目部署!

在这里插入图片描述


2)MySQL 数据库部署

由于已经在本地准备好了测试用的表结构和数据,因此直接从本地拷贝一份到服务器上的MySQL即可

  1. 将本地数据库的结构和数据进行转储(如第一步:右键 -> 转储SQL文件)
  2. 将转储后的文件运行到服务器上的数据库中即可(如第二步:右键 -> 运行SQL文件即可),至此完成MySQL的部署!

在这里插入图片描述


3)Koa2 部署

  1. 拷贝项目(除了 node_modules,其他都拷贝到服务器上,路径如图)
    在这里插入图片描述

  2. 由于本例后端为5050端口,故需要到阿里云控制台开放5050端口(进入阿里云控制台 - 安全组 - 配置规则可以配置)

  3. 进入koa项目目录下,通过cnpm install安装依赖

  4. 运行koa项目npm run dev后如下图,至此完成Koa2的部署!
    在这里插入图片描述

3. 过程问题

1)Vue3 打包时,若项目中包含 element-plus 可能会报错导致无法打包

解决方法:在Vue3项目的根目录下,进入 tsconfig.json 添加如下代码即可解决

{
	"compilerOptions": {
        ...,
	    "skipLibCheck": true
    }
}
Logo

前往低代码交流专区

更多推荐