Passion make things more better

Ruby on Rails / React.js / Swift / AWS / Docker

RailsでReact.jsを使う時のミニマムの設定

2018年 React.js

RailsでReact.jsを使う時に使用するミニマムの設定を紹介します。

構成

  • Railsのプロジェクト直下にfrontというディレクトリを用意する
  • webpackでコンパイルした際に/assets/javascripts/webpack以下にエントリファイル毎に吐き出されるようにする

ライブラリのインストール

開発環境のみ入れるもの

# webpack
$ npm install -D webpack webpack-cli

# babel
$ npm install -D @babel/core @babel/preset-env @babel/preset-react 

# sass
$ npm install -D node-sass 

# loader
$ npm install -D babel-loader sass-loader css-loader file-loader style-loader url-loader

本番環境で使用するもの

$ npm install react react-dom

webpackの設定

webpack.config.js

const path = require('path');

module.exports = [
  {
    entry: {
      'messageEdit': './src/javascripts/entries/articles/edit.js'
    },
    output: {
      path: path.resolve(__dirname, '../app/assets/javascripts/webpack'),
      filename: "[name].js"
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/react']
            }
          }
        },
        {
          test: /\.(css|scss)$/,
          use: ['style-loader', 'css-loader?modules', 'sass-loader']
        },
        {
          test: /\.(png|jpg|svg)$/,
          loader: 'url-loader'
        }
      ]
    },
    resolve: {
      extensions: ['.js', '.css', '.scss']
    }
  }
]

package.json

以下の内容を追記する。

"scripts": {
    "watch": "webpack -w --mode development",
    "build": "webpack --mode production"
}

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

Ruby on Rails

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.scss、base.scss、partials/_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を作成する

Ruby on Rails

RailsでAPIを作る時の手法として、 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+環境を作る

Nginx

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

Ruby on Rails

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の初期画面が現れるはず。