はじめに

HTMLやCSSを使ってでホームページを作成し、さくらのVPSやAWSなどのサーバー上に配置し、ApacheやNginxを使ってWebサーバーを構築し、ホームページを公開している！といった人を対象に書いていきます。

既に持っているスキルの想定

HTML, CSS, JavaScriptでホームページを作れる
Linuxでサーバーの操作ができる
Webサーバーを構築して、ホームページを公開できる
ドメインを取得して、 DNSレコードと紐付けできる

Web系の初心者がちょうど一通りの勉強を終えたレベルではないでしょうか。
そんな方がもう一歩上に進むためのステップがHTTPS通信です。

HTTPとHTTPSの違いについては、以前書いた記事の「【カフェで作業する人の情報は丸見えかも】HTTPとHTTPSの違いを知らない危険性」をご覧下さい。

開発環境

ローカル：macOS Sierra (10.12)
リモート：さくらVPS (CentOS 6.7)
リモートにHTTPでアクセスできるウェブサイトを公開済み

SSL証明書購入の前準備

まずSSL証明書を購入といきたいところですが、この前にサーバー側で準備をしておく必要があります。
この準備をしておかないと、手戻りが発生したりするので。

事前に準備する物は CSR（Certificate Signing Request）です。
日本語では、署名要求と呼ばれます。

必要なモジュールのインストール

リモートのサーバーにssh経由でログインし、署名作成に必要なモジュールをインストールします。

$ sudo yum install mod_ssl
$ sudo yum install openssl

秘密鍵の作成

CSR作成には、まず秘密鍵が必要となります。
秘密鍵を管理しやすいように、ディレクトリを作成します。
※ /etc/httpd/conf はApacheの構成ファイルを格納している場所です。

秘密鍵用のディレクトリ作成

$ cd /etc/httpd/conf
$ mkdir ssl.key
$ cd ssl.key

このディレクトリ内に秘密鍵を作成します。

秘密鍵の作成

$ openssl genrsa -des3 -out server.key 2048
Generating RSA private key, 2048 bit long modulus
.........................................................................+++
...................................+++
e is 65537 (0x10001)
Enter pass phrase for server.key:
Verifying - Enter pass phrase for server.key:

入力するパスワードはセキュリティ上ランダムで長いものにしておきましょう。

秘密鍵が作成されたことの確認

$ ls
server.key

CSR作成

CSR用のディレクトリを作成（移動はしない）

$ cd /etc/httpd/conf
$ mkdir ssl.csr

CSR作成

$ openssl req -new -key ssl.key/server.key -out ssl.csr/server.csr
Enter pass phrase for ssl.key/server.key: #{秘密鍵で設定したパスワード入力}
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [XX]:JP #{日本在住ならJP}
State or Province Name (full name) []:Tokyo #{都道府県}
Locality Name (eg, city) [Default City]:Shinagawa-ku #{市町村区}
Organization Name (eg, company) [Default Company Ltd]:Carat #{組織名}
Organizational Unit Name (eg, section) []: #{部署名（特になければ空白でOK）}
Common Name (eg, your name or your server hostname) []:www.caratinc.jp #{【重要】取得しているドメイン名}
Email Address []:yourmail@example.com #{メールアドレス}

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []: #{必要に応じて入力（特になければ空白でOK）}
An optional company name []: #{必要に応じて入力（特になければ空白でOK）}

これでCSR作成が完了です。

作成されたCSRを確認

$ ls ssl.csr/
server.csr
$ cat ssl.csr/server.csr 
-----BEGIN CERTIFICATE REQUEST-----
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
-----END CERTIFICATE REQUEST-----

上記の用に、-----BEGIN CERTIFICATE REQUEST----- から -----END CERTIFICATE REQUEST----- までがこれからの申込みに必要なため、コピーしておくと便利です。

SSL証明書の購入

SSL証明書にもいくつか種類があるのですが、今回はドメイン認証型のラピッドSSLを購入します。
ラピッドSSLは1,500円で購入でき、まずHTTPS通信を導入したいといった方にオススメです。

さくらのVPSを使用している方であれば、こちらのさくらインターネットのウェブサイトから購入できます。

こちらのオンライン申込みから進んでいきます。

さくら会員IDはさくらのVPSをもっていれば、既にあるため、ログインを行います。

ログイン後は、プラン選択画面から購入する証明書を選択肢、支払いに必要な情報を入力します。

支払い情報の入力後、CRSの入力画面に遷移します。
ここで、最初に作成したCSRの情報を貼り付けます。

貼り付けて中央の矢印を推すと、秘密鍵の内容が表示され、登録した情報として正しければ、確認画面へ進みます。
最後に確認画面が有り、申込み内容が正しければ、申込みを行い完了です。
この時点で申込み内容確認のメールが来ていれば正常に処理されています。

サーバー側の認証

SSL証明書の申込みが完了すると、すぐに使えるわけではなく、サーバーが存在するか（厳密にはドメインが存在するか）といった確認が入ります。

認証ファイルのダウンロード

