转载

无需退出浏览器也能开发 Node.js 应用程序

是否曾经希望您的代码更改能立即部署到 IBM Bluemix,无需等待完整的重新部署工作?或者可以调试正在 Bluemix 上运行的 Node.js 应用程序?或者可以使用 shell 浏览您的 Bluemix 环境?

您的愿望就是命令。本教程将展示如何:

  • 使用 IBM Bluemix DevOps Services 中的 Live Edit 将更改立即部署到 Bluemix
  • 使用 Bluemix Debugger 调试应用程序
  • 使用 Bluemix shell 浏览您的 Bluemix 环境

备注:本教程中所述的特性目前仅适用于 Node.js 应用程序。

您可使用所有这三个特性,甚至无需退出浏览器。

关于该应用程序

在本教程中,您将在 Bluemix 中使用 Personality Insights Node.js Web Starter 应用程序。该应用程序使用 IBM Watson Personality Insights 服务来分析文字并得出有关文字作者个性品质的信息:

无需退出浏览器也能开发 Node.js 应用程序

点击查看大图

关闭 [x]

无需退出浏览器也能开发 Node.js 应用程序

阅读: Personality Insights 服务入门

阅读: Bluemix Live Sync

有了 Bluemix Debugger,您可使用 Node Inspector 调试 Node.js 应用程序。

完成您的应用程序的前提条件

  • Bluemix 帐户和 Bluemix DevOps Services 帐户,两个帐户都已链接到您的 IBM ID
  • 以下浏览器之一:
    • Firefox 15 或更高版本
    • Chrome 21 或更高版本 ( 备注 :第 3 步需要使用 Chrome)
    • Internet Explorer 10 或更高版本
    • Safari 7 或更高版本

运行应用程序

第 1 步. 创建应用程序

首先您需要一个 Node.js 应用程序。获得新应用程序最快的一种方法是使用 Bluemix 样板(示例应用程序)。

创建并部署您的应用程序

  1. 启动 Bluemix 并登录(如果尚未进行身份验证)。
  2. 打开 Bluemix 目录。
  3. 在目录的 Boilerplates 部分中,单击 Personality Insights Node.js Web Starter
  4. 输入应用程序的名称(在 Bluemix 中引用该应用程序将使用此名称)以及该应用程序的主机(放在 mybluemix.net 前面的 URL 部分)。主机名在所有的 Bluemix 间必须是全局唯一的,所以一定要有创意。
  5. 单击 CREATE 。系统将样板代码的副本放到新的应用程序中,然后将其部署到 Bluemix。
  6. 在 Start coding with Cloud Foundrst 命令行接口页面中,单击左侧窗格中的 Overview
  7. APP HEALTH 部分中,等待系统显示 "Your app is running" 消息。
  8. 应用程序运行后,单击路径 (route) 可打开您的应用程序(该路径是应用程序的 URL,通常末尾是 mybluemix.net。该信息列在页面的顶部。)

了解应用程序

让我们用些时间,通过正在运行的应用程序的 UI 来了解它。Personality Insights 应用程序使用 Watson Personality Insights 服务来分析文字并确定文字作者的个性品质。

  1. 默认情况下,UI 包含了来自 Moby Dick 的示例文字。单击 ANALYZE 了解 Watson 认为 Moby Dick 的作者 Herman Melville 有何个性品质。然后会显示文字输出和可视化的图形。
  2. 浏览您最喜欢的英文内容网站并复制一段文字。
  3. 返回您的应用程序,在 Try the Service 框中粘贴文字,然后单击 ANALYZE
  4. 查看文字输出和可视化的图形。

第 2 步. 在 Live Edit 模式下更新应用程序

现在,我将在 Live Edit 模式中更改应用程序的源代码,并看看此次更改是否会立即在已部署的应用程序中反映出来。

准备使用 Live Edit

该步骤使用 Web IDE 中的 Live Edit 模式,并且您在浏览器中完成所有操作。您也可以使用 Bluemix Sync 和 Live Edit 来同步本地文件系统上的文件(例如,如果喜欢使用 Sublime Text 等桌面应用程序)以及 Web IDE 工作空间中的文件,并将这些文件立即部署到 Bluemix 中。查阅 Bluemix Live Sync 文档 ,了解更多信息。

  1. 返回到 Personality Insights 应用程序的 Bluemix 页面。(如果正在运行的应用程序并非位于单独的窗口或选项卡中,可右键单击应用程序的路径,并在新的窗口或选项卡中打开链接。)
  2. 单击右上角的 ADD GIT
  3. 单击 Create Git Repository 对话框中的 CONTINUE 。Bluemix 会将应用程序代码的一个副本放在 Bluemix DevOps Services 处所托管的 Git 存储库中。
  4. 成功创建 Git 存储库后,单击 CLOSE
  5. 单击右上角的 EDIT CODE ,打开 Bluemix DevOps Services Web IDE。
  6. 将 Live Edit 选项设为 on: 无需退出浏览器也能开发 Node.js 应用程序
  7. 如果系统提示您重新部署,单击 OK 。此时会重新部署应用程序,这样更改就能在已部署的应用程序中生效。部署完应用程序后,运行栏中会显示一个绿点: 无需退出浏览器也能开发 Node.js 应用程序

部署完应用程序后,就可以进行实时编辑了。

更改一个静态文件

