第十九步：部署

現(xiàn)在我們的項(xiàng)目已經(jīng)完成，而我們終于可以開(kāi)始部署它了。網(wǎng)上有不少的托管服務(wù)提供商，不過(guò)如果你關(guān)注過(guò)我之前的項(xiàng)目或者教程的話(huà)，就會(huì)知道我為什么這么喜歡Heroku了，不過(guò)其它托管商的部署流程應(yīng)該和它差不太多。

讓我們先在根目錄創(chuàng)建一個(gè).gitignore文件。然后添加下面的內(nèi)容，其中大多數(shù)來(lái)自于Github的gitignore倉(cāng)庫(kù)。

# Logs
logs
*.log

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directory
# Commenting this out is preferred by some people, see
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
node_modules
bower_components

# Users Environment Variables
.lock-wscript

# Project
.idea
*.iml
.DS_Store

# Compiled files
public/css/*
public/js/*

注意：我們僅簽入源代碼到Git中，不包括編譯后的CSS和Gulp生成的JavaScript代碼。

你還需要在package.json的"scripts"中添加下列代碼：

"postinstall": "bower install && gulp build"

因?yàn)槲覀儧](méi)有簽入編譯后的CSS和JavaScript，以及第三方庫(kù)，我們需要使用postinstall命令，讓Heroku在部署后編譯應(yīng)用并下載Bower包，否則它將不包含main.css、vendor.js、vendor.bundle.js和bundle.js文件。

下一步，讓我們?cè)陧?xiàng)目根目錄下初始化一個(gè)新Git倉(cāng)庫(kù)：

$ git init
$ git add .gitignore
$ git commit -m 'initial commit'

現(xiàn)在我們已經(jīng)準(zhǔn)備好將代碼推送到Heroku了，不過(guò)，我們需要先在Heroku上新建一個(gè)應(yīng)用。在新建應(yīng)用后順著下面這個(gè)頁(yè)面的指南操作：

準(zhǔn)備完畢后，現(xiàn)在運(yùn)行下面的命令，這里newedenfaces是我所建應(yīng)用的名稱(chēng)，把它替換為你在Heroku上新建的應(yīng)用名稱(chēng)：

$ heroku git:remote -a newedenfaces

然后，點(diǎn)擊Settings標(biāo)簽，順次點(diǎn)擊Reveal Config Vars和Edit按鈕，添加下面的環(huán)境變量，和我們?cè)赾onfig.js中的設(shè)置相匹配：

上面是我為這個(gè)教程提供的沙箱數(shù)據(jù)庫(kù)，但如果你想創(chuàng)建自己的數(shù)據(jù)庫(kù)的話(huà)，可以從MongoLab或Compose甚至直接從Heroku Addons免費(fèi)獲取。

運(yùn)行下面的命令，然后我們就大功告成！

$ git push heroku master

現(xiàn)在，你可以從http://<app_name>.herokuapp.com這樣的鏈接看到你的應(yīng)用了。