クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

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

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

【目次】

※参考:前回記事
【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_PATHnpmの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

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

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

素直にチュートリアルを順番に読んでいけば気がつけたのかもなー。

最後に

ということで今回はHerokuのExpressアプリをローカル環境で起動するために、環境変数やPATHなどについて試行錯誤しました。結局のところ、npmのPATHを通してもエラーは解消されず、ExpressとEJSをローカルインストールすることで解決しました。

しかし、環境変数については、今後データベースの情報をGitHubから除外する、などの時にも必要な設定になると思ってて、そこにむけた予習(言葉の意味の理解)になったとは思っています。

それではまた!


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