読者です 読者をやめる 読者になる 読者になる

dev.kokushin

HTML5、CSS3、JavaScriptを中心に、日々のプログラミングで得た知識をメモしています。

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

Node.js Heroku

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/

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

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のインストーラーと一緒でポチポチすればおk。

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); ここに注目。こんな感じにポート番号を変更しましょう。

コマンドラインでHerokuにアプリをデプロイする

gitを利用してHerokuにデータをデプロイします。
ターミナルでapp.jsがあるディレクトリに移動し、

git init

でgitの初期化を行います。
続いてHerokuにアプリを登録します。

heroku create アプリ名

アプリ名には任意の名前を入力してください。
ただし、既に使用されているアプリケーション名を登録することは出来ません。
入力後にEnterを押すとHeroku上にアプリが登録されます(https://dashboard.heroku.com/appsで確認できます)。

次にgitを使ってデータをHerokuにコミットします。

git add .

で、ディレクトリ内のすべてのファイルをステージングに追加します。

git commit -m "任意のコメント"

でHerokuにステージングしたファイルをコミットします。
そして最後にプッシュしてHerokuへのデータのデプロイは完了です。

git push heroku master

デプロイ完了したら、「アプリケーション名.herokuapp.com」で実際のアプリにアクセスできます。

https://nodejs160404.herokuapp.com/

これでとりあえずつくったアプリが公開されました。

今後

Node.jsとSocket.ioを使って色々やりたいすね。
その2 →