Passion make things more better

Ruby on Rails / React.js / Swift / Team / Management

RailsのAssets構成(css / javascript)について

Railsでプロジェクトを作る際のassets周り(css / javascript)の構成等についてまとめました。 ※yarnを使ったパターンは、別途まとめたいと思います。

Boostrapの導入

bootstrap-sassというgemを利用します。Gemfileに以下を記述し、bundle installを行ってください。

gem 'bootstrap-sass', '~> 3.3.7'
gem 'jquery-rails'

stylesheetの構成に関して

├── application.scss
├── base.scss
├── mixin.scss
├── pages(特定のページのみに適用したいSCSSを配置するフォルダ)
│   └── sample.scss(ファイルが無いとエラーが起きるため、仮で配置しています)
├── partials(共通で使用するパーツを配置するフォルダ)
│   └── _texts.scss(テキストサイズ・色に関するCSS)
└── variables.scss

また、application.scssbase.scsspartials/_text.scssの内容は、以下を参考にしてください。

application.scss

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

@import "variables";

@import "mixin";

@import "base";

@import "partials/*";
@import "pages/*";

base.scss

body {
  font-size: 14px;
  font-weight: 300;
  word-break: break-word;
  line-height: 1.6;
}

h1,h2,h3,h4,h5,h6 {
  line-height: 1.5;
  letter-spacing: 1.5px;
  margin: 0 0 20px 0;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 21px; }
h4, h5, h6{ font-size: 18px; }

.section {
  margin-bottom: 80px;
}

.item {
  margin-bottom: 60px;
}

.main {
  padding-top: 80px;
}

partials/_texts.scss

.text-ex-large {
  font-size: 18px;
}

.text-large {
  font-size: 16px;
}

.text-normal {
  font-size: 14px;
}

.text-small {
  font-size: 12px;
}

.text-ex-small {
  font-size: 10px;
}

.text-bold {
  font-weight: bold;
}

javascriptsの構成に関して

├── application.js
├── libs(ライブラリを配置するフォルダ)
│   └── sample.js
├── pages(特定のページのみに適用したいJSを配置するフォルダ)
│   └── sample.js.coffee
└── partials(共通で使用するパーツを配置するフォルダ)
    └── sample.js.coffee

ページ毎にjavascriptを呼び出せるように、config/initialiers/assets.rbに以下を追記してください。

