Hanami
- やりたいこと
- バックエンド:Hanami
- フロントエンド:Vue.js with webpack
実行環境
- Vagrant で EC2インスタンスを作ればよいだろう
- Hanamiのデフォルトポートのために2300を開けておいたほうがいいだろう
- config.vm.network "forwarded_port", guest: 2300, host:2300
rbenv, ruby-build
- rbenv, ruby-build で Ruby 2.4.0 などをインストールしておけばいいだろう
- bundlerを入れておく
gemの命名規則
- 久しぶりに再始動
- 命名規則
GEM NAME | REQUIRE STATEMENT | MAIN CLASS OR MODULE |
---|---|---|
ruby_parser | require 'ruby_parser' | RubyParser |
rdoc-data | require 'rdoc/data' | RDoc::Data |
net-http-persistent | require 'net/http/persistent' | Net::HTTP::Persistent |
net-http-digest_auth | require 'net/http/digest_auth' | Net::HTTP::DigestAuth |
Hanami on CRuby
- 下準備
- 事前にhanamiコマンドを叩けるようにしとく
$ gem install hanami
- Hanamiを初期化してやる
// hanami が直接実行できるなら以下のように $ hanami new db_badmin --application-name=datasource // rbenv から実行する場合は $ rbenv exec hanami new db_badmin --application-name=datasource // できあがるGemfileのサンプル $ cat Gemfile source 'https://rubygems.org' gem 'rake' gem 'hanami', '~> 1.1' gem 'hanami-model', '~> 1.1' gem 'sqlite3' group :development do # Code reloading # See: http://hanamirb.org/guides/projects/code-reloading gem 'shotgun' end group :test, :development do gem 'dotenv', '~> 2.0' end group :test do gem 'minitest' gem 'capybara' end group :production do # gem 'puma' end $ bundle install
yarn
- ここからyarnをインストールしておく
- Hanamiでwebpackを使う方法
- Veu.jsを使いたいのでwebpackの連携を試してみる
webpack
- assetsは削除するらしい
$ rm -rf apps/datasource/assets/
- yarnを使っていろいろ
// 移動 $ cd apps/datasource/ $ yarn init $ yarn add webpack assets-webpack-plugin webpack-cli --dev $ yarn add jquery // webpackビルド $ yarn run webpack
- assets関連コードを削る
- apps/datasource/application.rb
- require 'hanami/assets' ... - assets do - javascript_compressor :builtin - - stylesheet_compressor :builtin - - sources << [ - 'assets' - ] - end ... configure :production do - assets do - compile false - fingerprint true - subresource_integrity :sha256 - end end
- こんなコードを書いて
- apps/datasource/views/page/home.rb
module Datasource::Views::Page class Home include Datasource::View def tes() # 応答チェック "Tes." end def script_for(bundle) # webpackの場所を示す path = Datasource::Application.configuration.root.join('webpack-assets.json') file = File.read(path) json = JSON.parse(file) p json json[bundle]['js'] end end end
- apps/datasource/templates/application.html.erb
<!DOCTYPE html> <html> <head> <title>Datasource</title> </head> <body> <p>Can you response for me ? <%= tes() %></p> <p>Webpack script file name: <%= script_for('main') %></p> <%= yield %> <!-- erb で viewのhelperを呼び出してファイル名を出す --> <script type="text/javascript" src="<%= script_for('main') %>" charset="utf-8"></script> </body> </html>
これでwebpackの導入はOKと思われる。
Vue.js
- Vue.jsを入れていく
// jsの依存関係にVueを入れる $ yarn add vue // もう一回ビルド $ yarn run webpack
Vue.js と Content Security Policy (CSP)
- CSPは新しいHTML5周りの規格のようだ
- Content Security Policy (CSP)
- Content Security Policy (CSP) とは、クロスサイトスクリプティング (XSS) やデータを差し込む攻撃などといった、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤーです。これらの攻撃はデータの窃取からサイトの改ざん、マルウェアの拡散に至るまで、様々な目的に用いられます。
なんかchromeのデフォルト設定ではVue.jsの処理が動かない。これはCSPに違反している部分があるからのようだ。
- サーバサイドでCSPの設定を緩める
- apps/datasource/application.rb
- default-src 'none'; - script-src 'self'; + default-src 'self'; + script-src 'self' 'unsafe-eval';
- Vue.js でフロントエンドを書いていくのだが、その辺の情報は以下のページで
新規アプリの追加
$ bundle exec hanami new takeoffconf --application-name=datasource