Node.jsでExpressを使ってWebサーバーを立てるまで
なんでNode.js?
なんだかモダンな技術だから触ってみたい。(新しいものに弱いのです)
Webアプリケーションのサーバーサイドを作れるから。(一応バックエンドエンジニアなので…)
JavaScriptを使えるようになりたいから。(Web系やっててJavaScript読めないなんてもう言いたくない)
っていう、なんだか不純な動機です!٩( 'ω' )و
本当にモダンなの?
これはNode.js調べ始めた当初、初版が2009年(約10年前)と書いていて、
(´-`).。oO(思ったより最近の技術では…ないかも…!?)
と思っていました。
このサイト→『JavaScriptはなぜトレンドが毎年変わると思われていたのか』でもジュラ紀のJavaScriptとして名前が上がっていてちょっと笑いました。
ただ、数年前のJavaScriptルネッサンス大激動の時代を乗り越えて安定期に入った現在の段階で、サーバーサイドで動くJavaScriptの処理系として名を馳せ、日本でもNode.jsを取り入れようとするサービスが増えてきた…という意味でのモダンなのかなぁと、個人的には想像しています。
Webサーバー立てるって言っても、どこまで自分で実装しないといけないの?
Nodeって、JavaScriptを動かすためのプラットフォームっていうだけで、別にnginxみたいなWebサーバーのソフトウェアでもなければ、Tomcatみたいなアプリケーションサーバーのソフトウェアでもない…
という前知識はあったので、
( ͡° ͜ʖ ͡°).。oO(えっ、Webサーバー自作するの…?)
混乱。
( ◠‿◠ ).。oO(いやいや、流石にWebサーバーをNodeで作らないといけないなら、OSSとかでNode.js製のWebサーバーを誰かが作っているはず…!)
ということで調べてみるも存在せず。撃沈。大混乱。
なんか調べれば調べるほどNode.jsがなんなのか分からなくなってきた…(∩´﹏`∩)
— もえか🌸 (@moe_dev_95) 2018年4月8日
JavaScriptとNode.jsの関係って、立ち位置的にはJavaとJREみたいな感じなのかな?と思ったらなんかNode.jsでWebサーバー構築とかしてるし、Node.js+JavaScriptでApacheみたいなソフトウェアが作れるってこと?ん?じゃあアプリケーションは何で作るの?あれ?みたいな
— もえか🌸 (@moe_dev_95) 2018年4月8日
とか色々してたら先輩が助け舟を出してくれました。
フォロワーさんも見兼ねたのかアドバイスをくれました…
参考サイト
— さき (@travel_saki) 2018年4月8日
・phpとかとの棲み分けhttps://t.co/TBZiYYP2Hb
・node.jsとは何か(結構細かく載っているIBMのサイト)https://t.co/usz7nq3bIz
・node.jsの環境構築方法https://t.co/k0MJxm1AXY
実際に動かすならこんなのがいいかもですhttps://t.co/hvt266XZ0x
— mo (@mo053_7) 2018年4月8日
ありがたさの極み…
なんとなくどういうものかのイメージはできたので、とりあえず深いところは考えずに使えるところまで立ち上げてみようと思います!
環境構築
Node.jsのバージョン管理
Nodeをローカル環境で使えるようにしよう!と言ったときに、まずはじめに考えるのは公式サイトからのダウンロード&インストールなんですが、
そもそもNodeはたくさんのバージョンがあって、モダンだからバージョンアップも激しくて、さらにバージョンが違うと結構動かないことが多いとか色々あるらしいのです。
ですので、Nodeのバージョン自体ちゃんと管理したり、プロジェクトごとにチャチャっと切り変えたりしたいよねって言う要望を叶えるバージョン管理ツール経由で、Node.js本体をインストールしようと思います。
しかしNodeのVersionManagerって、作者違いで色々あるみたいです。
パッと調べて出てくるだけでも以下の三つくらいでしょうか。
Readmeとかちょっと読んだだけですが、できることは同じだけど、それぞれ使い勝手とか安定性とかがちょっとずつ違う…から好みのものを選べば良いと思われます!
えいやっとnodebrewを選んでみました。
nodebrewのインストール
$ curl -L git.io/nodebrew | perl - setup
↑githubのReadmeに書かれていたまま打ちました。perlで書かれてるんですね〜
あと、{ホームディレクトリ}/.nodebrew/current/binにパス通せって書いてますね。通します。
~/.bashrc
export PATH=$HOME/.nodebrew/current/bin:$PATH
この設定で何やってるかはこれで把握しました→ PATHを通すために環境変数の設定を理解する (Mac OS X)
パスを反映します。
$ source ~/.bashrc
ここにパス通したってことは、nodebrewを通してインストールしたnodeはこのパスのあたりに格納されるのでしょう、多分。
続けてnodebrewでnode本体をインストールしてみます。
$ nodebrew install-binary stable
なんでinstallじゃなくてinstall-binaryかというと、こういうことです。
→install と install-binary でどれくらい違うのか試す。試した。
バイナリ最強説。。
実はインストールしただけでは使えなくて、useコマンドで使うバージョンを指定する必要があるそうです。
$ nodebrew use stable
nodebrewの中身
ここでちょっと、気になったので、.nodebrewの中身を拝見します。
$ cd ~/.nodebrew $ ls -l total 48 drwxr-xr-x (省略) completions lrwxr-xr-x (省略) current -> /Users/{UserName}/.nodebrew/node/v8.11.1 drwxr-xr-x (省略) default drwxr-xr-x (省略) iojs drwxr-xr-x (省略) node -rwxr-xr-x (省略) nodebrew drwxr-xr-x (省略) src
な、なるほどシンボリックリンク…!(ですよね!?)
ということは、さっきuseコマンドで使えるようにしたっていうのは、ただ~/.nodebrew/currentにシンボリックリンク貼ってただけなんですねきっと。
ちなみにさっきパス通したところも見ておきます。
$ cd ~/.nodebrew/current/bin $ ls -l total 69216 -rwxr-xr-x (省略) node lrwxr-xr-x (省略) nodebrew -> /Users/{UserName}/.nodebrew/nodebrew lrwxr-xr-x (省略) npm -> ../lib/node_modules/npm/bin/npm-cli.js lrwxr-xr-x (省略) npx -> ../lib/node_modules/npm/bin/npx-cli.js
使うコマンドをまとめてくれている…超親切…だからここにパス通せって言ってたんですね…納得…
そしてちゃんとnpmも入ってました。npxってなんだろう…?
npx
npm 5.2.0の新機能! 「npx」でローカルパッケージを手軽に実行しよう
npmの公式サイトってこんな可愛いサイトだったんですね( ´∀`)
どうやら、npmで取得できるパッケージをちょっとテストしたいときに使える便利コマンドみたいです。node package executeってことですね!
Webサーバーを立ててみる
Nodeが動く環境をローカルで作ったので、いよいよWebサーバーを立ててみます。
どうやら、爆速でWebサーバーを立てられる、Node.js界のデファクトスタンダードなフレームワークがあるようです。
コマンドラインExpress application generatorを使ってプロジェクトを作成する方法が載っていますが、私はIntelliJ民なので、IDEAのNodeJSプラグインから作ってみました。
インストールしてきたプラグインはこれです。
あとは、IntelliJの公式ページにQuick start with a Node.js application というガイドラインがあったのでその通りに進めていきます。
new projectから「Node.js Express App」を選択し、
LearnNodeJSという名前のプロジェクトを作ります。
NodeInterpreterは、さっきnodebrewでインストールしたときにパス通したところですね。
Express application generatorのページを見ると、なんとこの状態でもう動くらしいので、実行してみます。
うおお、本当に爆速でWebサーバーが立ちました!( ✌︎'ω')✌︎
まとめ
Node.js、Webサーバー立てるだけならマジで爆速。
次にやりたいこと
generatorに丸投げしてしまった部分を解読
Web開発のための用語多すぎてわけが分からない問題(導入)
背景
Webサービス関連のお仕事をしているものの、関連用語が多すぎてわけが分からないのです。
- 言語
Java,HTML,JavaScript,Ruby,Python,php,C,C++,C#...etc - 通信系
HTTP,TCP,FTP,SSL,Ajax,REST API,Webhook...etc - フレームワーク
Spring,AngularJS,NodeJS,Ruby on Rails,JUnit...etc - 開発手法
ウォーターフォール,アジャイル,TDD,スクラム,リーン...etc - 開発効率化
CI,バージョン管理(Gitとか),IDE,ライブラリ管理(Mavenとか),OSS...etc - その他各種用語
ビルド、デプロイ、リリース、エンコード...etc
このざっくりすぎる列挙の仕方からも、私がなんだか色々よく分かっていないことが分かるかと思います。
世の中には各用語をわかりやすく解説してくれているページがたくさんありますが、読んでるだけでは知識がぼんやり&すぐ忘れてしまうので、自分なりに色々整理してみようという試みです。
まずWebアプリケーションの仕組みを図にしてみる
超ざっくりな仕組み
ここだけはどんな仕組みを使っていたとしても変わんないだろ!!というレベルに抽象化しようとしたら、超絶ざっくりした図になりました。
これはひどい。 いろんな意味でWeb業界の奥深さが感じられる図になってしまいました。
突き詰めればたったこれだけの仕組みに、世界中の頭いい人達が寄ってたかって技術詰め込んでビジネスやってるんですもんね。
せっかくなので私達開発者も登場させてみました。
(11を超えたら丸で囲まれなくなっちゃいました…)
まぁよっぽどのことがない限り、世に出ているWebサービスたちはこんな感じのフローを辿っているのではないでしょうか。恐らく。
そしてざっくり分けてみる
この図を大きく分けたらこんな感じになると思います。
開発サイドって言葉は私が適当につけました。ツッコミどころは色々あると思いますが重々自覚しておりますので許してください。
なお、ここでいう「インターネット」の部分は専門外なのでしばらくは詳しくは勉強しないと思います。せいぜい「OSI参照モデル」や「TCP/IP階層モデル」でいうトランスポート層あたりまでかな…ネットワーク難しいっす…いや知っておかないといけないんですけどね…
フロントエンドとバックエンド、DevOps(上図でいう開発サイドが近いかなぁ)の違いはこれが参考になりそうです。
https://github.com/kamranahmedse/developer-roadmap
スター数も用語数もパねぇ。。そして1割くらいしかわかりません。。。勉強のしがいがありますね(白目)
これからの方針
色々な用語を、上の超ざっくりWebアプリケーションの仕組みの図でいうとどこらへんをカバーしているのか?という観点+αって感じで色々まとめていこうと思っています。
「いろいろな用語」の選定方法は、
- Web業界において知らねばならぬ超基本的なものなのによく理解していないもの
- 私が耳にして気になったもの
- よく聞くけど今まで調べたことなくて放置しているもの
- 調べていたら見つけて気になったもの
うーん自己中心的。