By U Zensen.

欲しいものはプログラミングで自分で作る。

Herokuでnode.js製のアプリを公開する。

2016 / 10 / 20
JavaScript
161020_title

はじめに!!

どうも。ぴーすけです!

以前、node.jsで作ったアプリをHerokuで公開する!!でnode.js製のアプリをHerokuにデプロイし、WEBに公開するところまでやりました。

この記事通りに実際にアプリをデプロイをして、WEBに公開するところまでできたのは事実なのですが、その自分の記事を見ながら、また違うアプリをデプロイしようとしたところ、なぜかうまくいかなかったので、少し違う手順でデプロイをしました。その手順を簡単にまとめておこうと思います。

もし、以前書いた記事を参考にしてうまくいかなかった方はこちらの方が公式サイトの手順に近いので参考になるかと思います。

スポンサードリンク

前提

必要なものは以下!!

  • デプロイするアプリ(node.jsで作ったもの)
  • git(コマンドラインで使えるように)
  • npm(node.jsが使える状態なら使えるはずですね)
  • Herokuにアカウント登録
  • Heroku toolbeltのインストール(コマンドラインからHerokuを使うため)

これです。

流れ

Herokuでアプリを作る

デプロイする予定のディレクトリで設定ファイルを作る

Herokuのアプリとデプロイ予定のディレクトリを紐付ける

gitでコミットしてプッシュ

完成

Herokuでアプリを作る

今回は全部コマンドラインからやっちゃいます。そのためにもまずはHerokuに会員登録して、Heroku toolbeltをインストールします。

関連記事:node.jsで作ったアプリをHerokuで公開する!!

早速ログイン。

heroku login

ログインしたらアプリをHerok上に作ります。

heroku create {アプリ名}

これでHeroku側はOKです。

デプロイする予定のディレクトリで設定ファイルを作る

次にこれ。リアルタイムチャットを作るためにchatディレクトリを作ったとします。構成は以下の通り。

161012_1

そしたらchatディレクトリに移動して、以下のnpmコマンドで「package.json」ファイルを生成します。

npm init

そしたらいろいろ質問されますが、ほとんどの質問には何も入力せずにEnterでOKです。以下の質問には適切な値を入力しておきましょう。

//その他の質問
description: {何かしらの説明文} 例) realtime chat
//その他の質問
test command: {実行コマンド} 例) node chat.js 
//その他の質問
author: {作成者名} 例) byuzensen
//その他の質問

最後まで質問が終わると以下の内容でいいですか?と聞かれるのでEnter!

{
  "name": "アプリ名",
  "version": "0.0.0",
  "description": "realtime chat",
  "main": "chat.js",
  "dependencies": {
    "express": "^4.11.1",
    "socket.io": "^1.3.2",
  },
  "devDependencies": {}
  "scripts": {
    "test": "node chat.js",
  },
  "author": "byuzensen",
  "license": "ISC"
}

そうするとchatディレクトリ上に「pakege.json」ファイルが作成され、先ほど確認した内容が書かれています。そして、作成したファイルを少し書き直します。

{
  "name": "アプリ名",
  "version": "0.0.0",
  "description": "realtime chat",
  "main": "chat.js",
  "dependencies": {
    "express": "*",//ここの値を*に
    "socket.io": "*",//ここの値を*に
  },
  "devDependencies": {}
  "scripts": {
    "start": "node chat.js",//ここのキーをtestからstartに
  },
  "engines": {//ここ追加
    "node": "0.11.11"//ここ追加(自分のnodeのバージョンを調べて入れる)
  },//ここ追加
  "author": "byuzensen",
  "license": "ISC"
}

これでOK

次は「.gitignore」ファイルです。これは普通に「.gitignore」という名前のファイルを作って以下の内容を記述しておきます。ここに書いたファイルはgitが無視してくれるようになります。(もう変更し無さそうなファイルを記述しておく)

node_modules

これでOK。最後に「Procfile」ファイルです。これも「Procfile」という名前のファイルを作成して、以下の内容を記述しておけばOK。ここに書いた記述はHerokuがアプリを動かす際に使うコマンドらしいです。

web: node chat.js

これで設定ファイル作成は完了です。

Herokuのアプリとデプロイ予定のディレクトリを紐付ける

ここが以前と違います。

cd {パス}/chat
git init
heroku git:remote -a {アプリ名}

前回の記事ではcloneコマンドでしたが、remoteコマンドを使っています。

「git:clone」はリモートリポジトリを複製し、ローカルに保存します。Herokuにすでに存在するリポジトリを取得する感じです。「git:remote -a」はアプリに新たにリモートリポジトリを作成するイメージだと思います。(違ったらすいません)

なので、Heroku上にリポジトリがないので、git:remoteを使って新たにアプリ用のリポジトリを作成します。

gitでコミットしてプッシュ

あとは一緒です。

git add .
git commit -am "{コメント}"
git push heroku master

これでchatディレクトリのファイルが全てHerokuのアプリ用のディレクトリに保存され、WEB上からアクセスできるようになります。ちなみにアクセスは以下。

heroku open

以上!!

これでできるはずです!

全てコマンドラインから行いましたが、違うのは「git:clone」なのか「git:remote」なのかというところくらいです。アプリを作るのはブラウザからサイトにログインしてやっても全然問題ありません!

Pocket

コメント

コメントを残す