搭建node.js + Express + webpack + Vue.js + Mongodb + Docker

字数 422阅读 2930
搭建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: path.resolve(__dirname, '../views/index.html'),
    
    这样生成的index.html将会自动放在views目录下
  • 修改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即可进行访问

推荐阅读更多精彩内容