俺とプログラミング

某IT企業でエンジニアをしてます。このブログではプログラミングに関わることを幅広く発信します。

herokuとNode.jsで簡単webアプリ作成【heroku入門】

Herokuとnode.jsでHellow Worldと表示するだけのwebアプリを公開するまでのプロセスを紹介します。

Herokuはすごいです。無料で広告なしのwebアプリが公開できます!

それでは見ていきましょう!


まずはnode.jsをインストールします。下記サイトを参考にしてください。

node.jsがインストールできたらgitもインストールしておきます。

macなら

$ brew install git

linuxなら

$ sudo apt-get install git

さて, いよいよherokuのインストールといきましょう。
まずは公式サイトでアカウントの登録をします。

アカウントを登録すると, Getting Startedのページになります。実はこれにしたがってゆくのが一番わかりやすいかもしれません。

次に、heroku toolbelt を以下のURLからダウンロードします。

heroku toolbelt のダウンロード、及びインストールが完了したら, まずはターミナルからログインします。

$ heroku login

アカウント名とパスワードを入力してください。
次に, heroku公式が提供するサンプルのレポジトリーをダウンロードします。

$ git clone https://github.com/heroku/node-js-getting-started.git
$ cd node-js-getting-started

次にこのサンプルアプリケーションをデプロイします。

$ heroku create
$ git push heroku master

以下のコマンドで公開したwebを開けます。

$ heroku open

Hello World!と表示されれば完璧です。
たったこれだけのステップでwebサイトが公開できるなんてherokuすごい!

変更を加えた結果を反映したいときは以下の一連のgitコマンドを実行します。

$ git add .
$ git commit -m "commit message"
$ git push heroku master

ローカル開発環境で開発したい場合はnpmコマンドを使います。

$ npm install
$ npm start

コマンド実行後、localhost:5000にアクセスできるはず。

無料で公開できるアプリの数は5個までのようです。クレジットカードを登録すれば100個とのこと。
ただし容量制限はあります。
サイトの規模が大きくなってきたら有料に以降すればOKです。

ちなみにアプリの名前はランダムに決定されます。
これを変更するには,

heroku rename [app-name]

とすればよいでしょう。
これで, ドメインが [app-name].herokuapp.com になります。

独自ドメインを設定したいときは以下のサイトを参考にするとよいでしょう。

はじめてのNode.js -サーバーサイドJavaScriptでWebアプリを開発する-
GitHub実践入門 ~Pull Requestによる開発の変革 (WEB+DB PRESS plus)
プロフェッショナルのための 実践Heroku入門 プラットフォーム・クラウドを利用したアプリケーション開発と運用 (アスキー書籍)

Copyright © 2016 ttlg All Rights Reserved.