开始使用Parse.js构建您的博客：迁移到您自己的Parse服务器

遗憾的是Parse于 2017 年 1 月 28 日关闭。在上一个系列中，我带您完成了从头开始构建博客系统的整个过程。但是一切都基于Parse.com，如果您仍在使用这些技术，那么您的网站将不幸停止工作。

如果您仍然喜欢 Parse.js（和我一样），并且想继续使用它，那么有个好消息。那里可爱的人把它开源了，所以我们可以在所有流行的网络托管服务上运行我们自己的副本。本教程旨在帮助您进行更改并从Parse.com迁移到Heroku上您自己的 Parse 服务器。

我不是后端专家，但这是我发现最简单的方法。如果您发现任何缺陷并有更好的分享方法，请务必在下方发表评论。

跟着这一集走，服务器迁移本身不会太复杂。使用docker，设置本地Parse Dashboard甚至非常容易，因此您仍然可以轻松查看和使用数据。

但是，本教程系列是基于 Parse.js 的 1.2.19 版本制作的；为了连接到独立的 Parse 服务器，我们需要更新应用程序以运行 1.9.2 版。在 1.5.0 版本中，Parse 取消了对 backbone 的支持，这意味着我们需要对代码进行一些重大更改。我们将把 Backbone 添加回页面，并在那里混合使用 Parse 和 Backbone。

这是一个相当长的介绍，但不要太害怕。您可能需要在迁移过程中到处调试，但应该没问题。您可以随时查看我的源代码或在下方发表评论——我和这个出色的社区将尽最大努力为您提供帮助。

设置并迁移到 Parse Server

首先，让我们开始制作Parse Server。Parse 已经通过详细的迁移指南和所有流行平台（如Heroku、aws和Azure ）上的一长串示例应用程序使这变得非常容易。

我将引导您完成我所知道的最简单的一个：Heroku + mLab组合。它一开始是免费的，而且您总是可以在同一系统中购买更好的硬件和更多的存储空间。唯一需要注意的是，免费版 Heroku 会在闲置 30 分钟后“休眠”。因此，如果用户在服务器“休眠”时访问您的站点，他们可能需要等待几秒钟才能让服务器唤醒，然后才能看到数据。（如果您查看该项目的演示页面并且它没有呈现任何博客内容，这就是原因。给它一分钟并刷新。）

这部分主要基于Heroku 的部署 Parse 服务器指南和 Parse 自己的迁移指南。我只是在那里选择了最简单，最简单的路径。

第 1 步：在 Heroku 上注册并创建一个新应用

如果您还没有 Heroku 帐户，请继续创建一个。这是一个非常流行的平台，用于开发和托管小型 Web 应用程序。

注册后，转到您的Heroku Dashboard并创建一个新应用程序——这将是您的服务器。

如果你想给它一个名字：

第 2 步：添加 mLab mongodb

现在您需要一个数据库来存储数据。让我们添加 mLab 作为附加组件。

转到Resources >  Add-ons，搜索“mLab”，然后添加它：

沙盒足以进行开发——您可以随时升级并支付更多费用以获得更多存储空间。

添加 mLab 后，您可以获取它的 MongoDB URI。

转到Heroku 仪表板中的Settings >  Config Variables 并单击Reveal Config Vars。

在那里你可以看到你的数据库的 MongoDB URI。复制它，现在我们可以开始迁移数据库了。

第 3 步：数据库迁移

转到Parse.com并找到您要迁移的应用程序。Parse Server 的开源版本只支持每台服务器一个应用程序，所以如果你想拥有多个应用程序，你需要重复这个过程并创建多个服务器。现在只挑一个。

在该应用程序中，转到App Settings >  General >  App Management，然后单击Migrate。

然后粘贴您刚刚复制的 MongoDB URI，然后开始迁移。

很快你应该会看到这个屏幕：

这意味着现在您应该将所有数据都保存在您的 mLab MongoDB 中。很容易，对吧？

但是还没有完成您的应用程序 - 让我们等到我们可以从本地 Parse Dashboard 中查看和使用相同的数据，然后返回并完成它。

第 4 步：部署解析服务器

现在，数据库已经迁移，我们可以部署 Parse Server。

如果您还没有 GitHub 帐户，请继续创建一个. 它可能是人们共享和管理代码的最受欢迎的地方。

使用您的 GitHub 帐户，fork官方 Parse Server 示例 repo。

然后，返回您的 Heroku 仪表板。在Deploy >  Deployment method下，选择GitHub 并连接到您的 GitHub 帐户。

之后，搜索 parse 并找到你的parse-server-examplerepo 并连接。

如果一切正常，您应该会看到它是这样连接的：

现在，向下滚动到页面底部。在手动部署下，单击部署分支。

