全栈Express+Vue3+Nextjs开发+部署笔记

字数统计: 2.2k字   |   阅读时长: 9分

本文包含项目展示，Express+Vue3+Nextjs开发和部署笔记，还包括对相关技术栈的学习笔记。
个人博客系统参考iizyd的express-blog项目。
项目使用 Express、Vue3、Next.js 采用前后端分离方案实现了一个简单的个人博客系统，包含后端、前端、数据库、服务端渲染等技术。分为3个小项目：后台接口(backend)、后端管理(backend-web )、博客前端(blog-web)。使用ncc、pm2进行服务打包部署。

效果展示

图-express_blog_1.png
图-express_blog_2.png
图-express_blog_3.png
图-express_blog_4.png

  • 开发环境
    node：18.20.1（推荐使用nvm进行node版本管理）
    系统：Windows

    开发

    数据库初始化

    安装好 MySQL 后，通过执行 backend/init.sql 来初始化(创建)数据表express_blog。
    图-sql

    方法1:dbeaver导入sql文件

    参考：DBeaver执行外部sql文件 https://blog.csdn.net/wsnbbaa/article/details/129089538

    方法2: 在命令行中执行(推荐)

    在 backend 目录下执行以下命令
    直接登录mysql客户端后，通过source命令执行sql脚本文件
    1
    2
    3
    mysql -u root -p
    # 进入到了MySQL的命令行工具
    source ./init.sql;

启动后端接口服务（backend）

技术栈

  • 日志：winston 、winston-daily-rotate-file
  • orm：prisma
  • 数据库：mysql
  • 参数校验：class-validator
  • 配置读取：dotenv
  • 鉴权
  • Typescript
  • Express

参考：Node ORM 框架 Prisma 快速上手
Prisma 客户端的默认位置：如果没有在 prisma/schema.prisma文件内自定义output，则默认generator将 Prisma 客户端（Prisma Client） 生成到文件夹/node_modules/.prisma/client中。

  • 自定义output路径，自定义位置导入PrismaClient
    1
    2
    3
    4
    generator client {
      provider = "prisma-client-js"
      output = "../src/generated/client"
    }

为该模式文件运行prisma generate命令后，Prisma 客户端包将位于：.express-blog/backend/src/generated/client。
从自定义位置导入PrismaClient：
修改文件.express-blog/backend/src/common/db.ts

1
2
// import { PrismaClient } from '@prisma/client'
import { PrismaClient } from '../generated/client'

  • prisma 命令：

    1
    2
    3
    4
    5
    6
    7
    init  // 在应用中初始化Prisma
    这个命令的效果是在命令所在目录，也就是现在的根目录中，创建一个 .env 文件，一个 prisma 目录，并在此目录下创建 schema.prisma 文件
    generate // 主要用来生成 Prisma Client，一旦Prisma Schema 文件发生了变动，比如修改了模型，就需要再来执行下这个命令，重新生成 Prisma Client。
    db //管理数据库的模式和生命周期
    npx prisma db push // 将Prisma 模型同步到数据库，对于一个新项目，空项目。它会创建数据库的schema，并且使用 Prisma schema 同步数据库，还会“偷偷”执行下 prisma generate 命令来生成 Prisma Client。
    npx prisma db pull // 根据配置的数据库 URI，链接数据库、更新 schema
    migrate //迁移数据库

  • 开发
    在 backend 目录下执行以下命令来安装依赖，修改.env的Prisma 配置DATABASE_URL并启动服务。

    1
    2
    3
    4
    5
    //如果NPM安装依赖卡在SILL IDEALTREE BUILDDEPS： npm cache clean --force
    // --legacy-peer-deps 解决npm i报错unable to resolve dependency tree
    // --verbose 启用详细日志输出
    npm install --legacy-peer-deps --verbose
    npm run dev

访问 http://127.0.0.1:9000

启动后台系统-前端（backend-web）

技术栈

  • Vue3
  • VueRouter4
  • Vite
  • TS
  • NaiveUI
    在 backend-web 目录下执行以下命令来安装依赖并启动
    1
    2
    npm install
    npm run dev

访问 http://127.0.0.1:5173/ ，默认账户:admin 密码：123456。
建议换成hash路由，方便部署。

1
2
3
4
5
6
7
8
9
// import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
...
const router = createRouter({
	// history: createWebHistory(),
	history: createWebHashHistory(),
	routes
})
...

启动博客前端（blog-web)

技术栈

  • Next.js (v13)
  • TS
  • React
  • Tailwind Css
    参考：
    NextJS | 聊点不一样的 Next.js、
    Next.js 学习笔记（六）——缓存
    Next.js 提供了简洁的 API 和文件结构，使得构建 React 应用变得更加简单。它内置了许多常用功能，如路由、服务器渲染、静态导出等，从而降低了学习曲线。支持服务器渲染：通过服务器渲染，Next.js 能够在服务端生成页面，提高了首屏加载速度和 SEO 的友好性。这对于构建需要考虑性能和搜索引擎优化的应用来说非常重要。静态导出能力：Next.js 允许将整个应用或特定页面静态导出，这意味着你可以将应用部署到任何静态托管服务上，而无需服务器支持。这对于构建轻量级应用或在环境受限的情况下部署应用非常有用。灵活的数据获取方式：Next.js 提供了多种数据获取方式，包括静态生成、服务器渲染和客户端渲染，开发者可以根据应用的需要选择最合适的方式。
    在 blog-web 下执行以下命令来安装依赖并启动
    1
    2
    npm i
    npm run dev

