2019獨角獸企業重金招聘Python工程師標準>>>

Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB

#20.部署

在 instagrame 目錄下創建一個新的文件 .gitignore，把 node_modules 加到它里面。你可以直接用命令行來操作:

<!-- lang: js --> $ touch .gitignore $ echo node_modules > .gitignore

這可以在提交文件到 Git 的時候忽略 node_modules 目錄。你如果把你的 Node.js 應用帶著 node_modules 的 Git 工程部署到 Heroku的話，你會遇到各種問題。Heroku 會根據你的 package.json 自動下載指定的包。

我們將會用 Heroku 托管后端，用 Dropbox 托管前端。這兩個都是免費的。

我們先從后端開始。首先，到 Heroku 去注冊然后創建一個新的應用。

Heroku 新的 Dashboard UI 非常簡單易用。(干得漂亮 Heroku 的大牛們)

然后你會看到入門簡介。你運行 heroku login 成功之后，你就可以創建一個新的 Git 倉庫了。Heroku 和其他云平臺一樣，通過 Git 來部署。

打開終端然后進入 instagram 目錄，然后輸入:

<!-- lang: js --> $ git init$ heroku git:remote -a <your heroku app name>$ git add . $ git commit -am "initial commit" $ git push heroku master

結束之后，查看 http://your-app-name.herokuapp.com (我的是 http://instagram-server.herokuapp.com) 然后你會看到一個 Application Error 頁面。

沒想到把，這早就在我的掌控之中，不過還是假裝看一下發生異常的原因。在 instagram 目錄下面執行 heroku logs 命令:

異常信息大概就是說，你的應用在端口 27017 連接不到 MongoDB。為了我們的應用能工作，我們在本地確實已經下載，安裝，啟動 MongoDB 了，但是，當我們把應用發布到 Heroku 的時候，不幸的是本地數據庫當然不能跟 Heroku 一起用咯。

但是別怕 Compose (以前的 MongoHQ) 和 MongoLab 提供了免費的 MongoBD 托管。另外，你也可以用我的這個教程專用數據庫啦:

<!-- lang: js --> mongodb://hackhands:hackhands@ds063140.mongolab.com:63140/instagram

回到 Heroku 的 dashboard ，點 Settings 卡。你可以看到一個叫做 Reveal Config Vars 的按鈕。點它，然后在同一頁點 Edit 按鈕。在這里你可以設置 config.js 的值。如果你指定了環境變量的話，它們會調用的這些值，否則的話就會退而求其次用默認字符串的值。

設置好之后點 Save。

現在萬事俱備，就等你重啟 Heroku 應用了，來，干了這條命令行 heroku restart -a my-app-name:

若它一切安好，你便看不到 Application Error 頁。記住，因為我們沒有創建任何 **GET / ** 路由，你在訪問 http://your-app-name.herokuapp.com 的時候什么都看不到。不過我們可以檢查一下 GET /api/feed 路由，看看服務是不是真的啟動了:

后端這塊我們就完成了，下面我們開始前端部分。把 client 目錄下面的文件全部拷貝到 Dropbox 的 Public Folder，最好放到一個子目錄下，比如說 instagram 以確保它不會跟別的文件混成一團。

右鍵點擊 index.html 然后從下拉菜單選 Copy public link…。拷貝 URL 到剪貼板。

打開 instagram/client 目錄的 app.js 文件，然后用新的 URLs 更新 Satellizer 的 Instagram provider。你需要更新: loginUrl, signupUrl, 還有 OAuth 2.0 url 和 redirectUri 到實際的 Heroku 和 Dropbox URLs。

注意: 別忘記在 instagram.com/developer 把 redirectUri 更新到和上面的 redirectUri 一樣。

你還要更新 client/services/api.js 里面的 URLs:

然后，執行 gulp (要是你還沒把它啟動的話) 來更新 app.min.js。然后拷貝 app.min.js 把它貼到 Dropbox 的 Public Folder 的 instagram 目錄下面，覆蓋掉老文件。

注意: 如果你喜歡這樣的配置的并且考慮給它弄個自定義域名指向這個 Dropbox Public Folder。其實，你還可以考慮用 GitHub Pages 托管靜態頁面，老實說我覺得它比 Dropbox 要簡單多了，因為它從來不會用來干我們現在在 Dropbox 上做的這些事情。比如說，我的個人網站 http://sahatyalkabov.com [source code],已經在 GetHub Pages 上面跑了兩年多了，一點問題都沒有。而且它也是免費的。

請注意我用了 https://instagram-server.herokuapp.com 而不是 http://instagram-server.herokuapp.com。因為我們的前端是托管在 Dropbox 服務商的，它用的是加密 (https) 協議，我們不能發送一個非加密 (http) 請求。如果你這樣做的話會得到下面的錯誤信息:

如果你跟我做的完全一樣，那么現在所有的在 Heroku (back-end) 和 Dropbox (front-end) 之間的請求應該都可以正常運轉了。

不過有可能更慘，如果你必須把前端和后端分開跑在不同的服務器上的話，那么至少要考慮一下 GitHub Pages, Amazon S3 或者 Digital Ocean with Nginx 來放你的靜態內容。而且 CORS 很多時候麻煩多過好處，這就是為什么我一直都傾向在同一臺主機上跑前后端。

轉載于:https://my.oschina.net/ilivebox/blog/374262

總結

以上是生活随笔為你收集整理的AngularJS+Satellizer+Node.js+MongoDB-Instagram-20的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。