【Ruby on Rails】Nginxとunicornを使ってHTTPS(SSL)対応する方法

【Ruby on Rails】Nginxとunicornを使ってHTTPS(SSL)対応する方法

こんにちは、nishi_talk(@nishi_talk)です。
今回はさくらVPSでRailsアプリをHTTPS対応(SSL化)する方法をご紹介します。

Railsアプリではログイン認証を使ったアプリを作った場合、通信を暗号化させてるためにHTTPS対応をおこないます。
SSL化に必要な証明書を無料で発行してくれる「Let’s encrypt」を使います。
「Let’s encrypt」がこちらの記事で詳しく解説されていますので、参考にしてみてください。
※SSL化をするにはドメインを設定する必要があります。先に取得しておくことをオススメします!

Let’s EncryptのSSL証明書で、安全なウェブサイトを公開 | さくらのナレッジ

実装した環境は以下になります。

  • CentOS7
  • Rails 5.1.4
  • Nginx 1.12.2
  • Unicorn 5.4.0



RailsアプリとNginx、Unicornの設定が完了している状態でSSL化します。
ここらへんの設定は方法はこちらの記事を参考にしてください。
【さくらVPS】CentOS7で、Nginxを設定する方法
【Ruby on Rails】unicornをNginx環境下で動かす時の設定方法

Gitをインストール

Let’s encrypt を使用する時、Gitを使用するのでインスールします。

# yum install git

# git --version
git version 1.8.3.1

「git –version」でgitのバージョンが表示されれば、インストール完了です。

Let’s encryptでHTTPS対応

Let’s encrypt をインストールします。
Let’s Encrypt のクライアントcertbotをインストールして、
ディレクトリcertbotに移動します。

# cd /usr/local/
# sudo git clone https://github.com/certbot/certbot
・
・
・
# cd certbot/

証明書を発行する

証明書を発行します。

今回は例としてドメイン名をhogehoge.comで設定するとして以下のコマンドを実行します。
以下オプションはご自身の設定する内容に書き換えてください。

-wにはドキュメントルートのパス
-mには登録するメールアドレス
-dには認証するドメイン名

# cd /usr/local/
# certbot-auto certonly --webroot --agree-tos -w /var/www/html -m hogehoge@mail.com -d hogehoge.com
もしくは、
# certbot-auto certonly --webroot --agree-tos -w /var/www/html/public -m hogehoge@mail.com -d hogehoge.com

質問をされたら「yes」を押して進めていきます。

証明書を確認する

証明書が発行されたか確認するには以下のコマンドを実行します。

# sudo ls -lrth /etc/letsencrypt/live/hogehoge.com/
lrwxrwxrwx 1 root root  43 Jan 28 19:21 fullchain.pem -> ../../archive/hogehoge.com/fullchain1.pem
lrwxrwxrwx 1 root root  39 Jan 28 19:21 chain.pem -> ../../archive/hogehoge.com/chain1.pem
lrwxrwxrwx 1 root root  38 Jan 28 19:21 cert.pem -> ../../archive/hogehoge.com/cert1.pem
-rw-r--r-- 1 root root 543 Jan 28 19:21 README

上記内容が表示されれば証明書の発行はOKです。

Nginx+UnicornのHTTPS対応

Nginxの初期設定からHTTPへのアクセスをHTTPSにリダイレクト設定をおこないます。
合わせて、Unicornが動作する設定も合わせて設定します。

# vim /etc/nginx/conf.d/default.conf/hogehoge.conf
upstream unicorn {
    server  unix:/var/www/hogehoge.com/tmp/unicorn.sock;
}

server {
    listen       80;
    server_name hogehoge.com;
    return      301 https://$host$request_uri;
}

server {
    listen      443 ssl;
    server_name hogehoge.com;
    ssl_certificate /etc/letsencrypt/live/hogehoge.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/hogehoge.com/privkey.pem;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

    access_log  /var/log/nginx/ssl-access.log  main;
    error_log   /var/log/nginx/ssl-error.log;
    root /var/www/hogehoge.com/public;
    include /etc/nginx/mime.types;

    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;

    location @unicorn {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_pass http://unicorn;
    }
}

