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 很多时候麻烦多过好处，这就是为什么我一直都倾向在同一台主机上跑前后端。