v-ts
分支(默认分支):目前一直在更新的版本,计划用TypeScript
重构
该分支前端使用
Nuxt.js
,管理端使用Vue2.X.js
(后续会换成React.js
),服务端使用Nest.js
,数据库使用MySQL
v-new
分支:后续应该不会在更新了,项目能完整跑起来,能正常使用(如有需要,可自行克隆修改~)
该分支前端使用
Nuxt.js
,管理端使用Vue2.X.js
,服务端使用Koa2
,数据库使用MySQL
- blog :该文件夹存放前端代码(即用户访问的页面代码)
- admin :该文件夹存放管理后台代码(即博主用来管理博客内容的地方)
- server : 该文件夹用来提供 API 服务(即为 blog 和 admin 提供接口,进行与数据库的交互)
- nginxConfig : 该文件夹是通过域名访问服务器的一些简单配置(请自行修改,更深了解请自行 Google)
- blog.sql :该文件是本博客线上使用的数据库文件(方便想使用本项目的人能轻松运行起来,数据库采用的 MySQL,请自行安装,默认账号密码:admin, 123)
如果已经部署了之前的代码的朋友,想要使用新的代码,请照sql文件自行调整~(数据库字段更改日期:2020年8月27日)
世界不毁灭,折腾不停止!
本分支将继续折腾我的个人博客,计划如下
- blog:等 Vue3 出来后打算采用
TypeScript
重构(什么时候 Vue3 出来什么时候开始) - admin:计划用 React 重构
- server:计划近期用
nest.js
进行重构(纯粹是想学习用用TypeScript
)
后续主要按 Vue + React + nodejs 这样的技术栈来玩,博客功能应该暂时就这么多了,后面主要是优化代码,写的代码实在是太烂了。。
分别进入相应文件夹下
npm install
servre
端需要先全局安装 nestjs
脚手架
npm install -g @nestjs/cli
然后
server端:
启动 backend 端服务:nest start -w backend
启动 frontend 端服务:nest start -w frontend
//blog
npm run build
// 打包部署需要上传以下文件
.nuxt
server
pakage.json
nuxt.config.js
最好在服务器这四个文件(夹)的同一级目录下新建一个static来放favicon.ico文件,要不然这个图片显示不出来
pm2启动:
pm2 start npm --name "blog" -- run start
// admin
在.env, .env.production中配置不同的环境
npm run build
上传 dist 文件夹
// server
// 这个不用打包,直接上传服务器
node_modules下的文件就不要上传了,太大了,把其他文件上传服务器后运行 npm install 就好了
注意自己复制 .env.example 粘贴为 .env 并修改其中内容
修改 backend 和 frontend 下的 main.js,处理跨域问题
const app = await NestFactory.create(AppModule,{
// cors: {
// "origin": ['http://www.brandhuang.com','https://www.brandhuang.com','http://admin.brandhuang.com','https://admin.brandhuang.com'],
// "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
// "preflightContinue": false,
// "optionsSuccessStatus": 204
// }
cors: true
});
在 server 端的根目录下(此启动方式用于本地开发,服务端部署时,启动方式请看最下面!)
运行:
nest start -w backend 启动 admin 端的接口服务
运行:
nest start -w frontend 启动 web 端的接口服务
// blog.sql
本项目的数据库结构文件。数据库用的mysql
根据前面的配置,本地安装的有mysql,导入数据库文件后,应该就能把整个项目跑起来了
由于数据库没有初始数据,要登录后台需要先注册用户
(2020年8月更新:sql文件中内置了一条用户数据:账号:admin,密码:123; 如果没有数据,请自行注册。)
操作详情参考:issues #8
部署 Server
端注意了!!!
建议在本地执行 npm run build frontend
和 npm run build backend
完后
将 dist
目录下的 frontend
和 backend
文件夹放到服务器上的 dist
文件夹中。
然后启动(我用 pm2
):
pm2 start npm --name "frontend" -- run frontend
pm2 start npm --name "backend" -- run backend
(请执行完一个就部署一个,因为 dist
文件夹会被覆盖,在本地运行的时候你会发现 dist
目录下可以同时存在 frontend
和 backend
两个文件夹,但是 build
的时候不会!!)
-
项目比较详细、完整的部署请看我的文章:http://www.brandhuang.com/article/1552997590733
-
项目比较详细、完整的部署请看我的文章(备用地址一):https://juejin.im/post/6844903558895124488
-
项目比较详细、完整的部署请看我的文章(备用地址二):https://segmentfault.com/a/1190000013095046
我 1 核 1G 的垃圾服务器在服务器直接执行 nest start frontend
,直接卡爆。。。,高配置的应该没啥问题吧
有问题可以来公众号找我,扫码或微信搜索「九零后重庆崽儿」