【Express】環境変数とは？PATHを通すとは？けっきょく南極ローカルインストール！（Herokuコマンドでローカル起動）

Expressの続きです。前回はHeroku CLIを使ってExpressアプリをHeroku 上にデプロイしました。今回は、このアプリをHerokuコマンドでローカル環境でも起動します。エラー表示になったため、環境変数やPATHなどについて色々調べてみました。それではいきましょう！

【目次】

前回のおさらい
アプリをHerokuコマンドでローカル起動（エラー！）
ローカルインストール以外の方法にトライしたい
npmがグローバルにインストールされているパスを調べる
環境変数とは何か
PATHを通すとは何か
NODE_PATHとは何か
npmのPATHを通す
再びNODE_PATHを確認（PATHが通った！）
ExpressとEJSをローカルインストール
最後に

※参考：前回記事
【Express】Heroku CLIを使ってNode.js環境をHeroku上にデプロイする - クモのようにコツコツと

※参考：Node.js / Expressを習得するためにやったことまとめ
qiita.com

前回のおさらい

Herokuが用意しているNode.jsアプリをGitHubからローカルにクローン。さらにローカルからHerokuにデプロイ。無事にHerokuの画面上で表示された！

f:id:idr_zz:20200922163851j:plain

詳細はこちら

※参考：【Express】Heroku CLIを使ってNode.js環境をHeroku上にデプロイする - クモのようにコツコツと

Herokuアプリのページはこちら

※参考：Node.js Getting Started on Heroku

今回はローカル環境でこのページを表示したい。

アプリをHerokuコマンドでローカル起動（エラー！）

前回作ったアプリをローカル環境でも起動したい。こちらのチュートリアルを参考に。

※参考：Heroku スターターガイド (Node.js) | Heroku Dev Center

下記のHerokuコマンドを使う。

$ heroku local web

ポート番号は5000のようだ。ブラウザで開いてみる。

http://localhost:5000/

するとブラウザは下記のようなエラー表示になっていた。。

Error: Cannot find module 'ejs'
Require stack:
- /Users/(ユーザ名)/node_modules/express/lib/view.js
- /Users/(ユーザ名)/node_modules/express/lib/application.js
- /Users/(ユーザ名)/node_modules/express/lib/express.js
- /Users/(ユーザ名)/node_modules/express/index.js
- /Users/(ユーザ名)/(パス)/node-js-getting-started/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
    at Function.Module._load (internal/modules/cjs/loader.js:686:27)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at new View (/Users/(ユーザ名)/node_modules/express/lib/view.js:81:14)
    at Function.render (/Users/(ユーザ名)/node_modules/express/lib/application.js:570:12)
    at ServerResponse.render (/Users/(ユーザ名)/node_modules/express/lib/response.js:1012:7)
    at /Users/(ユーザ名)/(パス)/node-js-getting-started/index.js:9:31
    at Layer.handle [as handle_request] (/Users/(ユーザ名)/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/(ユーザ名)/node_modules/express/lib/router/route.js:137:13)

エラー：モジュール 'ejs'が見つかりません

はて？package.jsonにはejsが記載されてたよなー。

ローカルインストール以外の方法にトライしたい

原因と対策を調べる。エラーメッセージで調べたらまずこちらの記事に出会った。

※参考：Windowsのnode.jsでCannot find module が出た - Qiita

上記の記事では自分も以前読んでいた掌田さんの「Node.js超入門」を参考にしており、そこでは下記のコマンドが解決方法として示されていたようだ。

npm init
npm install --save ejs

でもこれ、結局プロジェクト内にモジュールをローカルインストールしてるだけじゃん、と思い、ちょっと解決方法とは違うんじゃないかなーと思って調べた。

そういえば自分もいつもローカルインストールしてたからこういうエラーがあまり起こらなかったんだなーと思った。別の解決方法があるならばトライしてみたいな。

npmがグローバルにインストールされているパスを調べる

先ほどの記事ではnpmがグローバルインストールされているフォルダのパスを調べている。

こちらのコマンドを打ってみる。

$ npm bin -g

すると自分の環境ではパスは下記の場所だった。

/Users/(ユーザ名)/.npm-global/bin

環境変数とは何か

次に環境変数に追加してパスを通す。…てそもそもこの作業の意味合いがあまりわかってない。Laravelの時にもよく分からずにやっていた。

※参考：Laravel元年！インストールしてMAMP環境で白い画面出す！！ - クモのようにコツコツと

※参考：LaravelをMAMP環境からHerokuにデプロイするためにやったこと調べたこと - クモのようにコツコツと

環境変数とは？

OSが動いているときに使える変数

※参考：https://wa3.i-3-i.info/word11027.html

ふむふむ。ソフトウェアを超えてOS全体で共通で使える変数か。

PATHを通すとは何か

ではPATHを通すとは？

特定のプログラムを「プログラム名だけで実行できるようにする」こと。

もっと言うと、プログラム名だけで実行できるようにするために、PATH という環境変数（設定の一種）に「このプログラムも名前だけで実行できるようにしてください」という値を追加すること。