Rails.application.config.assets.precompile += %w( pages/*.js )

また、application.jsの内容は以下を参考にしてください。

application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree ./libs
//= require_tree ./partials
//= require_tree ./pages

RailsでActiveModel::Serializerを使ってAPIを作成する

RailsAPIを作る時の手法として、 ActiveModel::Serializerを使ったものを紹介する。

インストール

Gemfileに以下を記述し、bundle installを実行する。

gem 'active_model_serializers'

Serializer用ファイルの作成

以下のコマンドにてSerialize用のファイルを作成する。

$ bundle exec rails g serializer モデル名

今回はUserモデルに対してのSerializer用のファイルを作成する。

$ bundle exec rails g serializer User

これを実行すると、app/serializers/user_serializer.rbというファイルが生成される。

Serializerファイルの編集

以下のようにattributesで指定した値がJSONのレスポンスとして返却される。

class UserSerializer < ActiveModel::Serializer
  attributes :id,
             :first_name,
             :last_name,
             :email,
             :phone_number
end

ネストを行いたい時

関連レコードを含めたい時は、通常のModel同様リレーションを設定する。UserモデルにProfileモデルが紐付いていると仮定した場合、そのリレーションの設定は以下のようになる。

class UserSerializer < ActiveModel::Serializer
  attributes :id,
             :first_name,
             :last_name,
             :email,
             :phone_number

  has_one :profile
end

実際に使用してみる

controllerで以下のようにレスポンスをJSONで返すように記述すると、作成したSerializerのファイルがうまいこと結果を整形してくれる。

※ない場合は、modelのattributesがそのまま吐き出される

render json: @user

ネストの指定

このままでは、Serializerファイルで記述したリレーションがそのまま実行され、関連レコードがすべて取得されてしまう。そうならないために、返却時にincludeを指定する。

render json: @user, include: [:profile]

このようにすることで指定したリレーションのみ適用される。

※もし関連レコードを取得する必要がない場合には、includes: []を指定する。

参考

RapidSSL+NginxでA+環境を作る

RapidSSLとNginxでSSL LabsにてA+が出る環境を作るための方法を紹介します。

以下、やることです。

  • Certbotのインストール
  • SSL証明書の作成
  • dhparamの作成
  • Nginxの設定ファイル作成

※Nginxがインストールされている前提で話を進めます。

Certbotのインストール

証明書をインストールするためにCertbotをインストールします。

$ curl https://dl.eff.org/certbot-auto -o /usr/bin/certbot-auto
$ chmod 700 /usr/bin/certbot-auto

SSL証明書の作成

以下を実行して、証明書の作成を行う。nginxに設定を追加するか聞かれるがお好みで。

$ cd /usr/bin
$ ./certbot-auto --nginx -d ドメイン名 --email info@ドメイン名

dhparamの作成

DH鍵交換に使用するファイルを作成します。今回は/etc/dhparam/ドメイン名以下に作成。

$ cd /etc/dhparam/ドメイン名
$ sudo openssl dhparam 2048 -out dhparam.pem

Nginxの設定ファイル作成

私はよくRailsを使用するので、Railsの設定が残っていますが、Nginxの設定ファイルは以下のようになります。

upstream unicorn {
  server unix:/var/www/アプリケーション名/current/tmp/sockets/unicorn.sock;
}

server {
  listen 80;
  server_name ドメイン名;
  return 301 https://$host$request_uri;
}

server {
  listen 443 ssl;
  server_name ドメイン名;

  ssl_certificate         /etc/letsencrypt/live/ドメイン名/fullchain.pem;
  ssl_certificate_key     /etc/letsencrypt/live/ドメイン名/privkey.pem;

  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers "EECDH+ECDSA+AESGCM EECDH+aRSA+AESGCM EECDH+ECDSA+SHA384 EECDH+ECDSA+SHA256 EECDH+aRSA+SHA384 EECDH+aRSA+SHA256 EECDH+aRSA+RC4 EECDH EDH+aRSA RC4 !aNULL !eNULL !LOW !3DES !MD5 !EXP !PSK !SRP !DSS !RC4";
  ssl_prefer_server_ciphers on;
  ssl_dhparam /etc/dhparam/ドメイン名/dhparam.pem;

  add_header Strict-Transport-Security "max-age=15768000; includeSubdomains";

  access_log /var/log/nginx/access.log;
  error_log /var/log/nginx/error.log;

  client_max_body_size 100m;
  error_page 404 /404.html;
  error_page 500 502 503 504 /500.html;

  try_files $uri/index.html $uri @unicorn;

  root /var/www/アプリケーション名/current/public;

  location ~ ^/assets/ {
    root /var/www/アプリケーション名/current/public;
  }

  location @unicorn {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Proto https;
    proxy_redirect off;
    proxy_pass http://unicorn;
  }
}

おまけ:更新の自動化

RapidSSLは3ヶ月ごとに更新が必要なので、Cronで自動更新ができるようにしておきます。 Cronで実行するコマンドが正しく実行されるかチェックします。

$ sudo /usr/bin/certbot-auto renew --post-hook "sudo /etc/init.d/nginx restart"

こちらを実行すると以下のような結果が得られるかと思います。

Saving debug log to /var/log/letsencrypt/letsencrypt.log

-------------------------------------------------------------------------------
Processing /etc/letsencrypt/renewal/ドメイン名.conf
-------------------------------------------------------------------------------
Cert not yet due for renewal

-------------------------------------------------------------------------------

The following certs are not due for renewal yet:
  /etc/letsencrypt/live/ドメイン名/fullchain.pem expires on 2018-06-17 (skipped)
No renewals were attempted.
No hooks were run.
-------------------------------------------------------------------------------

こちらが表示されることを確認したら、/etc/cron.d以下にcertbotというファイルを以下の内容で作成します。

※毎月1日の朝3時に実行

0 3 1 * * root /usr/bin/certbot-auto renew --post-hook "/etc/init.d/nginx restart"

参考

Ruby(rbenv), MySQL, Ruby on Railsの環境構築 - MacOS

Macでゼロから環境構築をするための手順です。以下のことをやっていきます。

  1. xcodeのインストール
  2. Homebrewのインストール
  3. MySQLのインストール
  4. rbenvによるRubyのインストール
  5. Ruby on Railsのインストール
  6. Ruby on Railsのプロジェクト作成
  7. Hello World!!!

xcodeのインストール

はじめにxcodeをインストールしてください。Developer Toolというものが必要になるので。 ※時間がかかるのでご注意を。

Homebrewのインストール

Homebrewの公式サイトに行くと、以下のコマンドがあるので、それをターミナルに貼り付けて実行してください。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

MySQLのインストール

Homebrewを使ってMySQLをインストールします。

# インストール
$ brew install mysql

# 起動
$ mysql.server start

rbenvによるRubyのインストール

rbenvというRubyのバージョン管理を行うためのツールをインストールし、その後Ruby自体をインストールします。 ※時間がかかるのでご注意を。

$ brew install rbenv
$ echo 'eval "$(rbenv init -)"' >> ~/.bashrc
$ source ~/.bashrc
$ rbenv install -l
$ rbenv install 2.4.1
$ rbenv global 2.4.1
$ ruby -v
ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-darwin17]

Ruby on Railsのインストール

Desktopに開発用ディレクトリを作る前提で進めます。

※本当はホームディレクトリ直下にDevelopmentフォルダを作ったりすると良い。

 $ rbenv exec gem install bundler
 $ cd ~/Desktop
 $ mkdir rails
 $ cd rails
 $ bundle init

Desktopにあるrailsフォルダを開く -> Gemfileを開く -> # railsの"#"を外して保存して ください。

$ bundle install --path vendor/bundle

Ruby on Railsのプロジェクト作成

$ bundle exec rails new xxxxxxx(プロジェクト名を入れる) --skip-bundle -d mysql
$ bundle install --path vendor/bundle
$ bundle exec rake db:create
$ bundle exec rails s

Hello World!!!

この状態でhttp://localhost:3000にアクセスするとRailsの初期画面が現れるはず。

ridgepole task

Railsなどでridgepoleを採用した時に使うridgepole用のtaskです。以下をridgepole.rakeとして保存すれば使えます。

namespace :ridgepole do
    desc 'Apply database schema'
    task apply: :environment do
        ridgepole('--apply', "--file #{schema_file}")
        Rake::Task['db:schema:dump'].invoke
    end

    desc 'Export database schema'
    task export: :environment do
        ridgepole('--export', "--output #{schema_file}")
    end

    private

    def schema_file
        Rails.root.join('config/ridgepole/Schemafile')
    end

    def config_file
        Rails.root.join('config/database.yml')
    end

    def ridgepole(*options)
        command = ['bundle exec ridgepole', "--config #{config_file}"]
        system [command + options].join(' ')
    end
end