30歳パパエンジニアのアウトプット帳

30歳に突入した1児のパパエンジニアのブログ

cancancaでAbilityクラスにcurrent_user以外の引数を渡す方法

Cancan(Cancancan)使ってて、今までは下記みたいにuserさえあればよかったけど、ある時sessionのある値をAbilityクラスに渡したくなった。

class Ability
  include CanCan::Ability

  def initialize(user) ←(user, other_param)みたいにしたい!
    ・・・
  end
end

ぐぐっていると下記を見つけた。

github.com

なので、そこにあるようにapplication_controller.rbでcurrent_abilityをオーバーライドすればOK。

react-railsとreact_on_railsについてのメモ

個人用の調べたことや思ったことメモ。

RailsでReactを利用するのに使われる2大Gem。 どちらもSSRに対応している。

webpackerでreactやるんではダメなん?

webpacker:install:reactのこと。 やれなくはないと思う。

しかし、今回はSPAではなく一部分に導入(ボタン等)したかったので、react_componentのようなヘルパーメソッドがほしかった(部分適用が楽)

下記のようにやる必要があるので、部分適用で箇所が多くなるとツライと思う。。

document.addEventListener("DOMContentLoaded", e => {
  ReactDOM.render(<Hello name="React" />, document.getElementById("ターゲットのid"))
})

react-rails

https://github.com/reactjs/react-rails

  • react登場の初期の頃からある認識
  • execjs依存
  • 単体利用だとコンポーネントをグローバルに紐付ける
    • webpackerをサポートしたので、webpackerを利用していればグローバルではなくなる
  • CSRFトークンをpropで渡す必要がある
  • デフォルトはsprockets利用
    • レールに乗ったままいける
    • 確か内部でreact.jsを持っている(バージョンがちょっと古い)
      • reactのaddonsの利用をサポートしているから?
    • すぐにnpm使いたくなる
      • 今はwebpackerと組み合わせる方法がある
      • 他はbrowserify-rails使う方法かRailsAssets.orgかな?

react_on_rails

https://github.com/shakacode/react_on_rails

  • execjs依存
  • Rails疎結合でReactを利用できる
    • Rails側で使いやすいようにヘルパーやnpmのライブラリを提供している
  • CSRFはnpmでライブラリが用意されている
    • ReactOnRailsで取得可能
  • 非SPAだと重厚すぎないか?
csrfToken = ReactOnRails.authenticityToken();

// compose Rails specific request header as following { X-CSRF-Token: csrfToken, X-Requested-With: XMLHttpRequest }
header = ReactOnRails.authenticityHeaders(otherHeader);
  • 利用例はr7kamuraさんのamakanが秀逸

http://r7kamura.hatenablog.com/entry/2016/10/10/173610

その他

ExecJSとは

Rubyからjavascriptを実行できるようにするためのもの。

javascriptランタイムを抽象化して同じインターフェースで利用できるようにする。

ランタイム

  • therubyracer
    • Gemfileでデフォルトで入っていたやつ
    • メモリ使用量が多いのが難点
    • インストールも苦労するのだが
    • 最近はmini_racer推奨
  • Node.js
    • いわずとしれたサーバサイドでも使えるjavascript
  • mini_racer
    • therubyracerよりも高速、安定、省メモリ
    • therubyracerが抱えていた古いV8エンジンの問題も解決

Railsのwebpackerでbin/webpack-dev-serverをした時にinvalid host headerになってしまう

Railsのwebpackerでbin/webpack-dev-serverをしてブラウザからアクセスするとinvalid host headerとJSのエラーになってしまった。

(Virtualboxに開発環境を作ってホストOSのブラウザからアクセスしている)


とりあえず、下記の設定を入れてエラーを回避しているが、どうやるのが正しいのだろう。

[config/webpack/development.js]

module.exports = merge(sharedConfig, {
    ・・・

  devServer: {
    disableHostCheck: true,
    ・・・
  }

HerokuのRailsでnpm installをできるようにする

1. 下記の手順に従ってrubyとnodejsのビルドパックを追加する

devcenter.heroku.com

$ heroku buildpacks:add --index 1 heroku/nodejs
Buildpack added. Next release on アプリ名 will use:
  1. heroku/nodejs
  2. heroku/ruby
Run git push heroku master to create a new release using these buildpacks.

2. assets:precompileの前にnpm installを行うRakeタスクを作成する

[lib/tasks/before_precompile.rake]

task :npm_install do
  sh "npm install"
end

Rake::Task["assets:precompile"].enhance(%i(npm_install))

手順2. は要らなさそう。Herokuがyarnをサポートしているようなのでyarn.lockファイルがあるとyarn installが自動で走るみたい。

devcenter.heroku.com

Herokuのタイムゾーンを日本にする

Herokuのタイムゾーンを日本時間に設定する - アインシュタインの電話番号を参照

コマンド

heroku config:set TZ=Asia/Tokyo

bitbucketにpushしたらherokuにもpushするようにする

まあ、下記のURLの通りにやるだけなんでけど。

超簡単なのでびっくり。pipeline便利。

Deploy to Heroku - Atlassian Documentation

herokuのDBをローカルのDB(Docker)にリストアする

1. herokuのDBのバックアップを取得する

下記のコマンドを実行。

heroku pg:backups capture --app アプリ名

2. herokuのDBのコンソール画面でバックアップしたファイルをダウンロード

コマンドからでもできるみたいだけど、今回は画面から。

herokuのダッシュボードから行くか、https://data.heroku.com/へアクセスした対象のDBへ行ってダウンロードボタンを押す。

3. Dockerのpostgresqlへインポート

下記のコマンドを実行。

cat ダウンロードしたバックアップファイル | docker exec -i [container_id or name] pg_restore --verbose --clean --no-acl --no-owner -U ユーザ名 -d DB名


以上。