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

2024-02-06 13:44
文章标签 javascript mysql 部署 网站 开发 vue frontend 个人 上线 database koa2

本文主要是介绍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-corsapp.use(cors()); //后端允许跨域访问

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

pm2.conf.json

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

安装指令:

npm install pm2@latest -g

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

{"apps": {"name": "xxx-project","script": "bin/www","watch": true,"ignore_watch": ["node_modules","logs"],"instances": 1,"error_file": "logs/err.log","out_file": "logs/out.log","log_date_format": "YYYY-MM-DD HH:mm:ss"}
}

之后本地再启动 koa 的话, 使用的指令就可以是:

pm2 start pm2.conf.json

pm2 常用的几个指令:

# 通过 pm2.config.json 来启动某个服务
pm2 start pm2.conf.json# 显示 pm2 所管理的服务列表
pm2 ls 或者 pm2 l# 关闭 某一个 pm2.conf.json 的服务
pm2 stop pm2.conf.json# 根据 xxx_name 来启动某一个服务
pm2 start xxx_name# 根据 xxx_name 来关闭某一个服务
pm2 stop xxx_name# 删除所有服务
pm2 delete all

四, 本地 MySQL 安装

Mac 中安装 MySQL 最早一直使用的是 Homebrew, 这次 Homebrew 反复探索, 发现不好使了, 也有一篇博客记录安装方式, 有需要的小伙伴可以去围观

不过, 实际开发时, 我并没有使用本地 MySQL, 直接使用的服务器上的 MySQL.

五, 阿里云服务器安装 MySQL

具体步骤记不清了, 以下是安装 MySQL 使用的终端指令历史记录, 大家可以参考:

# 查看 dnf 指令是否可用
dnf# 使用 dnf 安装 mysql
dnf install mysql-server -y# 启动 mysql, sudo 可以不用加
sudo systemctl start mysqld# 开启启动 mysql, 同样 sudo 可以不用加
sudo systemctl enable mysqld# 查看 mysql 版本
mysqladmin --version# 查看 mysql 的状态
systemctl status mysqld# 对 mysql 进行安全配置
sudo mysql_secure_installation
# 具体配置项略, 网上有大把 mysql 安全配置项的解释, 不再赘述# 使用刚刚配置好的密码登录 mysql
mysql -uroot -p

最好是根据自己 服务器的系统版本来搜索对应的安装步骤.

六, 服务器安装 Nginx

直接上指令.
再次提醒: 我的服务器安装的是 CentOS 8.2 的系统, 可能跟你的不一样, 以下是我使用的指令:

yum install nginxservice nginx start

接下来就是编码的过程了, 前后端路由注意对应就行了

提一句, 域名购买和备案按照官网要求的走就行了.

七, 上线准备

上线前服务器还需要安装 node 和 pm2

node 的作用就不再赘述了.

pm2 的作用是管理后端项目, 使用其可以一站式管理所有的后端应用的 启动/停止 等, 非常方便.

node 安装

我这里使用了 nvm 来管理 node 版本, 具体指令:

# 要使用 git 来安装 nvm, 因此先安装 git
yum install git -y# 使用 git 克隆(安装) nvm
git clone https://gitee.com/mirrors/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`# 依次运行以下命令，配置NVM的环境变量。
echo ". ~/.nvm/nvm.sh" >> /etc/profile
source /etc/profile# 运行以下命令，修改npm镜像源为阿里云镜像，以加快Node.js下载速度。
export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node# 运行以下命令，查看Node.js版本。
nvm list-remote# 使用 nvm 安装某版本的 node
nvm install v20.10.0# 输出 nvm 所管理的 node 版本
nvm ls# 验证 node 和 npm 版本, 有了 nvm ls 后, 不验证也没有问题, 奈何强迫症
node -v
npm -v

这里有 阿里云 的详细步骤文档, 传送门

pm2 安装

直接上指令:

# 安装 pm2
npm install pm2@latest -g# 验证安装是否成功
pm2 -v

关于 pm2 的使用, 请自行查看官网介绍.

八, 上线

这里会涉及几个问题:
1, 前端(npm run build)之后的 dist 放置在哪里
2, 后端 koa 工程放置在哪里

1, 前端文件放置位置

放置于 Nginx 静态资源放置位置由 Nginx 来管理前端项目.
位置: /usr/share/nginx/html/XXX

注意: 这个 XXX 是我用来替换 dist 这个文件夹的, 因为以后还想放置其他项目, 都是 dist 就不对了, 因此就新建了文件夹, 然后将前端打包后 dist 文件夹中的内容, 上传到了这个 XXX 文件夹中.

至于如何 上传文件至服务器 , 这个需求阿里云帮助文档中提供了好几种方式, 我使用的是 FilleZilla.

这里设置好之后, 还需要同步设置 Nginx 的配置文件, 我的配置文件核心内容如下:

