【WEB開発メモ#1】 CentOS7系にnode.jsとExpress 4をインストールする

node.jsを使ったWEB開発を行う為に、必要な手順を個人的なメモレベルで書き記していこうと思います。

WEB開発が本業ではないので、その筋の方々からすると遠回りだったり、ベストプラクティスではない内容だったりする場合があります。 あくまでチラシの裏です。

とはいえ、今後、職場で教育する為の資料作りのインプット(か、もしくはこれをそのまま投げつける形)にしたいなと思っています。

 


書いていくであろう内容(随時更新)

  1. CentOS7にnode.jsとExpressをインストールする ←いまここ
  2. Expressの基礎を学んでみる
  3. テンプレートエンジンを用いてフロントエンドのHTMLを作成する
  4. 随時追加

では、以下より本題


用意する環境

  • 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」を検索すると、

以下のような情報が返ってきます。

6.x系は古すぎるので、今回はLTS版の8.11.1`をインストールしたいと思います。

NodeSourceからインストール

この手順では、 NodeSource から、結果的に目的のnode.jsをインストールします。

今回は8.11.1をインストールするので、8系です。

以下コマンドを実行します。

その他のバージョンをインストールする場合は、上記リンクから目的のLinuxディストリビューションに合ったコードを探して実行してください。

その後、yumコマンドによってnodejsパッケージがインストール出来るようなるので、実行します。

インストール後、以下のようにバージョンを確認できます。

また、同時にNode.jsのパッケージ管理ツールである  npm もインストールされています。

以降は、この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押しっぱなしでも問題ありません。

下部にあるJSON形式の文字列( { "name": "work"から始まる部分)が、package.jsonの内容です。
準備はこれでOKです。

グローバルモードでインストール

まずは試しに、グローバルモードでExpress4をインストールしてみます。

--save というのは、実行したカレントディレクトリ上の package.jsonに「依存関係のあるパッケージ」として記録する事を意味します。(--save-devも同様です)

-g をつけることで、グローバルモードでインストールされます。

デフォルトではグローバルモードのインストール先は /usr/lib内にあるので、express4がインストールされているのが確認できます。

npmのデフォルト設定がどうなっているかを確認するには、npm config list -l コマンドで確認できます

ローカルモードでインストール

次に、ローカルモードの挙動を試します。

ちょっと捻くれてexpress3をインストールします。
ただし、今回はpackage.jsonに依存関係のあるパッケージとして記録するとややこしくなってしまうので、避けます。

実行結果を確認します。

まず、上から順に** npm list**コマンドを使って、ローカル環境のインストール済みパッケージを確認しました。

--depth=0 というのは、出力結果がツリー型表示で一番浅い階層(=0階層目)で出力する事を意味します。

ローカル環境ではexpress3が読み込まれている事がわかります。

-g をつけたグローバル環境では、express4が読み込まれています。(加えて、npmもインストールされていますね)

最後のlsコマンドでは、ローカル環境でインストールされている細かいモジュール群を表示しています。パッケージのソースコードを直接確認する場合、このようにnode_modulesディレクトリから辿っていく事になります。

 

ローカル環境のexpress3をアンインストール

グローバルモードとローカルモードの違いと、使い分けが理解できたところで、ややこしいexpress3はアンインストールします。

uninstallサブコマンドでアンインストールが完了します。(もちろん、-gをつけた場合はグローバルが対象になります)

上述したコマンドを駆使してアンインストールされているか確認してみてください。

また、package.jsonからも記載を削除する場合、uninstallサブコマンドの後に --saveもしくは --save-devを追記する事で削除できます。

npmコマンドの基本的な使い方は以上です、

express-generatorを使う

expressを使うにあたって、必要なファイル、ディレクトリの真っさらなテンプレートを自動で生成してくれるのがexpress-generatorです。

これもパッケージなので、覚えたばかりのnpmコマンドを使ってインストールします。
*ローカルインストールではなく、グローバルインストールしてください。パスを通さないとexpressコマンドが使えません。

 

次に、expressで管理する最大単位となる「アプリケーション」を配置するディレクトリを決めます。

今回は/usr/local/share/first-project にしたいと思います。
(まだディレクトリを作成する必要はありません。/usr/local/shareに移動だけしておいてください。)

では、expressコマンドを使ってアプリケーションを作成します。

 

いくつかディレクトリとフォルダが作成されました。

大まかな部分で役割を説明していきます。

なお、これらはジェネレーターが自動作成するテンプレートの一つにすぎず、必要に応じてディレクトリを作成してデータベーススキームを格納したり、そのほかのスクリプトファイルを配置したりする場合もあります。

また、express-generatorによって自動的に作成されたpackage.jsonがあるのに気が付いたでしょうか。
この中には、真っさらな状態のexpressを利用するために必要なパッケージが記載されています。
こいつを使って、依存関係のあるパッケージを全て自動でインストールしてみましょう。

package.jsonに記載されている内容をそのまま反映させるには、npm installとだけ実行します。

これで、必要なパッケージがローカルインストールされました。

expressを使ってみる

express-generatorを使ってディレクトリやファイルを自動で配置し、更にnpmコマンドによって必要なパッケージを自動でインストールしたので、すでにサーバを起動する事が出来る状態です。

npm startコマンドでサーバを起動してみます。

この状態でプロンプトが返ってこなければnode.jsがサーバで起動しています。
大半はデフォルトで3000番ポートが開いているので、
http://{fqdn}:3000/
に対してアクセスするとexpressのデフォルト画面が確認できます。

Welcome to Expressという文字列が表示されていれば成功です。

 

ひとまず、CentOS7環境にNode.js + Expressの環境を、体系的に学びつつ構築する手順を記載しました。

次回はルーティングについて知識を整理してみようかなと思います。

 

/以上

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください