一、服务器
1、选择部署服务器
阿里云、腾讯云新用户可以免费试用一个月的服务器,本次部署试用了腾讯云服务器进行部署。
阿里云服务器试用地址:free.aliyun.com
腾讯云服务器试用地址:cloud.tencent.com/act/pro/fre…
2、参考使用教程创建服务器
创建Linux实例: cloud.tencent.com/document/pr…
控制台地址:console.cloud.tencent.com/lighthouse/…
进入控制台后,点击更多-查看详情,可查看已创建服务器的详情
二、宝塔
1、登录服务器
点击登录进入服务器命令行
2、给服务器安装宝塔
登录成功后,安装宝塔
本次服务器使用的是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、放行端口
与之前类似,放行前端项目的端口,端口号与项目端口保持一致