您将看到 Parse Server 正在部署中，很快您将看到此屏幕：

单击查看 按钮，您将看到此页面：

这意味着您的服务器现在正在愉快地运行！而你看到的 URL 就是你服务器的 URL。稍后您将需要它。

我知道看到这条简单的线路并知道服务器已启动感觉不真实。但请相信我，强者正在那里运行。您的应用程序已经可以从中读取和写入。

如果你想仔细检查，你可以运行这样的东西：

$ curl -X post \
  -H "X-Parse-Application-Id: myAppId" \
  -H "Content-Type: application/json" \
  -d '{}' \
  https://example.herokuapp.com/parse/functions/hello
..
{"result":"Hi"}%

设置本地解析仪表板

如果您是命令行忍者，那么从这里您可能会很好。但是如果你和我一样喜欢 Parse Dashboard 的友好界面，请按照这部分在本地机器上设置自己的 Parse Dashboard ，这样你就可以用你习惯的方式直观地查看和玩 Parse 数据.

同样，您可以通过多种方式安装仪表板。我将向您展示我的经验中最简单的方法，即使用Docker。

第 1 步：安装 Docker

如果您没有 Docker，请先安装它（mac | Windows）。

它将整个环境放在一个盒子中，因此您无需遵循相当复杂的本地安装教程并在终端中跳过箍。

第 2 步：构建 Parse Dashboard 图像

在 docker 运行的情况下，将Parse Dashboard存储库克隆到您的计算机并进入该存储库。

$ git clone https://github.com/ParsePlatform/parse-dashboard.git
Cloning into 'parse-dashboard'...
remote: Counting objects: 3355, done.
remote: Total 3355 (delta 0), reused 0 (delta 0), pack-reused 3354
Receiving objects: 100% (3355/3355), 2.75 MiB | 2.17 MiB/s, done.
Resolving deltas: 100% (1971/1971), done.
$ cd parse-dashboard/

对于绝对的 GitHub 新手，只需将其下载为 zip 文件。

将其解压缩并将其放在您可以记住的位置。如果您在Mac上，请打开终端应用程序，键入cd  （在 cd 之后需要一个空格）并将文件夹拖入。

然后按 Enter。

你应该看到这样的东西，这意味着你在正确的地方。

~$ cd /Users/moycat/temp/parse-dashboard-master~/temp/parse-dashboard-master$

现在，您可以通过粘贴以下命令快速检查您的 Docker 是否安装正确：

docker -v

如果它显示您使用的版本，如下所示：

Docker version 1.12.5, build 7392c3b

它已安装，您可以继续。

相反，它说：

-bash: docker: command not found

您需要仔细检查您是否正确安装了 Docker。

正确安装 Docker 后，粘贴此命令并按Enter 键：

docker build -t parse-dashboard .

这将为 Parse Dashboard 构建一个本地图像（随意忽略 docker 术语）。

您将看到许多行滚动。不要惊慌——稍等片刻，你会看到它以这样的方式结束：

Successfully built eda023ee596d

这意味着你已经完成了——镜像已经成功构建。

如果您运行该 docker images命令，您将在那里看到它：

REPOSITORY          TAG                 IMAGE ID            CREATED              SIZE
parse-dashboard     latest              eda023ee596d        About a minute ago   778.1 MB

第 3 步：将 Parse Dashboard 连接到 Parse 服务器

现在，这只是一个图像，它还不是一个正在运行的服务器。当它运行时，我们希望它连接到 Parse Server 和我们刚刚构建的 MongoDB。

为此，我们首先需要在 Heroku 中创建一些键，以便它可以告诉谁授予对数据的访问权限。

转到您的 Heroku 仪表板，然后再次转到设置 > 配置变量 。这一次，我们需要在那里添加两个变量：APP_ID和MASTER_KEY。APP_ID可以是任何容易记住的东西，但MASTER_KEY 最好是一个非常长且复杂的密码。

现在有了这些键，我们可以在 Parse Dashboard 文件夹的根目录中编写一个简单的配置文件。您可以使用从vimtoTextEdit或的所有内容Notepad——目标是config.json使用以下内容制作一个纯文本文件：

{
  "apps": [{
    "serverURL": "your-app-url/parse",
    "appId": "your-app-id",
    "masterKey": "your-master-key",
    "appName": "your-app-name"
  }],
  "users": [{
    "user":"user",
    "pass":"pass"
  }]
}

当然，替换 your-app-url为“查看”链接 URL（显示“我梦想成为一个网站”的页面），但保留/parse在最后；将your-app-id和替换your-master-key为您刚刚添加的配置变量；并为您的应用命名并替换your-app-name为它。

保存文件并ls在终端中运行命令以确保将文件放在config.json正确的位置。

