Passion make things more better

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

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

ridgepole task

Ruby on Rails

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

Webpack4を使ってReact.js + Redux + Sassの環境構築

React.js Redux

Webpack4を使って、React.js + Redux + Sassの環境構築を行います。

install yarn

npmではなく、Yarnを使用します。yarn add xxxxと実行することで、package.jsonへの追記とライブラリのインストールを同時にやってくれます。

$ brew install yarn

プロジェクト作成

はじめにプロジェクト用のフォルダを作成し、そこに移動し、以下のコマンドを実行します。

$ yarn init

いくつか対話で聞かれますが、すべてEnterを押して進めてOKです。すると、package.jsonというファイルが出来上がります。

install packages

yarnを使って必要となるパッケージをインストールします。今回はReact.js, Redux, Sass, Webpack周りをインストールします。

以下のコマンドを実行してください。　

yarn add babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 prop-types react react-dom redux react-redux extract-text-webpack-plugin@next node-sass style-loader css-loader sass-loader webpack webpack-dev-server webpack-cli

※2018/03/5時点で、extract-text-webpack-pluginがデフォルトだと3.x系が入ってしまうので、4.x系が入るように@nextというオプションを指定しています。

package.json

以下を追記してください。これでyarn run xxxx(build, watch, start)でコマンドを実行することができます。

"scripts": {
    "build": "./node_modules/.bin/webpack --mode production --optimize-minimize",
    "watch": "./node_modules/.bin/webpack --mode development -w",
    "start": "./node_modules/.bin/webpack-dev-server"
}

webpack.config.js

webpackを動かすための設定ファイルを作成します。以下の内容でwebpack.cconfig.jsを作成してください。今回の出力先はdistというフォルダにします。

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = [
  {
    entry: {
      index: './src/index.js'
    },
    output: {
      path: path.resolve('dist/js'),
      publicPath: '/dist/js',
      filename: '[name].js'
    },
    module: {
      rules: [
        {
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: ['react', 'es2015', 'stage-2']
          }
        }
      ]
    },
    resolve: {
      extensions: ['.js', '.jsx']
    }
  },
  {
    entry: {
      style: "./src/stylesheets/style.scss",
    },
    output: {
      path: path.resolve('dist/css'),
      publicPath: '/dist/css',
      filename: '[name].css'
    },
    module: {
      rules: [
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader']
          })
        }
      ]
    },
    plugins: [
      new ExtractTextPlugin('[name].css'),
    ]
  }
];

Project Folder

React.js + Reduxでアプリケーションを作成する場合には、以下のようなフォルダ構成にします。

src
|_ components
|_ containers
|_ constants
|_ reducers
  |_ auth.js
  |_ counter.js
|_ stylesheets
|_ actions
  |_ auth.js
  |_ counter.js

参考

RailsでRoutesを分割する

Ruby on Rails

config/routes.rb

class ActionDispatch::Routing::Mapper
  def draw(routes_name)
    instance_eval(File.read(Rails.root.join("config/routes/#{routes_name}.rb")))
  end
end

Rails.application.routes.draw do

  root to: 'pages#home'

  draw :common
  draw :admin

end

config/routes/xxx.rb

Rails.application.routes.draw do
  namespace :admin do
    root to: 'pages#home'
  end
end

これでapp/config/routes以下にファイルを配置していけばOK。