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

记录个人的一个操作步骤, 顺序不分先后, 嫌啰嗦请出门右转!

环境说明:

服务器: 阿里云轻量应用服务器

服务器系统: CentOS8.2

本地环境: macOS 12.7.2

Node: 20.10.0

MySQL: 8.0.26

Koa: 2.7.0

pm2: 5.3.1

Nginx: 1.14.1

一, 环境配置

除 Nginx 外, 服务器环境和本地环境都是上述配置, Nginx 仅在服务器端有配置.

MySQL 也可以不在本地安装, 我项目中一直使用的都是服务器上的数据库.

本地和服务器版本 保持一致 的目的是本地调试通过之后, 再上传服务器的话不会有什么误差.

环境配置的具体步骤就不再一一赘述了. 我是阿里云服务器, 所以直接找的阿里云文档, 文档步骤非常清晰.

二, 前端配置

使用 Vue 官网项目创建指令, 创建单文件应用.

bash 复制代码

npm create vue@latest

根据我个人项目需求, 我选择配置了 Vue Router, Pinia, 没有选用 TS.

这里提一句, Vue 3之后, 使用 Vite 来搭建的项目框架, 好多配置都不用再新建 vue.config.js 来配置, 可以通过 vite.config.js 来配置.

跨域配置

这部分专门写了一篇博客, 传送门.

最开始是在 Koa 项目中配置了 Cors 来实现的跨域, 后期修改为前端配置 proxy 实现. 实际开发过程的话, 还是建议前端配置比较方便, 要不然后端上线还要再修改关于 Cors 的配置.

三, 后端配置

项目创建可以参考这篇文章, 注意使用的是 koa2, 不要弄错, 传送门.

bash 复制代码

koa2 -e my-app

跨域

起初使用 koa2-cors 在后端配置了跨域资源共享, 后期修改为 Vue 配置 proxy 实现. 这里顺便说一下使用方式:

安装指令:

bash 复制代码

npm install --save koa2-cors

然后, 在 app.js 文件中进行配置

javascript 复制代码

// 跨域相关配置
const cors = require('koa2-cors') //引入koa2-cors
 
app.use(cors()); //后端允许跨域访问

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

pm2.conf.json

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

安装指令:

bash 复制代码

npm install pm2@latest -g

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

javascript 复制代码

{
  "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 的话, 使用的指令就可以是:

bash 复制代码

pm2 start pm2.conf.json

pm2 常用的几个指令:

bash 复制代码

# 通过 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 使用的终端指令历史记录, 大家可以参考:

bash 复制代码

# 查看 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 的系统, 可能跟你的不一样, 以下是我使用的指令:

bash 复制代码

yum install nginx

service nginx start

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

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

七, 上线准备

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

node 的作用就不再赘述了.

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

node 安装

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

bash 复制代码

# 要使用 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 安装

直接上指令:

bash 复制代码

# 安装 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 的配置文件, 我的配置文件核心内容如下:

bash 复制代码

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

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

本章完!