开始使用Parse.js构建博客：迁移到自己的Parse Server

最新推荐文章于 2024-08-15 09:24:12 发布

cunjie3951

最新推荐文章于 2024-08-15 09:24:12 发布

阅读量408

点赞数

文章标签：数据库 python java github vue ViewUI

本文指导如何将基于Parse.com的博客系统迁移到自建的Parse Server，详细介绍了在Heroku上设置服务器、数据库迁移、本地Parse Dashboard的安装以及代码更新的步骤，以确保在Parse.com关闭后依然能正常运行。

摘要由CSDN通过智能技术生成

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

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

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

如果您遵循此插曲，那么服务器迁移本身就不会太复杂。使用Docker ，设置本地Parse Dashboard甚至非常容易，因此您仍然可以轻松查看和播放数据。

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

这是一个很长的介绍，但不要太害怕。在迁移过程中，您可能需要在这里和那里进行调试，但是应该没问题。您可以随时检查我的源代码或在下面留下评论，我和这里的这个梦幻般的社区将尽力为您提供帮助。

设置并迁移到解析服务器

首先，让我们开始制作一个Parse Server 。通过详细的迁移指南以及在所有常用平台（如Heroku ， AWS和Azure）上的一堆示例应用程序，Parse已经使此操作变得非常容易。

我将引导您完成我所知道的最简单的操作： Heroku + mLab组合。它是免费的，而且您可以随时为同一系统中更好的硬件和更多的存储空间付费。唯一的警告是，免费版本的Heroku在闲置30分钟后会“Hibernate”。因此，如果用户在服务器“睡眠”时访问您的站点，则他们可能必须等待几秒钟才能唤醒服务器，然后才能看到数据。（如果您检查了该项目的演示页面，但它没有呈现任何博客内容，这就是原因。请稍等一下并刷新。）

这部分主要基于Heroku的“部署解析服务器”指南和Parse自己的迁移指南。我只是选择了最简单，最简单的方法。

步骤1：在Heroku上注册并创建新应用

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

注册后，转到Heroku仪表板并创建一个新应用程序-将作为您的服务器。

如果需要，给它起个名字：

步骤2：添加mLab MongoDB

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

转到资源> 附加组件 ，搜索“ mLab”，然后添加它：

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

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

转到Heroku控制台中的“设置”>“ 配置变量” ，然后单击“ 显示配置 变量” 。

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

步骤3：数据库迁移

转到Parse.com ，找到要迁移的应用程序。开源版本的Parse Server每个服务器仅支持一个应用程序，因此，如果要拥有多个应用程序，则需要重复此过程并创建多个服务器。现在选择一个。

在该应用内，转到应用设置> 常规> 应用管理 ，然后点击迁移。

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

很快您将看到以下屏幕：

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

但是，请不要最终确定您的应用程序-等到我们可以从本地“解析仪表板”中看到并使用相同的数据，然后再返回并对其进行最终确定。

步骤4：部署解析服务器

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

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

使用您的GitHub帐户，派生正式的Parse Server示例仓库。

然后，返回到您的Heroku仪表板。在部署> 部署方法下 ，选择GitHub并连接到您的GitHub帐户。

之后，搜索parse并找到您的parse-server-example repo并进行连接。

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

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

您将看到正在部署的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 ）。

它将整个环境放在一个盒子中，因此您无需遵循非常复杂的本地安装教程，也无需在Terminal中跳出圈来。

步骤2：构建解析仪表盘图像

在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/moyicat/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 Server和MongoDB。

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

转到Heroku仪表板，然后再次转到“设置” >“ 配置变量” 。这次，我们需要在其中添加两个变量： APP_ID和MASTER_KEY 。 APP_ID可以很容易记住，而MASTER_KEY最好是一个非常长且复杂的密码。

现在有了这些键，我们可以在Parse Dashboard文件夹的根目录中编写一个简单的配置文件。您可以使用从vim到TextEdit或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"
  }]
}

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

保存文件并在Terminal中运行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/         testing/''

如果您在此列表中看到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仪表板，如果一切正常，则可以返回Parse.com并完成迁移。

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

更新代码以在解析1.9.2上运行

这很棒！我希望它能一直保持下去，我们可以尽早结束本教程。但是正如我提到的那样，您的旧Parse.js应用仍然依赖于Parse.com服务器将其指向正确的新服务器。它将在2017年1月28日之后停止工作。

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

步骤1：更新JavaScript库

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

而不是使用版本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 。解析不再支持这些功能，因此我们需要进行后备。

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

步骤4：从集合到查询；从`fetch`到`find`

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

我将以Blogs集合为例，向您展示如何更新博客以使其与新的Parse.js一起使用。

以前，我们首先定义一个Class的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.blogs成为Parse查询即可：

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

当我们调用它时，我们使用find()代替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 
});

当我们更改要从Backbone.View对象扩展的View时，这也将停止工作。我们现在只能传递model和collection 。

因此，我们需要将currentUser作为模型传递：

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

并相应地更改BlogsAdminView 。

同样，您可能需要进行一些测试和调试才能使所有工作正常进行。

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

最后，在版本更改之间，“解析对象”数据结构也有所更改。

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

{
    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}}更新为{{id}} ，将{{name}}为{{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>

现在，您的页面将呈现。

同样，如果您不完全清楚地记住站点的逻辑，则可能需要在此处略过一些麻烦。如果遇到困难，可以随时检查我的源代码。