Hanamiで静的なWebページを作って、Herokuへデプロイしてみた

 

Rubyフレームワーク Hanami を使って簡単なWebページを作ってみた。

hanamirb.org

 

ちなみに、デプロイ先はHerokuを使った。

www.heroku.com

 

デザインを一から作るのは面倒だったので、Boostrapテーマを使用。

ちなみに、使ったのはUmiっていうテンプレート。

nkmr6194.github.io

 

 

制作環境

Windows 10 Pro

Ruby 2.3.3

・Hanami 1.0.0

Visual Studio Code 1.14.2

 

以下、制作過程

 

まず、コマンドプロンプトPowerShell を開いて

gem install hanami 

と入力。

これで、Hanami がインストールされる。

 

で、その後 

hanami new umi_hanami

とコマンド入力し、アプリケーションを生成する。

 

で、そのまま bundle install と行きたいけれどいくつか足りないものがあるので Gemfile を弄っていく。

 

開発環境に 'sqlite3' と 'wdm' を追加して、 ’shotgun’ をコメントアウトする。

(ローカルサーバー立てるのに 'shotgun' が必要だった……)

 

それと、 'puma' と 'pg' を実行環境に追加。

 

その後、bundle install 

 

そんで、ダウンロードしてきた Umi の中にある

・boostrap.css

・boostrap.min.css

・boostrap.js

・boostrap.min.js

 をapp/web/assets 以下の stylesheets と javascripts の中にそれぞれ配置する。

 

配置完了後、以下のコマンドを入力して

bundle exec hanami g action web umi#index --url=/

index.erb.htmlを生成。

ちなみに、 --url=/ と指定することで、umi#index が root として機能する模様。

 

あとは、Umiのサンプルを参考にしつつ、index.erb.html を書いていく。

Ruby on Rails にある link_to とかもHanamiにはあるのでそれも使っていく。

 

Webコーディングが済んだら、Heroku CLI をインストール。

 

Heroku CLI はこちらよりダウンロード。

devcenter.heroku.com

 

ダウンロードしたファイルを実行してインストール。

あとは勝手に環境パスも通してくれるので、コマンドプロンプト or PowerShell に戻る。

 

で、コマンドプロンプト or PowerShellにて以下のコマンドを入力。

heroku login

heroku apps:create umi-hanami

heroku config:add SERVE_STATIC_ASSETS=true

git add .

git commit -m"addfile"

git push heroku master

heroku run bundle exec hanami db migrate

 

これらを入力後、’heroku open’ を入力すると実際のWebページがブラウザで表示される。

ちなみに、'heroku login' 入力後にメールアドレスとパスワードを要求されるので入力してね。

 

実際のサンプルはこちら

Hanami + Heroku + Umi SampleWeb

 

で、ソースはこちら

github.com

 

以下、デプロイまでの感想。

 

いやー、実際にHanamiでデプロイするところまでやってみたけど案外何とかなったね。

 

基本的にはHanami公式ページに書いてあることを参考にして作ったし、そんなに躓くところはなかったかな……?

 

詰まったところは、ローカルサーバーを立てるときかな。

どうもWindowsだと 'shotgun' が上手く動かないみたい。まあ、切ったら動いたんだけども……。 ← 別のWindows環境だと動かせなかった……

 

あと、ローカルサーバー立てたまま編集すると、その都度ローカルサーバー立て直す必要があったのがつらかった。

'shotgun' が絡んでるみたいなんだけど、情報が少なくてちょっとわからなかった。

(もっと英語が読めるようにならねば……)

 

まあ、全体通して結構簡単にWebページを作れたのは嬉しかったね。

 

今後の展望にも期待だね。