Node.js 製 CMS「KeystoneJS」のアプリを作成して Heroku へ deploy する方法

Node.js 製 CMS「KeystoneJS」でアプリを作成して Heroku へ Deploy するまでやってみたので手順をご紹介します。

KeystoneJS セットアップ・ホスティング環境

Node.js LTS の最新バージョン 6.11.1 を利用します。

$ nvm use v6.11.1
Now using node v6.11.1

また、KeystoneJS の deploy 先は Heroku が楽なのでこれを使います。

Getting started に沿って KeystoneJS 始める

KeystoneJS 公式サイトに Getting started という入門コンテンツがあるので、これに沿ってはじめていきます。

KeystoneJS · Getting started

generator-keystone, yo のインストール

npm install -g generator-keystone
npm install -g yo

npm install -g yo

アプリケーションのディレクトリ作成

generator-keystone でディレクトリ生成できますが、ディレクトリ名を指定できないので先に自分で作っておきます。

mkdir my-test-project
cd my-test-project

yo keystone でアプリケーションの雛形生成

yo keystone
 
Welcome to KeystoneJS.
 
? What is the name of your project? keystonejs demo
? Would you like to use Pug, Nunjucks, Twig or Handlebars for templates? [pug | nunjucks | twig | hbs] pug
? Which CSS pre-processor would you like? [less | sass | stylus] sass
? Would you like to include a Blog? Yes
? Would you like to include an Image Gallery? Yes
? Would you like to include a Contact Form? Yes
? What would you like to call the User model? User
? Enter an email address for the first Admin user: demo@example.com
? Enter a password for the first Admin user:
 Please use a temporary password as it will be saved in plain text and change it after the first login. admin
? Would you like to create a new directory for your project? No
? ------------------------------------------------
    Would you like to include Email configuration in your project?
    We will set you up with an email template for enquiries as well
    as optional mailgun integration Yes
? ------------------------------------------------
    If you want to set up mailgun now, you can provide
    your mailgun credentials, otherwise, you will
    want to add these to your .env later.
    mailgun API key: 
? ------------------------------------------------
    mailgun domain: 
? ------------------------------------------------
    KeystoneJS integrates with Cloudinary for image upload, resizing and
    hosting. See http://keystonejs.com/docs/configuration/#services-cloudinary for more info.
 
    CloudinaryImage fields are used by the blog and gallery templates.
 
    You can skip this for now (we'll include demo account details)
 
    Please enter your Cloudinary URL: 
? ------------------------------------------------
    Finally, would you like to include extra code comments in
    your project? If you're new to Keystone, these may be helpful. Yes
 
...
 
------------------------------------------------
 
Your KeystoneJS project is ready to go!
 
For help getting started, visit http://keystonejs.com/guide
 
We've included the setup for email in your project. When youwant to get this working, just create a mailgun account and putyour mailgun details into the .env file.
 
We've included a demo Cloudinary Account, which is reset daily.
Please configure your own account or use the LocalImage field instead
before sending your site live.
 
To start your new website, run "cd keystonejs-demo" then "node keystone".

keystone アプリを起動する

$ node keystone
----------------------------------------
WARNING: MISSING MAILGUN CREDENTIALS
----------------------------------------
You have opted into email sending but have not provided
mailgun credentials. Attempts to send will fail.
 
Create a mailgun account and add the credentials to the .env file to
set up your mailgun integration
------------------------------------------------
Applying update 0.0.1-admins...
 
------------------------------------------------ 
KeystoneJS デモ: Successfully applied update 0.0.1-admins. 
 
Successfully created:
 
*   1 User
 
 
------------------------------------------------
Successfully applied 1 update.
------------------------------------------------
 
------------------------------------------------
KeystoneJS Started:
KeystoneJS デモ is ready on http://0.0.0.0:3000
------------------------------------------------

続きは KeystoneJS 公式ドキュメントを読んで、カスタマイズしていきましょう。

Heroku に Keystone アプリを Deploy する

Heroku アプリ作成

まず、Heroku アプリを名前を指定して作成します。

heroku apps:create keystonejs-demo

Heroku アプリをリモートに追加

Heroku アプリを新たにリモートに追加する。

heroku git:remote --app keystonejs-demo

Heroku アプリに MongoDB アドオンを追加

Heroku には MongoDB のアドオンがいくつかありますが mLab (旧 mongolab) を利用します。

heroku addons:add mongolab:sandbox
 
Creating mongolab:sandbox on ⬢ yourapp... free
Welcome to mLab.  Your new subscription is being created and will be available shortly.  Please consult the mLab Add-on Admin UI to check on its progress.
Created mongolab-rigid-12345 as MONGODB_URI
Use heroku addons:docs mongolab to view documentation

Cloudinary 新規登録・環境変数の設定

Cloudinary は Heroku アドオンもありますが、本家サイトから個別にアカウント作成してくとよいです。

Mailgun アドオンの追加

heroku addons:add mailgun:starter

Papertrail アドオンの追加

Heroku Console からログを確認することができますが、より高機能なログ収集ツールを導入します。

heroku addons:add papertrail:choklad

最後に、おなじみの

git push heroku master

で Heroku 上にアプリを deploy すれば完了です。

参考情報

関連記事