搭建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即可進行訪問