server {listen       80 default_server;listen       [::]:80 default_server;server_name  _;# 静态资源, 也就是 前端页面需要放置的位置# root         /usr/share/nginx/html; 默认配置方式# html 文件夹中新增 XXX 文件夹之后修改# root         /usr/share/nginx/html/XXX;# 又换了一种配置方式, 注释了上一行 root 格式的配置location / {root   html/XXX;index  index.html index.htm;# 主要是这个 try_files 字段的配置, 可以保证刷新后页面正常, try_files 表示检查文件是否存在，返回第一个找到的文件，这里设置是index.html内部重定向。# 变量解释:# 1, try_files: 固定语法# 2, $uri: 指代home文件(ip地址后面的路径，假如是127.0.0.1/index/a.png，那就指代index/a.png)# 3, $uri/: 指代home文件夹# 4, /index.html: 向ip/index.html 地址发起请求# 尝试解析下列2个文件/文件夹(自动分辨出，IP后面的路径是文件还是文件夹)， $uri/$uri/，# 如果解析到，返回第一个，# 如果都没有解析到，向 127.0.0.1/index.html 发起请求跳转(该路由必须真实，不然会报错）try_files $uri $uri/ /index.html;}# Load configuration files for the default server block.# 配置文件地址include /etc/nginx/default.d/*.conf;# 反向代理location /XXXApi/ { # 前端访问 XXXApi 下的接口时，会代理到proxy_pass指向的地址proxy_set_header X-Real-IP $remote_addr;proxy_set_header Host $http_host;proxy_pass http://127.0.0.1:3000; # 反向代理，用户访问api接口时，指向本地服务3000端口}error_page 404 /404.html;location = /40x.html {}error_page 500 502 503 504 /50x.html;location = /50x.html {}
}

这里有两个重要配置 location / 和 location /XXXApi/ :
location /: 这里主要是管理 80 端口的静态资源, 也就是前端 html, css, js 等文件该从哪里返回给浏览器, 怎么返回等问题.
location /XXXApi/: 这个配置是反向代理, 目的是支持 html 中的网络请求的. 这样配置的意思是 请求 XXXApi 这个接口时, 指向本地 3000 端口, 这个 3000 端口就是后端 koa 项目所运行的端口了.

2, 后端文件放置位置

后端文件我放置于 root 文件夹下: /root/xxx_server

操作步骤:
1, 本地的 koa 工程, 除 node_modules 文件夹之外, 全部上传至 xxx_server 文件夹
2, 服务器打开终端, cd 进 xxx_server 文件夹, 然后 执行: npm i 来加载 xxx_server 所需的 node_modules 文件
3, 然后再执行终端指令: pm2 start pm2.conf.json

以上操作之后, 项目就可以在服务器运行了, 可以在浏览器输入自己的 ip 或者域名试试了.

接下来, 再起一篇博客, 记录以下自己在项目中遇到的一些问题和处理方式.

本章完!

这篇关于Vue 3 + Koa2 + MySQL 开发和上线部署个人网站的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/684506。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
闲置电脑也能活出第二春？鲁大师AiNAS让你动动手指就能轻松部署

闲置电脑也能活出第二春？鲁大师AiNAS让你动动手指就能轻松部署

对于大多数人而言，在这个“数据爆炸”的时代或多或少都遇到过存储告急的情况，这使得“存储焦虑”不再是个别现象，而将会是随着软件的不断臃肿而越来越普遍的情况。从不少手机厂商都开始将存储上限提升至1TB可以见得，我们似乎正处在互联网信息飞速增长的阶段，对于存储的需求也将会不断扩大。对于苹果用户而言，这一问题愈发严峻，毕竟512GB和1TB版本的iPhone可不是人人都消费得起的，因此成熟的外置存储方案开
阅读更多...
SQL中的外键约束

SQL中的外键约束

外键约束用于表示两张表中的指标连接关系。外键约束的作用主要有以下三点： 1.确保子表中的某个字段（外键）只能引用父表中的有效记录2.主表中的列被删除时，子表中的关联列也会被删除3.主表中的列更新时，子表中的关联元素也会被更新 子表中的元素指向主表 以下是一个外键约束的实例展示
阅读更多...
基于MySQL Binlog的Elasticsearch数据同步实践

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展，我们的业务数据越来越多，单纯使用 MySQL 已经不能满足我们的数据查询需求，例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后，随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步，我们目前的解决方案是建立数据中间表。把需要检索的业务数据，统一放到一张M
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
如何去写一手好SQL

如何去写一手好SQL

MySQL性能 最大数据量 抛开数据量和并发数，谈性能都是耍流氓。MySQL没有限制单表最大记录数，它取决于操作系统对文件大小的限制。 《阿里巴巴Java开发手册》提出单表行数超过500万行或者单表容量超过2GB，才推荐分库分表。性能由综合因素决定，抛开业务复杂度，影响程度依次是硬件配置、MySQL配置、数据表设计、索引优化。500万这个值仅供参考，并非铁律。 博主曾经操作过超过4亿行数据
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2