※参考：「PATH を通す」の意味をできるだけわかりやすく説明する試み - Qiita

なるほど！「OS内のどこどこのフォルダ（パス）にあるこのプログラムを実行しろ」って毎回書くのは大変なので、プログラム名だけ実行されるように、プログラム名の環境変数にフォルダ（パス）を登録するということかな。

それが登録されていない、または見つからない状態＝「PATHが通っていない」ということか。

NODE_PATHとは何か

最初のエラーは「モジュール 'ejs'が見つかりません」というものだった。その前段階として「NODE_PATH」に先ほどのnpmのパスが通っているか調べる。

NODE_PATHとは？

NODE_PATHとは、Node.jsの環境変数です。環境変数とはOSでNode.jsを使用する上での最も基本的な設定値で、その重要性からシステム変数とも呼ばれます。

※参考：Node.jsのPath（パス）を確認する方法【初心者向け】 | TechAcademyマガジン

ふむふむ、環境変数にもいろいろ種類があるようでNODE_PATHはNode.jsの環境変数か。

NODE_PATHが通っているかを確認するにはまずnodeサーバを立ち上げる。下記のコマンド

$ node

するとコマンドの頭の記号が$から>になる。次に下記のコマンド

> global.module.paths

すると下記のパスの一覧が表示される。

[
  '/Users/(ユーザ名)/(パス)/node-js-getting-started/repl/node_modules',
  '/Users/(ユーザ名)/(パス)/node-js-getting-started/node_modules',
  '/Users/(ユーザ名)/(パス)/node_modules',
  '/Users/(ユーザ名)/(パス)/node_modules',
  '/Users/(ユーザ名)/node_modules',
  '/Users/node_modules',
  '/node_modules',
  '/Users/(ユーザ名)/.node_modules',
  '/Users/(ユーザ名)/.node_libraries',
  '/usr/local/lib/node'
]

どうやら先ほどのnpmのパスは通っていないようだ。

一旦「Control + C」でNodeサバーを閉じる。頭の記号は$に戻る。

npmのPATHを通す

次に先ほどのnpmのPATHを通す。これまでの記事はsetコマンドを打つ方法だがこれはWindows用のコマンドだった。Macだと動かなかった。

Macだとexportというコマンドになるようだ。以下、参考にした記事。

※参考：Pathを通すとは、環境変数とは - Qiita

※参考：PATHを通すとは？ (Mac OS X) - Qiita

※参考：PATHを通すために環境変数の設定を理解する (Mac OS X) - Qiita

exprtコマンドでNODE_PATHにnpmのPATHを通す。

$ export NODE_PATH=/Users/(ユーザ名)/.npm-global/bin

再び`NODE_PATH`を確認（PATHが通った！）

再びNODE_PATHを確認する。Nodeサーバを立ち上げる。

$ node

NODE_PATHを確認

> global.module.paths

おお！/.npm-globalが追加された！

[
  '/Users/(ユーザ名)/(パス)/node-js-getting-started/repl/node_modules',
  '/Users/(ユーザ名)/(パス)/node-js-getting-started/node_modules',
  '/Users/(ユーザ名)/(パス)g/node_modules',
  '/Users/(ユーザ名)/(パス)/node_modules',
  '/Users/(ユーザ名)/node_modules',
  '/Users/node_modules',
  '/node_modules',
  '/Users/(ユーザ名)/.npm-global/bin', // ←追加！
  '/Users/(ユーザ名)/.node_modules',
  '/Users/(ユーザ名)/.node_libraries',
  '/usr/local/lib/node'
]

「Control + C」でNode.jsサーバを閉じる。

再びアプリを起動する。

$ heroku local web

が…ここまでやっても結局のところブラウザの表示は「Error: Cannot find module 'ejs'」のままだった。。

さーて、どうしたものか。

ExpressとEJSをローカルインストール

もう少し調べると下記のQAページに出会った。

※参考：node.js - Error: Cannot find module 'ejs' - Stack Overflow

ここの回答を見ると、一部には環境変数やPATHへの言及があるが、ほとんどの人はモジュールのローカルインストールを勧めている。そしてベストアンサーも。

最初に「解決にならない」とあったローカルインストール。しかし、これでうまくいくか、それともエラーのままかを試して見るか。

まずはエラ〜メッセージで見つからないという「ejs」をローカルインストールしてみる。

$ npm install ejs --save

結果→「Error: Cannot find module 'ejs'」のまま。

おや？EJSは確かに入れたんだよ。ローカルに。では、もっと大元のExpressも入れてみるか。

npm install express --save

すると… f:id:idr_zz:20200922163851j:plain おおお！やた！ローカル環境（localhost:5000）でもHerokuのアプリが表示された！！

やはり、ローカルインストールするんが簡単な解決方法だったのだろうか。

ちなみに、Herokuチュートリアルの別ページにもnpm installでローカルインストールせよとあった。。

npm install

このコマンドをローカルディレクトリで実行して依存関係をインストールし、アプリをローカルで実行できるようにシステムを準備します。