まずさくらインターネットの会員ページにアクセスします
。

このタブ上部の「契約情報」にアクセスします。

つぎは「契約サービスの確認」へアクセスします。

契約サービスの最下部に設定したSSL証明書があると思います。
※ 既にひとつ利用中のものがありますが、今回購入したものは下の「準備中」となっている部分です。

この「サーバー証明書」をクリックします。

ここで認証ファイルがダウンロードできるため、ファイルを手元にダウンロードします。
認証ファイルは「igaubiogra.htm」のようなランダムな名前で与えられます。

認証ファイルをサーバーに配置

つぎに、ダウンロードしたファイルをサーバー上に配置します。
scp のコマンドを使用して、ファイル毎送信しても良いですが、vimで同じ内容のファイルを作ってしまいましょう。

ここからはサーバー上での作業になります。
まず、Apacheがアクセスするドメインのルートディレクトリへ移動します。

認証ファイルの配置

$ cd /var/www/html/ #例えばここが指定のディレクトリとする
$ touch igaubiogra.htm
$ vim igaubiogra.htm # ローカルのファイルの中身をコピペ

これでOKです。
一応、アクセスしてみて、ファイルが配置されているか確認しておきましょう。

これでブラウザ上に、ファイルの中身が表示されれば配置に成功しています。
あとは、さくらインターネット側がこの認証ファイルが配置されていることを自動的に徘徊して確認していますので、3分ほど待ちます。

上記の画面のように、利用中になれば認証ファイルが認証されたことになります。
「サーバー証明書」から「サーバー証明書DL」をクリックし、サーバー証明書をローカルへダウンロードしましょう。
server.crt というファイルがダウンロード出来るはずです。

あと、先ほどの認証ファイル igaubiogra.htm は必要無いため、サーバー上から削除しておきましょう。

認証ファイルの削除

$ rm igaubiogra.htm
rm: remove 通常ファイル `igaubiogra.htm'? yes

サーバー証明書の配置

認証ファイルと同様に、ローカルにダウンロードした server.crt をリモートにコピーしていきましょう。

サーバー証明書の配置

$ /etc/httpd/conf
$ mkdir ssl.crt  # サーバー証明書用のディレクトリも作成
$ cd ssl.crt/
$ touch server.crt
$ vim server.crt

server.crt

また、サーバー証明書以外にも中間証明書というものが必要であり、たとえばラピッドSSLの場合は、認証局からメールがくるのですが、こちらから中間証明書を取得でき、同様にサーバー上にファイルを作成します。

中間証明書の配置

$ touch internal.crt
$ vim internal.crt

internal.crt

これで証明書の配置は完了です。

Apacheに反映

ひとつのサーバー上で複数のアプリケーションを動作させており、Apacheでは /etc/httpd/conf.d に vhost.conf というファイルを作成します。

/etc/httpd/conf.d/vhost.conf

# setting for ssl
LoadModule ssl_module modules/mod_ssl.so
Listen 443
NameVirtualHost *:443

SSLPassPhraseDialog  builtin
SSLSessionCache         shmcb:/var/cache/mod_ssl/scache(512000)
SSLSessionCacheTimeout  300
SSLMutex default
SSLRandomSeed startup file:/dev/urandom  256
SSLRandomSeed connect builtin
SSLCryptoDevice builtin

# setting for caratinc.jp domain
<VirtualHost *:443>
  SSLEngine on
  SSLProtocol all -SSLv2
  SSLCertificateKeyFile   /etc/httpd/conf/ssl.key/server.key
  SSLCertificateChainFile /etc/httpd/conf/ssl.crt/internal.crt
  SSLCertificateFile      /etc/httpd/conf/ssl.crt/server.crt

  DocumentRoot /var/www/html/
  ServerName example.com:443
  CustomLog /var/www/html/access.log common
  ErrorLog  /var/www/html/error.log
  AddDefaultCharset UTF-8
  <Directory "/var/www/html/">
    AllowOverride All
    Options Indexes FollowSymLinks
  </Directory>
</VirtualHost>

この設定ファイルを保存し、あとはサーバーを再起動すれば、https通信ができます。
サーバー再起動時にパスワードの入力を求められるので、最初に作成した秘密鍵のパスワードを入力して下さい。

サーバーの再起動

$ sudo service httpd restart

参考文献

おまけ

フォローお待ちしています！

Qiita: Carat 吉崎
twitter：@carat_yoshizaki
はてなブログ：Carat COOのブログ
ホームページ：Carat

サービス紹介
「数学→プログラミング→Webアプリケーション」まで一気に学べる機械学習のマンツーマン家庭教師サービス「キカガク」に興味のある方はお気軽にご連絡ください。

さくらVPSにSSL証明書を導入しHTTPS通信の構築

はじめに

開発環境

SSL証明書購入の前準備

必要なモジュールのインストール

秘密鍵の作成

CSR作成

SSL証明書の購入

サーバー側の認証

認証ファイルのダウンロード

認証ファイルをサーバーに配置

サーバー証明書の配置

Apacheに反映

参考文献

おまけ