sukiey / webapp-template Goto Github PK
View Code? Open in Web Editor NEW基于koa2,umijs,antd-pro5 的 web 应用
基于koa2,umijs,antd-pro5 的 web 应用
本项目是一个前后端混合的项目。
前端技术栈:umijs、react、dva、umi-request
后端技术栈:koa、koa-static、koa-nunjucks-2
工具插件:concurrently、nodemon
webapp
│ README.md
│ Dockerfile
│ package.json
│
└───client
│ │ tsconfig.json
│ │ .eslintrc.js
│ │
│ └───config
│ │ │ config.ts
│ │ │ ...
│ └───src
│ │ app.tsx
│ └───assets
│ └───components
│ └───models
│ └───pages
│
└───server
│ server.ts
│ tsconfig.json
│ .eslintrc.js
└───controller
│ home.ts
└───service
└───middles
└───models
└───router
└───view
│ index.html
修改前端项目开发模式下的打包策略
默认情况下,umijs会将资源文件拆包,以实现动态引入,这在混合app里不太友好,在html模板中无法引入全部的资源文件,我们需要改变umijs开发模式下的打包方式,让所有的资源只生成一个*.js文件和*.css文件。
做法也比较简单,只要将dynamicImport
在开发模式下禁掉就行,配置修改如下图:
后端负责渲染模板文件
图中的资源文件,以 dev-server 服务地址的方式引入。
// home controller
export default {
index: async(ctx, next) => {
await ctx.render('index');
}
}
// router
import Router = require('koa-router');
import HomeCtrl from '../controller/home';
import UserCtrl from '../controller/user';
const router = new Router();
export default (app) => {
router.get('/api/currentUser', UserCtrl.current);
router.all('(.*)', HomeCtrl.index); // 设置通配符路由
app.use(router.routes());
};
// server.ts
import Koa = require('koa');
import router from './router';
const path = require('path');
const koaNunjucks = require('koa-nunjucks-2');
const serve = require('koa-static');
const app = new Koa();
const staticPath = path.join(__dirname, 'views');
app.use(koaNunjucks({
ext: 'html',
path: staticPath,
nunjucksConfig: {
noCache: true
}
}))
app.use(serve(staticPath))
router(app);
app.listen(3000, ()=> {
console.log(`Server running on http://localhost:3000`);
});
docker 是一项虚拟化容器技术,它可以直接运行在宿主机器上,共享宿主机器上的资源。
docker 虚拟环境的内核其实就是一个 Linux VM。
docker 有三个核心概念:镜像(image)、容器(container)、仓库(registry)。
镜像可以理解为一个可独立运行环境的只读文件(或者说是描述文件),有点类似于windows操作系统镜像文件,里面不仅包含了windows操作系统,还安装了一些软件、应用,比如 IE浏览器、office套件之类的。
镜像是一个模板,可以基于某个镜像运行多个容器实例,就像 windows操作系统的镜像文件一样,可以被安装到多台电脑上并运行。
Docker容器本质上是宿主机上的进程。
Docker 通过namespace实现了资源隔离,
通过cgroups实现资源限制,
通过写时复制机制(Copy-on-write)实现了高效的文件操作。
容器是从镜像创建的运行实例。
可以把容器看做一个简易的Linux环境,docker 就是利用容器来运行应用。
容器之间是彼此隔离的,对外界环境不感知。
镜像是只读的,容器在启动时创建一层可写层作为最上层。
为了方便管理镜像文件,可以把镜像放在仓库中,可以类比 git 仓库。
docker 仓库分为公共仓库和私有仓库。你可以从公共仓库拉取别的镜像直接使用,也可以把自己的镜像放到公共仓库共享出去。
容器可以 启动、开始、停止、删除。
# BASH
docker run --rm -d -p 80:3000 ${your_name}/${image_name}:${tag}
# eg. docker run --rm -d -p 80:3000 zhangss2017/centos:0.1.0
# --rm 容器退出后随之将其删除
# -d 后台运行
# -p 指定端口映射 前者(80)为外界访问应用的端口,后者(3000)是Dockerfile里EXPOSE指定的端口
# BASH
docker ps # 所有
docker ps -a # 所有正在运行的
# BASH
docker container prune -f
# BASH
docker build -t ${your_name}/${image_name}:${tag} .
# BASH
docker images
# BASH
docker image prune -f -a
# BASH
docker push ${your_name}/${image_name}:${tag}
设置环境变量 APP_ROOT
import * as Router from 'koa-router';
const router = new Router();
router.all('*', HomeCtrl.index); // 报错
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.