Railsでcoffeescriptをjavascriptに変換する

Rails 5.1でAction Cableのサンプルを書いてて CoffeeScript の設定を JavaScriptに変えてみました

js2coffee 2.0 — convert JavaScript to CoffeeScript
のサイトで、右側に CoffeeScript 貼り付けると変換してくれました

sample.coffeeをsample.jsと変えて保存してあげて終わり
問題なく動作しました

coffee-rails gemが要らないので、Gemfileから消して

$ bundle install

してきれいにしておきました

Rails5でBootstrap Toggleが初回表示だけ動かない

Ruby on Rails 5をrailstutorialをやっていれていたので、そこにBootstrap Toggleを導入してみました

gemは

rails 5.0.3
bootstrap-sass 3.3.7
bootstrap-toggle-rails 2.2.1
turbolinks 5.0.1

な感じです

assetにjsとcssをセット

$ vim app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-toggle
//= require turbolinks
//= require_tree .

$ vim app/assets/stylesheets/custom.scss

@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap-toggle";

として、bootstrap-toggleを読み込みました

Viewに

<%= check_box_tag "mode", 1, true,
  data: { toggle: "toggle", on: "On", off: "Off", onstyle: "primary", offstyle: "danger" },
  class: "toggle"
%>

を用意
これだけで、表示されてたりします
初回表示がただのチェックボックスで、リロードすると表示されたり..

Turbolinkの動きのせいらしいので、
GitHub - rkallensee/bootstrap-toggle-rails: Bootstrap Toggle plugin for the Rails asset pipeline
に記載があるように

$(document).on('ready page:change', function() {
  $('input[type="checkbox"].toggle').bootstrapToggle(); // assumes the checkboxes have the class "toggle"
});

としたら良さそうでしたが Turbolink 5 からは書き方が違うので

$(document).on('turbolinks:render', function() {
  $('input[type="checkbox"].toggle').bootstrapToggle();
});

としてあげると、正しく動きました

Railsをローカル開発環境でproduction環境を動かしてみる

Railsをローカル開発環境でproduction環境を動かしてみました

database.ymlを書いてなければ追記

$ vim config/database.yml

production:
    adapter: postgresql
    encoding: utf8
    reconnect: false
    database: production
    pool: 5
    username: user
    password: password
    host: localhost

各自の環境に合わせてください

$ rake db:create RAILS_ENV=production
$ rake db:migrate RAILS_ENV=production

データベースができあがり

$ config/environments/production.rb

config.serve_static_assets = true

にしておいて、JSとCSSを読み込めるようにします

secret_key_baseを確認

$ vim config/secrets.yml

production:
  secret_key_base: <%= ENV["SECRET_KEY_BASE"] %>

SECRET_KEY_BASEの環境変数が必要でした

rails起動

$ SECRET_KEY_BASE=abcdefg rails s -b 0.0.0.0 -e production

これで確認できました

Dockerを使ってrails 5を動かしてみる

DockerとRails5を試してみました

Quickstart: Compose and Rails
をベースに行いました
dockerやdocker-composeはインストール済み、Ubuntu 14.04上で行いました

Dockerfileを用意

$ vim Dockerfile

FROM ruby:2.3.1
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev
RUN mkdir /myapp
WORKDIR /myapp
ADD Gemfile /myapp/Gemfile
ADD Gemfile.lock /myapp/Gemfile.lock
RUN bundle install -j4
ADD . /myapp

Gemfileを用意します

$ vim Gemfile

source "https://rubygems.org"
gem 'rails', '>= 5.0.0.beta4', '< 5.1'

Quickstartの手順通り、Gemfile.lockを用意

$ touch Gemfile.lock

docker-compose.ymlを用意

$ vim docker-compose.yml

version: '2'
services:
  db:
    image: postgres
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db

rails newしてrailsアプリを作っておりきます

$ docker-compose run web rails new . –force –database=postgresql –skip-bundle

railsアプリのファイル権限がrootになっているので、権限を変えます

$ sudo chown -R $USER:$USER .

javascriptランタイムのために、therubyracerのコメントアウト状態を解除

$ vim Gemfile

gem 'therubyracer', platforms: :ruby

railsのデータベース設定を用意

$ config/database.yml

development: &default
  adapter: postgresql
  encoding: unicode
  database: postgres
  pool: 5
  username: postgres
  password:
  host: db

test:
  <<: *default
  database: myapp_test

buildして立ち上げます

$ docker-compose build
$ docker-compose up

http://(server domain):3000 にアクセス!

https://gyazo.com/a41526a2386d9c78b718cdee0dc619bb

rails5が立ち上がっています!

scaffoldして簡単に画面を作ってみます

$ docker-compose run web rails generate scaffold Article title:string
$ docker-compose run web rails db:migrate
$ docker-compose up

http://(server domain):3000/articles にアクセス!

https://gyazo.com/9da374e51b901d68da2b9f69eceddebc

できてます

このままだと docker rm でコンテナを消すとデータベースのデータが消えます

$ docker-compose run web rails db:migrate

すれば戻りますが、データベースをホスト側に保存させてみます

volumes を bind します
postgresql用のディレクトリをホスト側へ用意

$ mkdir -p datastore/postgresql

docker-compose.yml に バインドさせる設定を追記

$ vim docker-compose.yml

version: '2'
services:
  db:
    image: postgres
    volumes:
      - ./datastore/postgresql:/var/lib/postgresql/data
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db

$ docker-compose build
$ docker-compose up

これでデータベースのデータもホスト側へ保存されるようになりました
ここまでくれば開発ができそうです