~/temp/parse-dashboard-master$ ls
CHANGELOG.md     Dockerfile       PIG/             Procfile         bin/             package.json     src/             webpack/
CONTRIBUTING.md  LICENSE          Parse-Dashboard/ README.md        config.json      scripts/

如果您config.json在此列表中看到，那么您可以继续前进。

现在运行pwd命令以获取您所在的位置：

$ pwd
/Users/moyicat/temp/parse-dashboard-master

复制该路径。

然后粘贴此命令以创建 Docker 容器（同样，您可以忽略此行话）并运行 Parse Dashboard。记得用你刚刚得到的路径替换我的路径。

docker run -d \
           -p 8080:4040 \
           -v /Users/moyicat/temp/parse-dashboard-master/config.json:/src/Parse-Dashboard/parse-dashboard-config.json \
           -e PARSE_DASHBOARD_ALLOW_INSECURE_HTTP=1 \
           --name parse-dashboard \
           parse-dashboard

从上到下，这个命令做了这些事情（你也可以忽略）：

L1: Tell Docker to start a container 
L2: Make it run on port 8080, you can change it to any port you want
L3: Get the config.json you just made as use it as the configuration
L4: Enable HTTPS on your local (otherwise you will meet an error message)
L5: Give it a name you can remember. You can change it to anything you want, too.
L6: Tell Docker the image you want to use. parse-dashboard is the name we used in the docker build command earlier.

如果一切顺利，它将向您返回一个长字符串，并且没有错误消息。像这样：

4599aab0363d64373524cfa199dc0013a74955c9e35c1a43f7c5176363a45e1e

现在您的 Parse Dashboard 正在运行！在http://localhost:8080/上查看。

它可能会很慢并且最初显示一个空白页面，但只需几分钟，您就会看到一个登录屏幕：

现在您可以使用user用户名和pass密码登录——它是config.json在您之前没有意识到的情况下定义的。您也可以将它们更改为您想要的任何内容。

您将在本地机器上看到这个熟悉的界面，并且可以像往常一样使用您的数据（现在在 mLab MongoDB 中）。

这个本地仪表板上的最后几点说明：

首先，您可以从现在开始使用以下两个命令随时停止和启动此容器：

docker stop parse-dashboard 
docker start parse-dashboard

因此，当您休息计算机时，您无需再次执行前面的步骤，只需告诉它重新启动即可。

其次，如果您有多个 Parse 服务器，则无需创建多个 Parse 仪表板。只需像这样添加多个应用程序config.json：

{
  "apps": [{ // info for first server
    "serverURL": "",
    "appId": "",
    "masterKey": "",
    "appName": ""
  }, { // info for second server
    "serverURL": "",
    "appId": "",
    "masterKey": "",
    "appName": ""
  }],
  "users": [...],
}

每次对 进行更改时config.json，都需要重新启动 Docker 容器：

docker restart parse-dashboard

然后你会看到你所做的改变。

第 4 步：完成迁移

现在使用您的新 Parse Dashboard，如果一切正常，您现在可以返回 Parse.com 并完成迁移。

然后，如果您检查您的应用程序和仪表板，您会发现它们都神奇地指向您的新服务器而没有问题。

更新代码以在 Parse 1.9.2 上运行

这很棒！我希望它可以保持这种状态，并且我们可以提前结束本教程。但正如我所提到的，您的旧 Parse.js 应用程序仍然依赖 Parse.com 服务器将其指向正确的新服务器。它将在 2017 年 1 月 28 日之后停止工作。

为了让它永远运行（手指交叉），我们需要停止使用javascript键来指向应用程序（依赖 Parse.com 来找出要指向的数据库），并直接指向我们的解析服务器。

第 1 步：更新 JavaScript 库

首先让我们更新我们在 中使用的 Parse.js 文件。index.html

而不是使用版本 1.2.19：

<script src="//www.parsecdn.com/js/parse-1.2.19.min.js"></script>

切换到最新版本：

<script src="//npmcdn.com/parse/dist/parse.min.js"></script>

另外，让我们添加 lodash 和 Backbone。现在 Parse 已经停止支持 Backbone，我们需要包含它以继续使用 Views 和 Router。

<!-- Lodash -->
<script src="//cdn.jsdelivr.net/lodash/4.17.3/lodash.min.js"></script>
<!-- Backbone.js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>

第 2 步：指向您的解析服务器

那么，让我们进入site.js。

首先是更新Parse.initialize()函数，使其指向您自己的 Parse Server。

以前它可能看起来像这样：

Parse.initialize("HC87tn6aA7c3sYx9X0vwwLVXeqHDRMYYmrUBK5zv", "3piNGGnRMhvWo8u9pKD9TDc1MJlWhlvK78Vr3fHo");

现在，将其指向您的 Parse 服务器。

