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

项目结构图

安装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即可进行访问