こんにちは。
キャスレーコンサルティングSI(システム・インテグレーション)部の内田です。
今回は、Node.jsベースのWebアプリケーションフレームワーク「Meteor」を、
MicroSoft製のソースエディタ「Visual Studio Code」上で、開発環境を作って動かしてみたいと思います。
1.Meteorとは
Node.jsをベースとした、Webアプリケーションフレームワークです。
ここ数年の、フロントエンド技術の発展のスピードは、凄いものがありますが、
Node.jsや周辺技術が 、その基盤技術として重要性を増しており、Meteorはその一つという事になります。
Meteorの特徴は、何と言っても「フルスタック」のフレームワークであるという点です。
そして、動くアプリが早く作れる点が魅力的です。
DBが内蔵されていて、インストール不要だったり、(MongoDBのサブセットが入っています)
iOS、android向けアプリケーションのビルドもできます。
また、SlackクローンのRocketChatなどのサイトで、採用されています。
ちなみに、私自身、RocketChatを利用していた事から、Meteorの存在を知りました。
最近では、個別の技術ごとにモジュールを組み合わせて、システムを構築する事例が増えてきており、
フルスタックフレームワークは、あまり流行らない傾向にあるようです。
しかし、プロトタイプ制作のように、用途が限定されていたりするケースでは、威力を発揮することと思います。
2.Meteorをインストールしてみる
インストールガイドに沿って、Meteorのインストールを行ないます。
以下、動作確認は、下記の環境で実施しています。
(MacOS 10.12.3 諸事情により、Windows系の環境でない点は申し訳ございません)
2017.11.4現在、Windows系環境でもChocolateyベースのインストール環境が、整備されているようですので、
サポートされている環境であれば、恐らく簡単にインストールできます。
Macでは、ターミナルのインストールページで、案内されたコマンドを打つだけです。
$curl https://install.meteor.com/ | sh ######################################################################## 100.0% Meteor 1.5.2.2 has been installed in your home directory (~/.meteor). Writing a launcher script to /usr/local/bin/meteor for your convenience. To get started fast: $ meteor create ~/my_cool_app $ cd ~/my_cool_app $ meteor Or see the docs at: docs.meteor.com
1コマンドで、インストールが完了します。
3.Visual Studio Codeのインストール
実際にMeteorを触る前に、Visual Studio Codeをインストールしておきましょう。
Visual Studio Codeのダウンロードページに行き、対象環境向けのインストーラーをダウンロードします。
今回は、Mac向けのイメージをダウンロードします。
zipファイルを展開し、解凍されたAppを起動します。
空の状態で、アプリが起動します。
編集するソースコードを生成するため、Meteorに戻ります。
4.空のMeteorアプリを生成してみる
空のMeteorアプリを、作成します。
最近のフレームワークらしく、1コマンドで作成できます。
チュートリアルページ左端の「TO DO APP」で、
フロントエンド側の構成が、「Blaze」「Angular」「React」の３タイプから選択できます。
今回は、Meteorのデフォルト構成である「Blaze」を選択してみます。
(余談ですが、Angularのバージョンが(AngularJS)1.6を対象としており、
Angular2以降でないとあまり..みたいな所があるため、Blazeを選択しました。)
ターミナルで、任意のディレクトリ下でアプリ作成コマンドを入力します。
$ meteor create simple-todos Created a new Meteor app in 'simple-todos'. To run your new app: cd simple-todos meteor If you are new to Meteor, try some of the learning resources here: https://www.meteor.com/tutorials meteor create --bare to create an empty app. meteor create --full to create a scaffolded app.
空のMeteorアプリが、できました。
5.Visual Studio Codeの開発環境を整える
Visual Studio Codeで、生成されたアプリのフォルダーを、開きます。
Visual Studio Codeアプリメニュー「表示」ー「統合ターミナル」を、開きます。
以後、アプリの起動・停止に関するコマンドは、Visual Studio Code上より実行します。
Meteorの補完プラグインを、導入しておきます。
左端メニュー最下段の「拡張機能」で、「Meteor」をインストールします。
Meteorのソースコードに、補完が効くようになります。
VSC上で、サーバー側デバッグの実行設定を行ないます。
（今回の手順で分かりづらかった箇所になります。）
ちなみに、Node.jsのデバッグ方法として、
サーバーサイドの処理も、Chrome上でデバッグする方法も、ポピュラーな手法のようですが、
今回はVSC上で、コードをステップ実行できるようにします。
ターミナルで「Meteor debug」コマンドを実行すると、サーバーがデバッグモードで起動します。
$ meteor debug [[[[[ ~/dev/meteor/simple-todos ]]]]] => Started proxy. => Started MongoDB. W20171112-13:25:16.571(9)? (STDERR) Debugger listening on ws://127.0.0.1:9229/8c8a1259-e6fe-42b4-b19a-593d83e2a590 W20171112-13:25:16.593(9)? (STDERR) For help see https://nodejs.org/en/docs/inspector
起動プロセスが途中で止まり、デバッガーのアタッチを待機した状態になります。
※Meteorコマンドの内部でNode.js用デバッガー「node-inspector」が起動しており、
上記の起動ログが出力されています。Node.jsその他のバージョンが古いと、起動時のログに
visit http://0.0.0.0:8080/debug?port=5858 to start debugging
..等々と出力され、接続先が異なる形になるようです。
左端のメニューより、「デバッグ」を選択します。
再生アイコンの右に、プルダウンメニューがあり、デバッグ構成を選択できるようになっていますが、
最初は、「構成がありません」となっています。
構成のリストをクリックすると、最下段に「構成の追加…」と出てくるので選択すると、
構成の候補が表示されるので、 「Node.js: リモート プログラムにアタッチする」を選択します。
同時に、"[プロジェクトルート]/.vscode/launch.json"(Visual Studio Codeのデバッグ構成ファイル)の
編集が開くので、内容を修正します。 [.vscode/launch.json]
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach to Remote",
"address": "localhost",
"port": 9229,
"localRoot": "${workspaceFolder}",
"remoteRoot": "Absolute path to the remote directory containing the program"
},
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/server/main.js"
}
]
}
接続先のアドレスを”localhost”とし、launch.jsonを保存します。
Meteor debugを、再度起動します。
デバッグ構成のプルダウンより、「Attach to Remote」を選択し、「デバッグの開始」を実行します。
＄meteor debug [[[[[ ~/dev/meteor/simple-todos ]]]]] => Started proxy. => Started MongoDB. W20171112-14:05:57.671(9)? (STDERR) Debugger listening on ws://127.0.0.1:9229/10592b33-5d48-4240-8eae-2b1efea50c1c W20171112-14:05:57.690(9)? (STDERR) For help see https://nodejs.org/en/docs/inspector W20171112-14:06:04.967(9)? (STDERR) Debugger attached.
デバッガーの設定が、できました！
5.Meteorのチュートリアルを進めてみる
Meteorの空アプリを作成した状態で、http://localhost:3000にアクセスすると、下のようなページが表示されます。
…ここから、Meteorのチュートリアルを進めていきたかったのですが、
今回は開発環境、特にサーバー側デバッグ環境の整備に、紙面を割いてしまったため、
この先は、またの機会にご紹介させていただきたいと思います。
（こんな感じで、チュートリアルが進むはずでした）
7.まとめ
今回は、WebアプリフレームワークMeteorをVisual Studio Code上で開発環境を作り、動かしてみました。
特に、サーバー側のデバッグ環境構築について、
自分で触っていて、取っ付きにくく感じる箇所が多々ありましたので、ある程度細かな説明をしてみました。
そのため、Meteorの機能や利点について、踏み込んだ説明がほとんどできなかった感がありますので、
今後は、その辺りに踏み込んでいく機会があるといいなと思います
最後までお読みくださり、ありがとうございました。
