IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / Node.js で作ったブログカードアプリを Heroku にデプロイしてみる

Node.js で作ったブログカードアプリを Heroku にデプロイしてみる

2019/02/12 javascript, Node.js

前記事で、ブログカードにしたいサイトアドレスを投げればブログカードにして返してくれるアプリを作ってみたのですが、実際に使おうと思いますと、当然公開サーバーで立ち上げないと使えません。

www.imuza.com

Heroku の無料サービスで試してみようと思います。

Heroku への登録方法や Git の使い方などはググればいっぱいヒットしますので書いていません。

  • Heroku CLI のインストール〜ログイン
  • ローカルでの準備
    • ローカルリポジトリの作成
    • Procfile
  • デプロイ~起動
  • ログを見てエラーに対処する

Heroku CLI のインストール〜ログイン

Heroku へのデプロイの仕方もググればいろいろヒットしますが、古い記事もありますのでやはり公式サイトに従いながらやったほうがいいでしょう。

jp.heroku.com

トップページにある対応言語のアイコンをクリックしますと、それぞれ Getting Started のドキュメントに進ます。今回は node.js から進みますと、Set up がありますので、まずそれぞれ OS用の Heroku CLI をインストールします。

Ubuntu の場合です。Windows はインストーラーです。

$ sudo snap install heroku --classic


$ heroku login
 or
$ heroku login -i

画像は、インストール後、ログインをせずに $ heroku create とし、さらに q to exit と言われているのに ctrl+c としてしまいましたのでエラーになっています。$ heroku login としますと下のようなブラウザが立ち上がりブラウザからログインできます。上の画像ではターミナルからのログインを確認するために一度ログアウトし、$ heroku login -i としてターミナルからログインしています。

ローカルでの準備

Heroku での Node.js は 2019/2/10現在、ver.8 以上が必要とあり、チュートリアルには、

$ node --version
v10.13.0
$ npm --version
6.4.1
$ git --version
git version 2.15.1

がサンプルとして表示されています。

ローカルリポジトリの作成

$ git init


$ git add .


$ git commit -m "first commit(など自由に)"

プロジェクトディレクトリで $ git init と打ち、リポジトリを作ります。続いて、$ git add . (すべてのファイルの場合)としてファイルをリポジトリに追加します。画像は、確認のため $ git status と打っています。

必要なファイルは、プロジェクト関係のファイルと package.json, Procfile です。画像にはありませんが、続いて $ git commit -m "first commit(など自由に)" とコミットしておきます。

Procfile

Procfile にはアプリの起動ファイルを書いておきます。書式は、

<process type>: <command>

The Procfile | Heroku Dev Center

今回はウェブアプリですので、

web: node app.js

となります。

デプロイ~起動

$ heroku create


$ git push heroku master


# 公式サイトのチュートリアルにあったので…
$ heroku ps:scale web=1


$ heroku open

あとは、Heroku にアプリを作りデプロイするだけです。

Heroku にログインした状態から $ heroku create と打ち、Heroku にアプリを作ります。この例では、https://stormy-wave-*****.herokuapp.com がアプリのアドレス、https://git.heroku.com/stormy-wave-*****.git が Herokuのリポジトリとなります。

アプリ作成の段階で $ heroku create ***** とすれば、https://*****.herokuapp.com がアプリ名になるようです。ただこれは後からも変更できます。

続いて、$ git push heroku master と打ってデプロイします。

エラーなくデプロイできましたら、チュートリアルに確認のために $ heroku ps:scale web=1 と打てとありましたので、どういう意味があるのか理解できていませんが打ってみました。問題なさそうですので、$ heroku open でアプリを起動します。

ログを見てエラーに対処する

ということでうまくいけばいいのですが、思うように動かなければログを見て対処します。

$ heroku logs --tail

とすればリアルタイムでエラーログが監視できます。

私の場合もかなり初歩的なミスで動きませんでした(笑)。

実は、複数の場所やOSから作業する都合上、プロジェクトファイル類はDropboxに入れてどこからでも触ることができるようにし、実際の編集は各OSごとにシンボリックリンクにして、なおかつ node_modules ディレクトリもそれぞれOSごとに共有できるようにシンボリックリンクにしていますので、Dropboxにある実ファイルが入ったディレクトリには package.json が存在していません。ですので、Heroku へのデプロイの際に、$ npm init で package.json を作ったのですが、当然それには必要なパッケージ cheerio-httpcli が書かれていません。

ですので、当然ながら、Error: Cannot find module 'cheerio-httpcli' となるわけで、ところがこれがなかなか見つけづらく結構手間取りました。

{
  "name": "blogcard",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cheerio-httpcli": "^0.7.3"
  }
}

見つけてみれば、なーんだ!?ということで、書き加えて無事ブログカードアプリが稼働したわけです。

Node.js でブログカードを返すアプリを作ってみた
Joomla! 3.9.3 セキュリティ & バグフィックスがリリースされています
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com