vue3+koa2+mysql项目部署

170 阅读3分钟

一、服务器

1、选择部署服务器

阿里云、腾讯云新用户可以免费试用一个月的服务器,本次部署试用了腾讯云服务器进行部署。

阿里云服务器试用地址:free.aliyun.com

腾讯云服务器试用地址:cloud.tencent.com/act/pro/fre…

2、参考使用教程创建服务器

创建Linux实例: cloud.tencent.com/document/pr…

控制台地址:console.cloud.tencent.com/lighthouse/…

进入控制台后,点击更多-查看详情,可查看已创建服务器的详情

二、宝塔

1、登录服务器

点击登录进入服务器命令行

2、给服务器安装宝塔

登录成功后,安装宝塔

参考链接:www.bt.cn/new/downloa…

本次服务器使用的是centos操作系统,故选择相应脚本命令

在服务器命令行输入该命令安装宝塔

安装成功后命令行会弹出宝塔面板的登录地址、账号和密码

3、登录宝塔面板

4、给服务器安装需要的软件

点击软件商城 -> 安装部署项目所需的mysql、nginx、node.js版本管理工具。

在node.js版本管理工具中选择和要部署的项目一致的node版本,特别的,可点击更新列表刷新。

注:如有问题,可参考下面的文章在服务器中安装宝塔:blog.csdn.net/weixin_4383…

三、部署数据库

1、创建数据库

点击数据库 -> 添加数据库 -> 填写数据库名、用户名、密码 -> 点击确定,创建数据库。

数据库名称与部署的后端项目中的配置保持一致:

点击确定,可以看到数据库已经创建出来了

2、导出本地数据库数据

选择项目使用的数据库,右击 -> 点击工具 -> 点击转储数据库

点击下一步

选择想要保存的地址,点击开始。

在文件夹中找到保存的sql文件,重命名文件,与后端项目配置的数据库名称保存一致。

3、导入数据库表结构及相应数据

点击导入 -> 点击从本地上传,找到保存的sql文件上传。

导入成功后,可点击工具查看导入的表文件信息

4、放行端口

在腾讯云控制台 -> 点击防火墙 -> 点击添加规则 -> 添加端口号3306(数据库一般都是3306)

四、部署koa项目

1、导入文件

点击文件 -> 找到wwwroot目录 -> 将koa项目复制在此。

前端项目与此类似,但需要注意的是,前端只需要复制打包好的dist文件夹。

2、部署后端项目

点击文件 -> 点击Node项目 -> 点击添加Node项目,按下面的图片填写信息

需要注意的是,项目端口要与部署的后端项目中的端口保持一致

3、放行端口

与之前类似,放行koa项目的端口,端口号与项目端口保持一致

五、部署前端项目

1、导入文件

2、部署前端项目

点击网站 -> 点击PHP部署 -> 点击添加站点,按照下面的图片填写信息

3、配置nginx代理

点击设置 -> 点击配置文件,按照下图配置相关信息:

    location /api/ {
      proxy_set_header Host $http_host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header REMOTE-HOST $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_pass http://122.51.11.96:8088/;
    }
    
    location /avatar/ {
      expires 24h;
      proxy_set_header Host $http_host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header REMOTE-HOST $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_pass http://122.51.11.96:8088/avatar/;
    }

其中api字段与前端项目的代理有关:

avatar为后端存储静态资源的文件夹:

tips: 对于前端项目的跨域代理问题,本地运行时在vue.config.js(webpack)或vite.config.js(vite)中进行配置,服务器部署时在nginx中进行配置。

4、放行端口

与之前类似,放行前端项目的端口,端口号与项目端口保持一致