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 或者域名试试了.

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

本章完!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/675332.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CTFshow web(php命令执行 45-49)

基础知识&#xff1a; 1.绕过cat使用&#xff1a; tac more less head tac tail nl od(二进制查看) vi vim sort uniq rev 2.绕过空格用&#xff1a; %09 <> ${IFS} $IFS$ {cat,fl*} %20 注&#xff1a; %09 ##&#xff08;Tab&#xff09; %20 ##&#xff08;spa…

请手写几种js排序算法

什么是排序算法 冒泡排序选择排序插入排序快速排序归并排序&#xff08;Merge Sort&#xff09; 思想实现测试分析动画 快速排序 &#xff08;Quick Sort&#xff09; 思想实现测试分析动画 思考&#xff1a;快排和归并用的都是分治思想&#xff0c;递推公式和递归代码也非常相…

Linux下的socket操作

一、TCP服务端 创建一个TCP服务器的基本操作&#xff1a; 创建一个套接字&#xff08;socket&#xff09;&#xff1a;使用socket函数绑定套接字&#xff08;socket&#xff09;:将套接字绑定到一个特定的IP地址和端口号上&#xff0c;这些信息要用结构体sockaddr_in来保存监…

vue3 之 商城项目—一级分类

整体认识和路由配置 场景&#xff1a;点击哪个分类跳转到对应的路由页面&#xff0c;路由传对应的参数 router/index.js import { createRouter, createWebHashHistory } from vue-router import Layout from /views/Layout/index.vue import Home from /views/Home/index.vu…

Spring Boot + 七牛OSS: 简化云存储集成

引言 Spring Boot 是一个非常流行的、快速搭建应用的框架&#xff0c;它无需大量的配置即可运行起来&#xff0c;而七牛云OSS提供了稳定高效的云端对象存储服务。利用两者的优势&#xff0c;可以为应用提供强大的文件存储功能。 为什么选择七牛云OSS? 七牛云OSS提供了高速的…

Akamai 如何揪出微软 RPC 服务中的漏洞

近日&#xff0c;Akamai研究人员在微软Windows RPC服务中发现了两个重要漏洞&#xff1a;严重程度分值为4.3的CVE-2022-38034&#xff0c;以及分值为8.8的CVE-2022-38045。这些漏洞可以利用设计上的瑕疵&#xff0c;通过缓存机制绕过MS-RPC安全回调。我们已经确认&#xff0c;所…

nodejs+vue高校实验室耗材管理系统_m20vy

用户功能&#xff1a; 登录后要有一个首页 比如:可以看见目前的耗材消耗记录&#xff0c;可做成图表菜单栏在左侧显示 1.个人信息管理 可以对基本信息进行修改&#xff0c;(修改密码时需要验证) 2.耗材管理&#xff08;耗材信息&#xff09; 普通用户可以查询当前相关耗材信息[…

《走进科学》灵异事件:Nginx配置改了之后一直报错

想要安装WoWSimpleRegistration&#xff0c;就定下来要用nginxphp8 &#xff0c;结果nginx那里加上php的支持之后一直报错&#xff1a; $ sudo service nginx restart Job for nginx.service failed because the control process exited with error code. See "systemctl…

问题:银行账号建立以后,一般需要维护哪些设置,不包括() #学习方法#经验分享

问题&#xff1a;银行账号建立以后&#xff0c;一般需要维护哪些设置&#xff0c;不包括&#xff08;&#xff09; A&#xff0e;维护结算科目对照 B&#xff0e;期初余额初始化刷 C&#xff0e;自定义转账定义 D&#xff0e;对账单初始化 参考答案如图所示

VMware17上安装centos7.9

一、下载安装包&#xff1a; 1、VMware安装 VMware 下载地址&#xff1a; https://www.vmware.com/cn/products/workstation-pro.html VMware下载后安装即可 安装教程可以参考VMware安装教程 2、CentOs7.9下载地址&#xff1a; http://mirrors.aliyun.com/centos/7.9.2009/iso…

【flink状态管理(三)】StateBackend的整体设计、StateBackend创建说明

