node.jsを使ったWEB開発を行う為に、必要な手順を個人的なメモレベルで書き記していこうと思います。
WEB開発が本業ではないので、その筋の方々からすると遠回りだったり、ベストプラクティスではない内容だったりする場合があります。 あくまでチラシの裏です。
とはいえ、今後、職場で教育する為の資料作りのインプット（か、もしくはこれをそのまま投げつける形）にしたいなと思っています。
書いていくであろう内容（随時更新）
- CentOS7にnode.jsとExpressをインストールする ←いまここ
- Expressの基礎を学んでみる
- テンプレートエンジンを用いてフロントエンドのHTMLを作成する
- 随時追加
では、以下より本題
用意する環境
- RHEL 7.x系OS minimalインストール版
今回は検証用なのでCentOSで進める。本番環境で扱う場合はぜひRHELを使用して頂きたいなと思います。
今回目指す環境
- Node.js をなるべく最新かつシンプルにインストールする。
- Node.jsのパッケージ管理システム「npm」を用いてExpress4をインストールする。
- npmコマンドの一般的な使い方を知る
- express-generatorを使ってシンプルかつお手軽に模範環境を用意する
手順
Node.jsのインストール
yumでインストールする際は注意
いきなりNode.jsをインストールします。
2018年5月現在、CentOSのepel-releaseリポジトリで「nodejs」を検索すると、
以下のような情報が返ってきます。
bash1 2yum info nodejs 3Loaded plugins: fastestmirror, langpacks 4Loading miAvailable Packages 5Name : nodejs 6Arch : x86_64 7Epoch : 1 8Version : 6.14.0 9Release : 1.el7 10Size : 4.6 M 11Repo : epel/x86_64 12Summary : JavaScript runtime 13URL : http://nodejs.org/ 14License : MIT and ASL 2.0 and ISC and BSD 15Description : Node.js is a platform built on Chrome's JavaScript runtime 16 : for easily building fast, scalable network applications. 17 : Node.js uses an event-driven, non-blocking I/O model that 18 : makes it lightweight and efficient, perfect for data-intensive 19 : real-time applications that run across distributed devices.rror speeds from cached hostfile 20
6.x系は古すぎるので、今回はLTS版の8.11.1をインストールしたいと思います。
NodeSourceからインストール
この手順では、 NodeSource から、結果的に目的のnode.jsをインストールします。
今回は8.11.1をインストールするので、8系です。
以下コマンドを実行します。
bash1curl -sL https://rpm.nodesource.com/setup_8.x | bash - 2
その他のバージョンをインストールする場合は、上記リンクから目的のLinuxディストリビューションに合ったコードを探して実行してください。
その後、yumコマンドによってnodejsパッケージがインストール出来るようなるので、実行します。
bash1yum -y install nodejs 2
インストール後、以下のようにバージョンを確認できます。
bash1node --version 2v8.11.1 3
また、同時にNode.jsのパッケージ管理ツールである npm もインストールされています。
bash1npm --version 25.6.0 3
以降は、このnpmコマンドを使ってnode.jsにパッケージを追加していきます。
npmコマンドを使ってみる
まず、npmコマンドを学ぶ為専用のディレクトリを用意しましょう。
今回は /usr/local/share/ に work という作業用ディレクトリを作成しました。
作業用ディレクトリを作成したのには、理由があります。
npmコマンドでは、システム全体にデフォルトで利用出来るようにする為のグローバルモードと、特定のディレクトリ配下のプロジェクトで有効なローカルモードという概念があります。
同じパッケージで異なるバージョンがインストールされている場合、ローカル環境にインストールされている方が優先されます
（厳密言うと、.jsファイルでモジュールを読み込む場合、指定したモジュールがどこに配置されているのか自動で探索する仕組みがあるのですが、、、まぁそんなもんだと捉えてください）
npm init --> package.jsonの作成
パッケージをインストールする前に、一つ行う事があります。
今回作成したworkディレクトリに仮のWEB開発プロジェクトに必要なリソース（モジュールだったり、サーバサイドのプログラムだったり、HTMLやCSSだったり）を格納するとしましょう。
npmによってインストールしたパッケージも、この中に格納されますが、githubなどでソースを公開する際、これらの外部から取得したパッケージも一緒にpushするのはよろしくありません。
package.jsonには、プロジェクトに必要な情報と、「必要なパッケージ、モジュール」や「起動時のスクリプト」などを記入する事ができます。
いきなりゼロからpackage.jsonを作成するのは心が折れますし、普段手動で手を加えないものなので、コマンドで作成しましょう。
npm initコマンドを使います。 対話型のコマンドですが、後で手動でも書き換えられるので、Enter押しっぱなしでも問題ありません。
bash1npm init 2This utility will walk you through creating a package.json file. 3It only covers the most common items, and tries to guess sensible defaults. 4 5See `npm help json` for definitive documentation on these fields 6and exactly what they do. 7 8Use `npm install <pkg>` afterwards to install a package and 9save it as a dependency in the package.json file. 10 11Press ^C at any time to quit. 12package name: (work) 13version: (1.0.0) 14description: 15entry point: (index.js) 16test command: 17git repository: 18keywords: 19author: 20license: (ISC) 21About to write to /usr/local/share/work/package.json: 22 23{ 24 "name": "work", 25 "version": "1.0.0", 26 "description": "", 27 "main": "index.js", 28 "scripts": { 29 "test": "echo "Error: no test specified" && exit 1" 30 }, 31 "author": "", 32 "license": "ISC" 33} 34 35Is this ok? (yes) 36
下部にあるJSON形式の文字列（ { "name": "work"から始まる部分）が、package.jsonの内容です。 準備はこれでOKです。
グローバルモードでインストール
まずは試しに、グローバルモードでExpress4をインストールしてみます。
bash1npm install --save -g express4 2+ express4@0.0.1 3added 51 packages in 2.425s 4
--save というのは、実行したカレントディレクトリ上の package.jsonに「依存関係のあるパッケージ」として記録する事を意味します。（--save-devも同様です）
-g をつけることで、グローバルモードでインストールされます。
デフォルトではグローバルモードのインストール先は /usr/lib内にあるので、express4がインストールされているのが確認できます。
bash1ls /usr/lib/node_modules/ 2express4 npm 3
npmのデフォルト設定がどうなっているかを確認するには、npm config list -l コマンドで確認できます
ローカルモードでインストール
次に、ローカルモードの挙動を試します。
ちょっと捻くれてexpress3をインストールします。 ただし、今回はpackage.jsonに依存関係のあるパッケージとして記録するとややこしくなってしまうので、避けます。
bash1npm install express3 2npm WARN deprecated connect@2.30.2: connect 2.x series is deprecated 3npm notice created a lockfile as package-lock.json. You should commit this file. 4npm WARN work@1.0.0 No description 5npm WARN work@1.0.0 No repository field. 6 7+ express3@0.0.0 8added 96 packages in 3.448s 9
実行結果を確認します。
まず、上から順にnpm listコマンドを使って、ローカル環境のインストール済みパッケージを確認しました。
--depth=0 というのは、出力結果がツリー型表示で一番浅い階層（＝０階層目）で出力する事を意味します。
ローカル環境ではexpress3が読み込まれている事がわかります。
-g をつけたグローバル環境では、express4が読み込まれています。（加えて、npmもインストールされていますね）
bash1npm list --depth=0 2work@1.0.0 /usr/local/share/work 3└── express3@0.0.0 4
bash1npm list --depth=0 -g 2/usr/lib 3├── express4@0.0.1 4└── npm@5.6.0 5
ls node_modules/
accepts cookie-signature forwarded morgan send
base64-url core-util-is fresh ms serve-favicon
basic-auth crc http-errors multiparty serve-index
basic-auth-connect csrf iconv-lite negotiator serve-static
batch csurf inherits on-finished statuses
body-parser debug ipaddr.js on-headers stream-counter
bytes depd isarray parseurl string_decoder
commander destroy media-typer pause tsscmp
compressible ee-first merge-descriptors proxy-addr type-is
compression errorhandler method-override qs uid-safe
connect escape-html methods random-bytes unpipe
connect-timeout etag mime range-parser utils-merge
content-disposition express mime-db raw-body vary
content-type express3 mime-types readable-stream vhost
cookie express-session minimist response-time
cookie-parser finalhandler mkdirp rndm
最後のlsコマンドでは、ローカル環境でインストールされている細かいモジュール群を表示しています。パッケージのソースコードを直接確認する場合、このようにnode_modulesディレクトリから辿っていく事になります。
ローカル環境のexpress3をアンインストール
グローバルモードとローカルモードの違いと、使い分けが理解できたところで、ややこしいexpress3はアンインストールします。
bash1npm uninstall express3 2npm WARN work@1.0.0 No description 3npm WARN work@1.0.0 No repository field. 4 5removed 96 packages in 1.136s 6
uninstallサブコマンドでアンインストールが完了します。(もちろん、-gをつけた場合はグローバルが対象になります）
上述したコマンドを駆使してアンインストールされているか確認してみてください。
また、package.jsonからも記載を削除する場合、uninstallサブコマンドの後に --saveもしくは--save-devを追記する事で削除できます。
npmコマンドの基本的な使い方は以上です、
express-generatorを使う
expressを使うにあたって、必要なファイル、ディレクトリの真っさらなテンプレートを自動で生成してくれるのがexpress-generatorです。
これもパッケージなので、覚えたばかりのnpmコマンドを使ってインストールします。
ローカルインストールではなく、グローバルインストールしてください。パスを通さないとexpressコマンドが使えません。
bash1npm install -g express-generator 2npm WARN work@1.0.0 No description 3npm WARN work@1.0.0 No repository field. 4 5+ express-generator@4.16.0 6added 10 packages in 0.843s 7
次に、expressで管理する最大単位となる「アプリケーション」を配置するディレクトリを決めます。
今回は_/usr/local/share/first-project_ にしたいと思います。 （まだディレクトリを作成する必要はありません。/usr/local/shareに移動だけしておいてください。）
では、expressコマンドを使ってアプリケーションを作成します。
bash1express first-project 2 3 warning: the default view engine will not be jade in future releases 4 warning: use `--view=jade' or `--help' for additional options 5 6 create : first-project/ 7 create : first-project/public/ 8 create : first-project/public/javascripts/ 9 create : first-project/public/images/ 10 create : first-project/public/stylesheets/ 11 create : first-project/public/stylesheets/style.css 12 create : first-project/routes/ 13 create : first-project/routes/index.js 14 create : first-project/routes/users.js 15 create : first-project/views/ 16 create : first-project/views/error.jade 17 create : first-project/views/index.jade 18 create : first-project/views/layout.jade 19 create : first-project/app.js 20 create : first-project/package.json 21 create : first-project/bin/ 22 create : first-project/bin/www 23 24 change directory: 25 $ cd first-project 26 27 install dependencies: 28 $ npm install 29 30 run the app: 31 $ DEBUG=first-project:* npm start 32
bash1ls 2applications first-project info man work 3
いくつかディレクトリとフォルダが作成されました。
大まかな部分で役割を説明していきます。
default1├── app.js //メインとなるjavascriptファイル 2├── bin `//サーバ起動に必要な実行ファイル 3│ └── www 4├── package.json 5├── public //CSSやjs、imageファイルなどの静的コンテンツの配置場所 6│ ├── images 7│ ├── javascripts 8│ └── stylesheets 9│ └── style.css 10├── routes //ルーティングされるアプリケーションはここに別記載する 11│ ├── index.js 12│ └── users.js 13└── views //画面描画用のテンプレート 今回は説明割愛 14 ├── error.jade 15 ├── index.jade 16 └── layout.jade 17
なお、これらはジェネレーターが自動作成するテンプレートの一つにすぎず、必要に応じてディレクトリを作成してデータベーススキームを格納したり、そのほかのスクリプトファイルを配置したりする場合もあります。
また、express-generatorによって自動的に作成されたpackage.jsonがあるのに気が付いたでしょうか。
この中には、真っさらな状態のexpressを利用するために必要なパッケージが記載されています。
こいつを使って、依存関係のあるパッケージを全て自動でインストールしてみましょう。
bash1 npm install 2npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, please install the latest version of pug instead of jade 3npm WARN deprecated constantinople@3.0.2: Please update to at least constantinople 3.1.1 4npm WARN deprecated transformers@2.1.0: Deprecated, use jstransformer 5npm notice created a lockfile as package-lock.json. You should commit this file. 6added 101 packages in 3.203s 7
package.jsonに記載されている内容をそのまま反映させるには、npm installとだけ実行します。
これで、必要なパッケージがローカルインストールされました。
expressを使ってみる
express-generatorを使ってディレクトリやファイルを自動で配置し、更にnpmコマンドによって必要なパッケージを自動でインストールしたので、すでにサーバを起動する事が出来る状態です。
npm startコマンドでサーバを起動してみます。
bash1npm start 2 3> first-project@0.0.0 start /usr/local/share/first-project 4> node ./bin/www 5
この状態でプロンプトが返ってこなければnode.jsがサーバで起動しています。
大半はデフォルトで３０００番ポートが開いているので、
http://{fqdn}:3000/
に対してアクセスするとexpressのデフォルト画面が確認できます。
Welcome to Expressという文字列が表示されていれば成功です。
ひとまず、CentOS7環境にNode.js + Expressの環境を、体系的に学びつつ構築する手順を記載しました。
次回はルーティングについて知識を整理してみようかなと思います。
/以上
よかったらシェアしてください！