对静态文件(例如 Jade 或 CSS 文件)所做的更改几乎可以立即在已部署的应用程序中反映出来。

  1. 在左侧的导航器视图中,展开视图。
  2. 选择 layout.jade 文件。
  3. h2 (大约在第 30 行)改为 This article is so great that I'm going to Tweet about it! 等类似的内容。Web IDE 会自动保存更改 — 无需手动保存!
  4. 切换到正在运行的应用程序所在的选项卡或窗口,然后刷新页面。注意,应用程序的标题也会立即发生变化。无需等待即可重新部署应用程序!
  5. 对静态文件进行几次更改并观察应用程序是否实时更新了。

更改 Node.js 模块

要想部署对 Node.js 模块的更改,必须进行一次快速的应用程序重新启动(不是全部的重新部署工作),因为服务器会在内存中缓存 Node.js 模块。为了演示该特性,您将创建一个新的文本文件,应用程序使用该文件的内容作为默认文字。应用程序会在 Node.js 模块内引用该默认文本文件,所以必须重新启动应用程序才能看到所做的更改生效。

  1. 在左侧窗格中,在导航器中选择应用程序的根目录。
  2. 单击 File > New > File
  3. 文件名已高亮显示,所以您可重命名它。输入 defaulttext.txt 后按键盘上的 Enter 或 Return。
  4. 在右侧的编辑器中,键入或粘贴您希望在应用程序中用作默认文本的文字。
  5. 在左侧窗格中,在导航器中选择 app.js 文件。
  6. 在右侧的编辑器中,查看位于 25 行附近的 dummy_text 变量。将 mobydick.txt 替换为 defaulttext.txt
    dummy_text = fs.readFileSync('defaulttext.txt');
  7. 在 Web IDE 的顶部栏中,单击 Restart 按钮 无需退出浏览器也能开发 Node.js 应用程序
  8. 重新启动应用程序后(只需几秒钟的时间),运行栏中会显示一个绿点。
  9. 切换到正在运行的应用程序所在的选项卡或窗口。刷新页面并查看新的文字。(如果浏览器已缓存了页面并且您看到文字没有更新,可再次打开应用程序的 URL,此时应该显示更改后的内容。)

第 3 步. 使用 Bluemix Debugger 调试应用程序

有时只是盯着代码并想找出到底哪里有问题并不是一种可行的方法,您需要使用调试器。此时 Bluemix Debugger 就能派上用场。有了 Bluemix Debugger,您可使用 Node Inspector 来调试您的 Node.js 应用程序。

备注:Node Inspector 目前只能在 Chrome 中工作。如果目前仍未使用 Chrome,利用此次机会更换您的浏览器吧。

  1. 如果目前并未在 Web IDE 中查看您的项目,可单击项目概述页面上的 EDIT CODE
  2. 在 Web IDE 的顶部栏中,单击 Debug 按钮 无需退出浏览器也能开发 Node.js 应用程序
  3. 如果系统提示您提供凭据,可输入您的 IBM ID 和密码。
  4. 在项目的 Bluemix Debugger 页面中,单击 Open Debugger 。调试器的加载时间大约为 30 秒。
  5. 如果左侧没有显示导航器,单击 Show navigator 按钮。然后在导航器中选择 app.js 文件,从而打开该文件: 无需退出浏览器也能开发 Node.js 应用程序
  6. 单击 48 ,在第 48 行上添加一个断点: 无需退出浏览器也能开发 Node.js 应用程序
  7. 在一个不同的选项卡或窗口中,浏览您正在运行的应用程序并单击 Analyze
  8. 切换回其中显示了调试器的选项卡或窗口。注意程序已运行到断点处。您可在右侧查看调用栈和变量。也可使用右侧的按钮对下一个函数调用执行进入方法调试、不进入方法调试和跳出方法调试。
  9. 了解正在运行的应用程序后,单击右侧的 Resume script execution 按钮 无需退出浏览器也能开发 Node.js 应用程序

注意,在 Bluemix Debugger 页面中,您可选择挂起应用程序,这会重新启动应用程序并在第一行代码处中断应用程序。

第 4 步. 通过 Bluemix shell 了解 Bluemix 环境

使用内置的 bash shell,您可了解正在运行您的应用程序的 Bluemix 环境并与之进行交互。

  1. 在项目的 Bluemix Debugger 页面上,单击 Open Shell 。此时会在浏览器中打开一个 shell 客户端。
  2. 运行 top 命令,查看在 Bluemix 环境中运行的进程。
  3. 单击 NEW WINDOW
  4. 拖动新窗口,在查看日志文件的同时仍能继续观察各个进程。
  5. 在新窗口中,运行 cd ../logs 命令,进入日志文件目录。
  6. 运行 ls 命令,查看日志目录中的文件列表。
  7. 注意 staging_task.log 是日志目录中的一个文件。运行 tail staging_task.log 命令,查看日志文件最后 10 行的内容。

您可继续使用喜欢的命令来了解 Bluemix 环境。

结束语

要想了解使用 Bluemix DevOps Services 开发和部署应用程序的更多信息,请参见的我的四部分系列文章 Bluemix DevOps Services 简介 。

在本教程中,您学习了如何使用 Bluemix Live Edit、Bluemix Debugger 和 Bluemix shell 在云中编码并调试应用程序,所用的方法与使用桌面工具时的方法类似。通过在云中使用 Bluemix 工具,无需花费大量的时间和精力在桌面上设置工具了。并且通过在开发期间将应用程序部署到 Bluemix,在将生产应用程序部署到 Bluemix 时就不会出现让人吃惊的情况了 — 您为二者使用的是相同的环境!

正文到此结束
Loading...