Parse.initialize("moyicat-parse-blog-git"); // Your App Name
Parse.serverURL = 'https://moyicat-parse-blog-git.herokuapp.com/parse'; // Your Server URL

第 3 步：从react到 Backbone

继续，让我们快速更新一下，将所有Parse.View,Parse.Router和 ,Parse.history和Backbone.View,Backbone.Router和Backbone.history. Parse 不再支持这些，所以我们需要一个后备。

像这样混搭 并不是世界上最令人愉快的事情Class，但是如果您想对代码进行最少的更改并让它运行，这可能是最简单的方法。

第四步：从采集到查询；从fetch到find

现在，Parse 停止支持的另一件事是Collection. 而且它比其他三个更棘手。从 切换Parse.Collection到Backbone.Collection将不起作用。我们需要使用Parse 查询重写逻辑。

我将使用该Blogs集合作为示例，向您展示我们如何更新我们的博客以使用新的 Parse.js。

之前，我们首先定义了一个Classfor Blogs：

Blogs = Parse.Collection.extend({
    model: Blog,
	query: (new Parse.Query(Blog)).descending('createdAt')
});

然后在 BlogRouter.start()函数中我们创建了该类的一个实例来包含块的集合。

this.blogs = new Blogs();

之后，我们调用fetch()该集合来获取博客数据。就像在BlogRouter.index()：

this.blogs.fetch({
    success: function(blogs) {...},
	error: function(blogs, error) {...}
});

现在，我们可以删除该 Class 声明并进行BlogRouter.blogsParse 查询：

this.blogs = new Parse.Query(Blog).descending('createdAt');

当我们调用它时，fetch()我们使用find().

this.blogs.find({
    success: function(blogs) {...},
	error: function(blogs, error) {...}
});

这部分可能需要一段时间，因为我们在这个系列中有很多不同的用例。您可能需要稍微调试一下——此时，即使数据获取正确，页面也不会正确呈现。如果您希望在修复时看到渲染，请通读到最后，然后开始更改代码和调试。

第 5 步：检查视图对象

当所有数据都正确获取时，接下来要检查的是您传递给View对象的数据。

以前，我们可以将任何我们想要的东西传递给 View 对象。在此示例中，我们将username直接传递到 中，blogsAdminView因此我们可以通过用户名来问候用户。

var blogsAdminView = new BlogsAdminView({ 
    username: currentUser.get('username'),
	collection: blogs 
});

View当我们将 更改为从Backbone.View对象扩展时，这也会停止工作。我们只能通过model和collection现在。

所以我们需要传入currentUseras 模型：

var blogsAdminView = new BlogsAdminView({ 
    model: currentUser,
	collection: blogs
});

并BlogsAdminView 相应地改变。

同样，您可能需要进行一些测试和调试以使一切正常。

第 6 步：更新把手模板以适应新的数据结构

最后，在版本变化之间，Parse Object 数据结构也发生了一些变化。

以前，每个对象都是这样的：

{
    objectId: '',
	title: '',
	...,
}

现在，这是新的结构：

{
    id: '' // the objectId,
	attributes: {
		title: '',
		...,
	},
	...,
}

这意味着我们也需要更新 Handlebar 模板，以正确呈现新数据：

例如，之前我们为侧边栏中的类别编写了以下模板：

<script id="categories-tpl" type="text/x-handlebars-template">
    <div class="sidebar-module">
		<h4>Categories</h4>
		<ol class="list-unstyled">
		{{#each category}}
		<li><a href="#/category/{{objectId}}">{{name}}</a></li>
		{{/each}}
		</ol>
	</div>
</script>

现在我们需要更新{{objectId}}to be{{id}}和{{name}}to be {{attributes.name}}。

<script id="categories-tpl" type="text/x-handlebars-template">
    <div class="sidebar-module">
		<h4>Categories</h4>
		<ol class="list-unstyled">
		{{#each category}}
		<li><a href="#/category/{{id}}">{{attributes.name}}</a></li>
		{{/each}}
		</ol>
	</div>
</script>

现在您的页面将呈现。

同样，如果您不完全清楚地记住该站点的逻辑，您可能需要在这里跳过一些障碍。如果遇到困难，可以随时查看我的源代码。

结论

你有它。希望它可以帮助您在Parse.com关闭之前保存您的数据，或者在您需要时恢复您的代码。您将在 2017 年 1 月 28 日之后丢失所有数据，但如果您更新代码，它将再次起作用。

再一次，我非常难过Parse.com将不再运行，并且本教程系列不适用于新手（除非他们继续参考最后一部分）。但希望它能帮助一些人学习如何编写网站。 

从此时起，无论您选择迁移还是学习一门新语言，这完全取决于您。我希望它会更容易一些，因为您在这里学到了一些有用的概念。