2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

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

#20.部署

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

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

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

我們將會(huì)用 Heroku 托管后端，用 Dropbox 托管前端。這兩個(gè)都是免費(fèi)的。

我們先從后端開始。首先，到 Heroku 去注冊(cè)然后創(chuàng)建一個(gè)新的應(yīng)用。

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

然后你會(huì)看到入門簡(jiǎn)介。你運(yùn)行 heroku login 成功之后，你就可以創(chuàng)建一個(gè)新的 Git 倉庫了。Heroku 和其他云平臺(tái)一樣，通過 Git 來部署。

打開終端然后進(jìn)入 instagram 目錄，然后輸入:

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

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

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

異常信息大概就是說，你的應(yīng)用在端口 27017 連接不到 MongoDB。為了我們的應(yīng)用能工作，我們?cè)诒镜卮_實(shí)已經(jīng)下載，安裝，啟動(dòng) MongoDB 了，但是，當(dāng)我們把應(yīng)用發(fā)布到 Heroku 的時(shí)候，不幸的是本地?cái)?shù)據(jù)庫當(dāng)然不能跟 Heroku 一起用咯。

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

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

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

設(shè)置好之后點(diǎn) Save。

現(xiàn)在萬事俱備，就等你重啟 Heroku 應(yīng)用了，來，干了這條命令行 heroku restart -a my-app-name:

若它一切安好，你便看不到 Application Error 頁。記住，因?yàn)槲覀儧]有創(chuàng)建任何 **GET / ** 路由，你在訪問 http://your-app-name.herokuapp.com 的時(shí)候什么都看不到。不過我們可以檢查一下 GET /api/feed 路由，看看服務(wù)是不是真的啟動(dòng)了:

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

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

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

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

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

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

注意: 如果你喜歡這樣的配置的并且考慮給它弄個(gè)自定義域名指向這個(gè) Dropbox Public Folder。其實(shí)，你還可以考慮用 GitHub Pages 托管靜態(tài)頁面，老實(shí)說我覺得它比 Dropbox 要簡(jiǎn)單多了，因?yàn)樗鼜膩聿粫?huì)用來干我們現(xiàn)在在 Dropbox 上做的這些事情。比如說，我的個(gè)人網(wǎng)站 http://sahatyalkabov.com [source code],已經(jīng)在 GetHub Pages 上面跑了兩年多了，一點(diǎn)問題都沒有。而且它也是免費(fèi)的。

請(qǐng)注意我用了 https://instagram-server.herokuapp.com 而不是 http://instagram-server.herokuapp.com。因?yàn)槲覀兊那岸耸峭泄茉?Dropbox 服務(wù)商的，它用的是加密 (https) 協(xié)議，我們不能發(fā)送一個(gè)非加密 (http) 請(qǐng)求。如果你這樣做的話會(huì)得到下面的錯(cuò)誤信息:

如果你跟我做的完全一樣，那么現(xiàn)在所有的在 Heroku (back-end) 和 Dropbox (front-end) 之間的請(qǐng)求應(yīng)該都可以正常運(yùn)轉(zhuǎn)了。

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

轉(zhuǎn)載于:https://my.oschina.net/ilivebox/blog/374262

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。