## 第十九步:部署
現在我們的項目已經完成,而我們終于可以開始部署它了。網上有不少的托管服務提供商,不過如果你關注過我之前的項目或者教程的話,就會知道我為什么這么喜歡[Heroku](https://www.heroku.com/)了,不過其它托管商的部署流程應該和它差不太多。
讓我們先在根目錄創建一個.gitignore文件。然后添加下面的內容,其中大多數來自于Github的[gitignore](https://github.com/github/gitignore)倉庫。
~~~
# 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"
~~~
因為我們沒有簽入編譯后的CSS和JavaScript,以及第三方庫,我們需要使用`postinstall`命令,讓Heroku在部署后編譯應用并下載Bower包,否則它將不包含main.css、vendor.js、vendor.bundle.js和bundle.js文件。
下一步,讓我們在項目根目錄下初始化一個新Git倉庫:
~~~
$ git init
$ git add .gitignore
$ git commit -m 'initial commit'
~~~
現在我們已經準備好將代碼推送到Heroku了,不過,我們需要先在Heroku上新建一個應用。在新建應用后順著下面這個頁面的指南操作:

準備完畢后,現在運行下面的命令,這里newedenfaces是我所建應用的名稱,把它替換為你在Heroku上新建的應用名稱:
~~~
$ heroku git:remote -a newedenfaces
~~~
然后,點擊Settings標簽,順次點擊Reveal Config Vars和Edit按鈕,添加下面的環境變量,和我們在config.js中的設置相匹配:
| KEY | VALUE |
| --- | --- |
| `MONGO_URI` | mongodb://admin:1234@ds061757.mongolab.com:61757/newedenfaces-tutorial |
上面是我為這個教程提供的沙箱數據庫,但如果你想創建自己的數據庫的話,可以從[MongoLab](https://mongolab.com/)或[Compose](https://www.compose.io/)甚至直接從[Heroku Addons](https://addons.heroku.com/)免費獲取。
運行下面的命令,然后我們就大功告成!
~~~
$ git push heroku master
~~~
現在,你可以從`http://<app_name>.herokuapp.com`這樣的鏈接看到你的應用了。
- 前言
- 概述
- 第一步:新建Express項目
- 第二步:構建系統
- 第三步:項目結構
- 第四步: ES6速成教程
- 第五步: React速成教程
- 第六步:Flux架構速成教程
- 第七步:React路由(客戶端)
- 第八步:React路由(服務端)
- 第九步:Footer和Navbar組件
- 第十步:Socke.IO – 實時用戶數
- 第十一步:添加Character的組件
- 第十二步:數據庫模式
- 第十三步:Express API 路由(1/2)
- 第十五步:Home組件
- 第十四步:Express API 路由(2/2)
- 第十六步:角色(資料)組件
- 第十七步:Top 100 組件
- 第十八步:Stats組件
- 第十九步:部署
- 第二十步: 附加資源
- 總結