FreeStyleWiki

Hanami

[Ruby,Hanami]

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

  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

// 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