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