搭建node.js + Express + webpack + Vue.js + Mongodb + Docker项目
github地址
项目结构图
Screen Shot 2016-10-10 at 11.10.56.png安装vue-cli
利用vue-cli帮助我们创建出一个webpack + Vue.js的基础框架,后期我们在此项目的基础上进行修改即可
- vue init webpack MacMen(项目名称)即可创建你想要的项目
安装express-generator
利用express-generator可以帮我们快速的创建一个express项目,也可以直接使用WebStorm快速生成一个express项目
合并前面创建的两个项目
- 在vue生成的项目中添加一个
server
目录,这个目录用来存放我们的服务器文件 - 将express项目中的
bin
,public
,router
放到server目录中 - 将express项目中的
app.js
放到根目录下 - 将express项目中的views放到根目录下
对合并后的文件进行修改
- 将config中的index修改为
这样生成的index.html将会自动放在views目录下index: path.resolve(__dirname, '../views/index.html'),
- 修改app.js
app.engine('html', require('ejs').__express); app.set('view engine', 'html');
- 将express中的依赖包添加到package.json即可
- 运行npm install 即可完成修改
对于如何安装docker,如何购买VPS这里暂不进行讲解
将项目部署到docker
- 启动一个mongodb容器
docker run -v /home:/home -p 27020:27017 --name=macmendb mongo
- 启动一个node容器并关联mongodb容器
docker run -it -p 80:80 --name=blog --link macmendb:mongo -v /home:/home node /bin/bash
- 在node容器中安装pm2,
npm install -g pm2
; - 执行进到了server的bin目录下执行
pm2 start www
即可
访问
在浏览器输入你的VPS的IP即可进行访问
网友评论