Ruby製フレームワーク Hanami を使って簡単なWebページを作ってみた。
ちなみに、デプロイ先はHerokuを使った。
デザインを一から作るのは面倒だったので、Boostrapテーマを使用。
ちなみに、使ったのはUmiっていうテンプレート。
制作環境
・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 はこちらよりダウンロード。
ダウンロードしたファイルを実行してインストール。
あとは勝手に環境パスも通してくれるので、コマンドプロンプト 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
で、ソースはこちら
以下、デプロイまでの感想。
いやー、実際にHanamiでデプロイするところまでやってみたけど案外何とかなったね。
基本的にはHanami公式ページに書いてあることを参考にして作ったし、そんなに躓くところはなかったかな……？
詰まったところは、ローカルサーバーを立てるときかな。
どうもWindowsだと 'shotgun' が上手く動かないみたい。まあ、切ったら動いたんだけども……。 ← 別のWindows環境だと動かせなかった……
あと、ローカルサーバー立てたまま編集すると、その都度ローカルサーバー立て直す必要があったのがつらかった。
'shotgun' が絡んでるみたいなんだけど、情報が少なくてちょっとわからなかった。
（もっと英語が読めるようにならねば……）
まあ、全体通して結構簡単にWebページを作れたのは嬉しかったね。
今後の展望にも期待だね。
