搭建node.js + Express + webpack + Vue.js + Mongodb + Docker項(xiàng)目
github地址
項(xiàng)目結(jié)構(gòu)圖
Screen Shot 2016-10-10 at 11.10.56.png
安裝vue-cli
利用vue-cli幫助我們創(chuàng)建出一個(gè)webpack + Vue.js的基礎(chǔ)框架贪嫂，后期我們?cè)诖隧?xiàng)目的基礎(chǔ)上進(jìn)行修改即可
- vue init webpack MacMen(項(xiàng)目名稱)即可創(chuàng)建你想要的項(xiàng)目
安裝express-generator
利用express-generator可以幫我們快速的創(chuàng)建一個(gè)express項(xiàng)目，也可以直接使用WebStorm快速生成一個(gè)express項(xiàng)目
合并前面創(chuàng)建的兩個(gè)項(xiàng)目
- 在vue生成的項(xiàng)目中添加一個(gè)
server目錄沛善，這個(gè)目錄用來存放我們的服務(wù)器文件 - 將express項(xiàng)目中的
bin,public,router放到server目錄中 - 將express項(xiàng)目中的
app.js放到根目錄下 - 將express項(xiàng)目中的views放到根目錄下
對(duì)合并后的文件進(jìn)行修改
- 將config中的index修改為
這樣生成的index.html將會(huì)自動(dòng)放在views目錄下index: path.resolve(__dirname, '../views/index.html'), - 修改app.js
app.engine('html', require('ejs').__express); app.set('view engine', 'html'); - 將express中的依賴包添加到package.json即可
- 運(yùn)行npm install 即可完成修改
對(duì)于如何安裝docker购岗，如何購買VPS這里暫不進(jìn)行講解
將項(xiàng)目部署到docker
- 啟動(dòng)一個(gè)mongodb容器
docker run -v /home:/home -p 27020:27017 --name=macmendb mongo - 啟動(dòng)一個(gè)node容器并關(guān)聯(lián)mongodb容器
docker run -it -p 80:80 --name=blog --link macmendb:mongo -v /home:/home node /bin/bash - 在node容器中安裝pm2,
npm install -g pm2; - 執(zhí)行進(jìn)到了server的bin目錄下執(zhí)行
pm2 start www即可
訪問
在瀏覽器輸入你的VPS的IP即可進(jìn)行訪問