文章目录 一. 状态后端概述二. StateBackend的整体设计1. 核心功能2. StateBackend的UML3. 小结 三. StateBackend的加载与初始化1. StateBackend创建概述2. StateBackend创建过程 一. 状态后端概述 StateBackend作为状态存储后端&#xff0c;提供了创建和获取KeyedStateBacke…

蓝桥杯(Web大学组)2022国赛真题:水果消消乐

思路&#xff1a; 记录点击次数&#xff0c;点击次数为1时&#xff0c;记录点击下标&#xff08;用于隐藏or消除&#xff09;、点击种类&#xff0c;点击次数为2时&#xff0c;判断该下标所对应种类与第一次是否相同 相同&#xff1a;两个都visibility:hidden &#xff08;占…

【数据分享】1929-2023年全球站点的逐月平均风速(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、能见度等指标&#xff0c;说到气象数据&#xff0c;最详细的气象数据是具体到气象监测站点的数据&#xff01; 有关气象指标的监测站点数据&#xff0c;之前我们分享过1929-2023年全球气象站…

Redis事务和Redis管道

文章目录 1.Redis事务1.1 Redis事务是什么&#xff0c;能干嘛&#xff1f;1.2 Redis事务和数据库事务的差异1.3 Redis事务的相关命令 2.Redis管道2.1 Redis管道是什么2.2 管道与原生批量命令对比2.3 管道与事务对比2.4 使用管道注意事项 1.Redis事务 1.1 Redis事务是什么&…

ssh和sftp服务分离

目录 一、增加sftp的deamon二、增加sftp的service三、其他配套文件四、修改配置文件五、分别重启两个服务&#xff1a; 由于安全需要&#xff0c;客户这边想把sftp使用的端口与ssh使用的端口分开。 我们知道sftp没有自己的服务器守护进程&#xff0c;它需要依赖sshd守护进程来…

数学建模-灰色预测最强讲义 GM(1,1)原理及Python实现

目录 一、GM&#xff08;1&#xff0c;1&#xff09;模型预测原理 二、GM&#xff08;1&#xff0c;1&#xff09;模型预测步骤 2.1 数据的检验与处理 2.2 建立模型 2.3 检验预测值 三、案例 灰色预测应用场景&#xff1a;时间序列预测 灰色预测的主要特点是模型使用的…

django安装使用

Django 是一个高级的 Python Web 框架&#xff0c;用于构建安全和可维护的网站。以下是如何安装和使用 Django 的步骤。 一&#xff1a;安装 确保你安装了 Python 在 Django 3.x 中&#xff0c;官方支持 Python 3.6, 3.7, 3.8, 3.9, 和 3.10。你可以使用 python --version 或…

扩展说明: 指令微调 Llama 2

这篇博客是一篇来自 Meta AI&#xff0c;关于指令微调 Llama 2 的扩展说明。旨在聚焦构建指令数据集&#xff0c;有了它&#xff0c;我们则可以使用自己的指令来微调 Llama 2 基础模型。 目标是构建一个能够基于输入内容来生成指令的模型。这么做背后的逻辑是&#xff0c;模型如…

基于OpenCV灰度图像转GCode的斜向扫描实现

基于OpenCV灰度图像转GCode的斜向扫描实现基于OpenCV灰度图像转GCode的斜向扫描实现 引言激光雕刻简介OpenCV简介实现步骤 1.导入必要的库2. 读取灰度图像3. 图像预处理4. 生成GCode5. 保存生成的GCode6. 灰度图像斜向扫描代码示例 总结 系列文章 ⭐深入理解G0和G1指令&…

Python 深入理解 os 和 sys 模块

Python 深入理解 os 和 sys 模块 OS 介绍代码智能连接&#xff08;拼接&#xff09;路径创建目录展示&#xff08;列出目录&#xff09;删除文件重命名文件或目录 sys 介绍代码命令行参数处理 (sys.argv)标准输入输出重定向 (sys.stdin, sys.stdout, sys.stderr)&#xff1a;解…