設定が完了したら、Nginxを再起動します。



RailsアプリのHTTPS対応

いままでの設定で、Webサーバー側のHTTPS対応は完了ですが、Railsアプリ側でもHTTPS対応する必要があります。
本番環境の設定は「production.rb」開発環境の場合は「development.rb」を編集します。

#vim /var/www/hogehoge.com/config/environments/production.rb

47行目辺りにあるconfig.force_sslのコメントアウトを外します。

# Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
# config.force_ssl = true
↓
config.force_ssl = true

今度はRailsアプリを再起動すればHTTPS対応は完了です。

参考サイト:
ネコでもわかる!さくらのVPS講座 ~第六回「無料SSL証明書 Let’s Encryptを導入しよう」 | さくらのナレッジ
さくらVPS(CentOS7)で、Nginx+PHP7.1+MariaDBのWordPressを構築(HTTPS対応) – Qiita

未経験からでもエンジニアにはなれる!

中堅の年代になり、最近よくどうやってエンジニアになったんですか?と聞かれる機会が多くなりました。私は転職組で未経験からエンジニアになりました。 そこら辺のストーリーは「未経験からWebデザイナーになった経緯を紹介」で書いているのでそちらをご覧ください。

当時はWebの技術を教えてくれるスクールがあまりなく、私はWebの勉強は独学で勉強し転職したのですが、今はスクールの数も多くなっていてオンラインで受講できるところも増えてきました。

もし私が未経験でエンジニアを目指すなら活用したいスクールを紹介してますので興味ある方はぜひ参考にしてくだいさい!

tech boostオンライン

tech boostはエンジニアに特化したキャリアサービスを展開しているBranding Engineerが運営するオンラインプログラミングスクールです。

エンジニアに特化したキャリアサービスを展開しているからこそのカリキュラムを実現しています。 また、転職サポート付きでスクール卒業後もキャリアも安心です。

オンラインスクールだからいつでもどこでも受講可能!これからプログラミングを学びたい方、エンジニアにキャリアチェンジを考えている方に、 特にオススメのサービスです。

初めてプログラミングを学ぶなら「tech boostオンライン」

CodeCamp(コードキャンプ)

オンライン・マンツーマン指導のプログラミングスクールとしてNo.1*の実績を持つサービスです。高い学習効果が評価されテレビや新聞、ビジネス誌など*多くのメディアで紹介されています。

講師は全て現役のエンジニア。未経験から確実に習得するために開発されたオリジナルカリキュラムでWebデザイン、Webサービス開発、アプリ開発などを幅広く学習することができます。

多くの受講生が、現役エンジニアの手厚いマンツーマン指導によって確実にプログラミングを習得し、キャリアアップ・転職・独立起業などの目標を実現しています。

プログラミングのオンラインスクールのCodeCamp

DMM WEBCAMP

転職を本気で考えている方向けのプログラミングスクールです。転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです!

プログラミング未経験者でも安心のサポート体制をご用意しており、特に受講者アンケートでは『サポート体制がしっかりしていて魅力的』、『転職を保証していただいていることで安心』というレビーが多くしっかとしたサポートを提供しています。

実務に近い実践的なカリキュラムで、DMM WEBCAMPはチーム開発など、実務により近い実践的カリキュラムを導入しているため、転職先・就職後にいち早く活躍できるスキル・経験を積むことができます。

受講者満足度90%以上のプログラミングスクール【DMM WEBCAMP】

Udemy

私の周りの現役のエンジニアの人も活用しています。基礎をしっかり固めたい方や、実践向けの配信など幅広く解説している動画が豊富にアップされているので活用するのはオススメです。

習得したいスキル(プログラム言語)が明確で、年収アップのために学習している方やAI・機械学習を学んでスキルアップを目指しているエンジニアの方に支持されているます。

1講座あたり数千~数万円程度で実践的なスキルアップを経済的でオススメです。

【Web開発初心者向け!】Web開発入門完全攻略 充実の18時間コース