美文网首页转载的~express框架Node.js
搭建node.js + Express + webpack +

搭建node.js + Express + webpack +

作者: MWY | 来源:发表于2016-10-10 11:52 被阅读2300次
    搭建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即可进行访问

    相关文章

      网友评论

        本文标题:搭建node.js + Express + webpack +

        本文链接:https://www.haomeiwen.com/subject/zhomyttx.html