Node.js+Express+EJS+HerokuでWebアプリケーション開発その1

f:id:kokushin:20160404152646p:plain

すみません、先月くらいに「CodeIgniterでWebアプリ作るぜ〜」って言ってましたけど、気が変わったので「Node.jsでWebアプリ作るぜ〜」に変更します。※CodeIgniterは時間を見つけて更新します(´・ω:;.:...

今回はNode.jsでHello, Worldを表示させるまでをメモります。

Node.js単体でHello, World

いきなり手を動かします。 Node.jsの技術的な説明は他サイトを見てどうぞ。簡単に言うと、サーバー構築からクライアント開発までをJSだけでできるよってやつです。

Node.jsのインストール

https://nodejs.org/en/

インストーラーがあるのでポチポチするだけでおｋ。簡単

jsファイルを作る

「nodejs-test」みたいなディレクトリ作ってその中に「app.js」みたいなファイルを設置します。
その後、「app.js」をエディタで開きましょう。

コードを書く

var http = require('http');

http.createServer(function(request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello, World\n');
}).listen(7777);

Node.jsでポート7777にサーバーを構築して、「Hello, World」という文字列をブラウザに出力します。上記のコードをapp.jsに書き込んで保存しましょう。

ターミナルから実行

cd nodejs-test/app.js

といった具合にディレクトリを移動し、

node app.js

でNode.jsを実行します。

実行したら、http://localhost:7777にブラウザでアクセスすると「Hello, World」と表示されているはずです。やったね！

HerokuでHello, Worldを公開する

Node.jsでつくったアプリは当然普通のレンタルサーバでは動作しません。
なので、アプリを公開する場合はNode.jsが動作するサーバへ設置する必要があります。

今回は、制限はあるものの無料で使用できる「Heroku」を利用します。

Herokuのアカウント登録

Heroku | Sign up

上記ページからアカウント登録。

Heroku専用のコマンドラインツールをインストール

Heroku Toolbelt

上記ページからツールをダウンロード、インストール。
Node.jsのインストーラーと一緒でポチポチすればおｋ。

package.jsonとProcfileを作成する

ターミナルでapp.jsがあるディレクトリへ移動し、

npm init

を実行。Enterキーを連打してpackage.jsonを作成します。

もうひとつ。

Procfileファイルを作成します。
これは、Heroku上でNode.jsを動作させる際に必要になるファイルです。

Procfileを新規作成し、

web: node app.js

と記述して保存します。
このファイルをHerokuに読ませることで、Node.jsを実行できるようになります。

ポート番号の記述を変更する

app.jsのcreateServerのポート番号をHeroku用に書き換えます。

var http = require('http');

http.createServer(function(request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello, World\n');
}).listen(process.env.PORT, process.env.IP);

listen(process.env.PORT, process.env.IP); ここに注目。こんな感じにポート番号を変更しましょう。