访问 http://localhost:3000

部署

前端工程化并行解决方案-concurrently

如果 npm 脚本里面需要执行多个任务，那么需要明确它们的执行顺序。
如果是并行执行（即同时的平行执行），可以使用&符号。
$ npm run script1.js & npm run script2.js
如果是继发执行（即只有前一个任务成功，才执行下一个任务），可以使用&&符号。
$ npm run script1.js && npm run script2.js
这两个符号是 Bash 的功能。
需要注意的是，虽然并行运行多个命令可以加快执行速度，但是它也可能引入一些问题。例如，如果多个命令都在同一个目录下操作文件，就可能会发生文件冲突的问题。因此，在使用并行运行多个命令时，你需要仔细考虑可能的风险，并采取相应的措施来避免这些问题。
还可以使用concurrently这个包来同时运行多个命令，无论这些命令是npm脚本还是其他类型的命令。
npm 运行多个不同目录中的指令（concurrently：执行多个指令 –prefix：执行其他目录中的指令），示例：

1
2
3
4
5
6
"scripts": {
  "server:dev": "npm run dev --prefix backend",
  "backend-web:dev": "npm run dev --prefix backend-web",
  "blog-web:dev": "npm run dev --prefix blog-web",
  "dev:all": "concurrently \"npm run server:dev\" \"npm run blog-web:dev\" \"npm run backend-web:dev\"",
},

打包后端接口服务（backend）

在backend项目下执行:安装npm i @vercel/ncc,添加打包命令： "build": "ncc build src/app.ts -o ./dist"。
执行npm run build

打包后台系统-前端（backend-web）

执行npm run build

打包博客前端（blog-web)

在blog-web项目下执行:

  • 安装npm i sharp@0.32.6
  • 修改next.config.js
    1
    2
    3
    4
    const nextConfig = {
         output: 'standalone',
         generateEtags: false,
    }

output: 'standalone'，这将在.next/standalone中创建一个文件夹，然后可以在不安装node_modules的情况下自行部署。此外，还输出了一个最小的server.js文件，可以用来代替next start。默认情况下，此最小服务器不会复制public或. next/static文件夹，因为这些文件夹理想情况下应由CDN处理，尽管这些文件夹可以手动复制到standalone/public和standalone/. next/static文件夹，之后server.js文件将自动为这些文件夹提供服务。

  • next build
    将public目录拷贝到.next/standalone目录中、将.next/static 目录拷贝到.next/standalone/.next 目录中，
    在.next/standalone 目录中打开终端，输入node server.js ，可以看到SSR服务器已经在3000端口启动了。

    复制文件

    从 Node v16.7.0 开始，可以使用 fs.cp 或 fs.cpSync 函数。部分代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 在根目录创建publish文件夹，里面包含从各个子项目复制的打包文件
    // fs.cpSync(src, dest[, options]) 将整个目录结构从 src 同步地复制到 dest，包括子目录和文件。
    // fs.cp(src, dest[, options], callback)将整个目录结构从 src 异步地复制到 dest，包括子目录和文件。
    const fs = require('fs');
    try {
    	fs.cpSync('backend/dist', 'publish/backend', { recursive: true });
    	console.log('backend-server folder(s) copied to destination');
    } catch (err) {
    	console.error('backend-server Error occurred while copying', err);
    }
    ...

pm2部署

根目录执行:
pm2 ecosystem # 或 pm2 init
这将生成一个 ecosystem.config.js配置文件
https://pm2.keymetrics.io/docs/usage/application-declaration/
修改配置文件: 注意配置 DATABASE_URL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
module.exports = {
	apps: [
		{
			name: 'backend-web',
			script: 'serve',
			env: {
				PM2_SERVE_PATH: './publish/backend-web',
				PM2_SERVE_PORT: 5173,
			},
		},
    {
		  name: "backend",
		  script: "./publish/backend/index.js",
		  env: {
        PORT: 9000,
        DEFAULT_PAGE_SIZE:10,
        MAX_PAGE_SIZE:100,
        DATABASE_URL:"mysql://root:password@localhost:3306/database"
      }
		},
		{
			name: 'blog-web',
			script: './publish/blog-web/server.js',
			args: ['set PORT=3000'],
		},
	],
};

常用命令：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
pm2[list|ls|status] # 列出托管的应用程序
pm2 logs # 实时显示日志
pm2 stop all # 停止所有的应用程序
pm2 restart all # 重启所有应用
# 启动/停止/重新启动/删除配置文件中包含的所有应用程序
# Start all applications
pm2 start ecosystem.config.js
# Stop all
pm2 stop ecosystem.config.js
# Restart all
pm2 restart ecosystem.config.js
# Reload all
pm2 reload ecosystem.config.js
# Delete all
pm2 delete ecosystem.config.js
# option --only <app_name>
# You can also act on a particular application by using its name and the option --only <app_name>:
pm2 start   ecosystem.config.js --only api-app
# Note: the --only option works for start/restart/stop/delete as well
# You can even specify multiple apps to be acted on by specifying each app name separated by a comma:
pm2 start ecosystem.config.js --only "api-app,worker-app"

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

记录平时学到的知识点,方便查阅