fanshyiis / One Sys
聚合koa2+pm2+vue-cli+element+axios的前后端一体开发脚手架
Stars: ✭ 102
Projects that are alternatives of or similar to One Sys
Light Push
轻量级推送服务和实时在线监控平台,同时用于开发即时通信系统,基于node的socket.io,支持web、android、ios客户端,支持移动端离线推送,可进行分布式部署
Stars: ✭ 128 (+25.49%)
Mutual labels: koa2, pm2, nginx
Sinn Server
an node server for sinn,that based on of nodejs,koa2,mongoose,docker,nginx,es6/7,Resful API,阿里云 http://servertest.boyagirl.com/
Stars: ✭ 228 (+123.53%)
Mutual labels: koa2, nginx
Vue2 blog
使用vue2.x + vue-cli +vue-router+ vuex + axios + mysql + express + pm2 + webpack+nginx构建的具有登录,注册,留言,用户发帖,用户评论等功能的SPA Blog。注意,注意,注意,后端API全部自己手写,很适合刚学习vue以及express的小伙伴学习,喜欢请Star鼓励一下我,谢谢!项目预览:
Stars: ✭ 417 (+308.82%)
Mutual labels: pm2, nginx
Sinn
a blog based on of react,webpack3,dva,redux,material-ui,fetch,generator,markdown,nodejs,koa2,mongoose,docker,shell,and async/await 基于react+koa2技术栈的个人开源博客系统
Stars: ✭ 175 (+71.57%)
Mutual labels: koa2, nginx
koa2-example-app
An app that is built using koa2 and async/await
Stars: ✭ 85 (-16.67%)
Mutual labels: pm2, koa2
Vue Chat
📲 A web chat application. Vue + node(koa2) + Mysql + socket.io
Stars: ✭ 617 (+504.9%)
Mutual labels: koa2, pm2
Nuxt Ssr Demo
✨ 高仿掘金,整合 vue + nuxt + axios + vuex + vue-router (nuxt 自带 vuex 和 vue-router),一个基于 Nuxt 的服务器端渲染 Demo
Stars: ✭ 856 (+739.22%)
Mutual labels: pm2, nginx
React Cnodejs.org
Material UI version of cnodejs.org, the biggest Node.js Chinese community.
Stars: ✭ 242 (+137.25%)
Mutual labels: pm2, nginx
Node Production
Take Your Node.js Project to The Production Environment (VPS/Dedicated Server).
Stars: ✭ 35 (-65.69%)
Mutual labels: pm2, nginx
React Ssr
React 服务端渲染(SSR),react + redux + koa2 + sequelize + mysql全栈项目(Full Stack)
Stars: ✭ 205 (+100.98%)
Mutual labels: koa2, pm2
Nextjs Docker Pm2 Nginx
Next.js with Docker, PM2 and NGINX
Stars: ✭ 139 (+36.27%)
Mutual labels: pm2, nginx
Koa Rest Api Boilerplate
💯 Boilerplate for Node.js Koa RESTful API application with Docker, Swagger, Jest, CodeCov and CircleCI
Stars: ✭ 420 (+311.76%)
Mutual labels: koa2, pm2
Docker Vue Node Nginx Mongodb Redis
🐉 An awesome boilerplate, Integrated Docker, Vue, Node, Nginx, Mongodb and Redis in one, Designed to develop & build your web applications more efficient and elegant.
Stars: ✭ 34 (-66.67%)
Mutual labels: koa2, nginx
Record
✨✨都是自己输出和看过觉得不错的文章,欢迎star、watch!!同时欢迎推荐新文章、书籍和视频!!
Stars: ✭ 69 (-32.35%)
Mutual labels: koa2, nginx
Ecs Nginx Proxy
Reverse proxy for AWS ECS. Lets you address your docker containers by sub domain.
Stars: ✭ 93 (-8.82%)
Mutual labels: nginx
Pm86
Production process manager for Node.js apps with a built-in load balancer.
Stars: ✭ 98 (-3.92%)
Mutual labels: pm2
本脚手架主要致力于前端工程师的快速开发、一键部署等快捷开发框架,主要目的是想让前端工程师在一个阿里云服务器上可以快速开发部署自己的项目。本着前端后端融合统一的逻辑进行一些轮子的整合、并加入了自己的一些脚手架工具,第一次做脚手架的开发,如有问题,请在issue上提出,如果有帮助到您的地方,请不吝赐个star~
#####技术栈选择
- 前端整合:vue-cli3.0、axios、element等
- 命令行工具整合:commander、chalk、figlet、shelljs等
- 后端整合:node、 koa2、koa-mysql-session、mysql等
- 服务器整合:nginx、pm2、node等
#####基本功能模块实现
- 聚合分离 所谓聚合分离,首先是‘聚合’,聚合代码,聚合插件,做到一个项目就可完成前端端代码的编写,打包上线等功能的聚合。其后是‘分离’。前后端分离。虽然代码会在同一个项目工程中但是前后端互不干扰,分别上线,区别于常规的ejs等服务端渲染的模式,做到前端完全分离
- 一键部署 基于本地的命令行工具,可以快速打包view端的静态文件并上传到阿里云服务器,也可快速上传server端的文件到服务器文件夹,配合pm2的监控功能进行代码的热更新,无缝更新接口逻辑
- 快速迭代 提供基本的使用案例,包括前端的view层的容器案例与组件案例,组件的api设定以及集合了axios的中间件逻辑,方便用户快速搭建自己的项目,代码清晰,易于分析与修改,server端对mysql连接池进行简单的封装,完成连接后及时释放,对table表格与函数进行分层,代码分层为路由层、控制器层、sql操作层
#####基本模块举例 1.登录页面
- 登录 -正确反馈 错误反馈 登录成功后session的设定
- 注册 -重名检测 正确反馈 错误反馈
- 主要模块功能
- 模块增删查改基本功能的实现
- 后台koa2服务模块
- 配合koa-mysql-session进行session的设定储存
- checkLogin中间件的实现
- cors跨域白名单的设定
- middlewer 中间件的设定
- mysql连接池的封装 等等。。。
- 服务端
- nginx 的基本配置与前端端分离的配置
- pm2 多实例构建配置文件的配置文件 pm2config.json
#####使用流程
- 本地调试
- 安装mysql (过程请百度)
// 进入sql命令行
$ mysql -u root -p
// 创建名为nodesql的数据库
$ create database nodesql
- 安装pm2 (过程请百度)
- 拉取项目代码
git clone https://github.com/fanshyiis/ONE-sys
cd ONE-sys
// 安装插件
cnpm i 或 npm i 或者 yarn add
// 安装link
sudo npm link
// 然后就能使用命令行工具了
one start
// 或者不愿意使用命令行的同学可以
yarn run serve
#####主要代码解析
one -h
- 启动效果
启动项目
yarn run v1.3.2
$ pm2 restart ./server/index.js && vue-cli-service serve
Use --update-env to update environment variables
[PM2] Applying action restartProcessId on app [./server/index.js](ids: 0,1)
[PM2] [index](0) ✓
[PM2] [one-sys](1) ✓
┌──────────┬────┬─────────┬─────────┬───────┬────────┬─────────┬────────┬─────┬───────────┬───────────┬──────────┐
│ App name │ id │ version │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ user │ watching │
├──────────┼────┼─────────┼─────────┼───────┼────────┼─────────┼────────┼─────┼───────────┼───────────┼──────────┤
│ index │ 0 │ 0.1.0 │ fork │ 77439 │ online │ 2640 │ 0s │ 0% │ 15.4 MB │ koala_cpx │ disabled │
│ one-sys │ 1 │ 0.1.0 │ cluster │ 77438 │ online │ 15 │ 0s │ 0% │ 20.2 MB │ koala_cpx │ disabled │
└──────────┴────┴─────────┴─────────┴───────┴────────┴─────────┴────────┴─────┴───────────┴───────────┴──────────┘
Use `pm2 show <id|name>` to get more details about an app
INFO Starting development server...
98% after emitting CopyPlugin DONE Compiled successfully in 10294ms16:31:55
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.7.69:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.
- 线上调试
- 阿里云服务器文件存放目录
[[email protected] ~]# cd /home/
[[email protected] home]# ls
dist server test
[[email protected] home]#
- 阿里云nginx配置
location ^~ /api {
proxy_pass http://127.0.0.1:3000;
}
location ^~ /redAlert/ {
root /home/dist/;
try_files $uri $uri/ /index.html =404;
}
location ^~ /file/ {
alias /home/server/controller/public/;
}
location / {
root /home/dist/;
index index.html index.htm;
}
其他方面如同本地配置
最后请star一个吧~~~
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].