Edited at

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

More than 1 year has passed since last update.


はじめに

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

スクリーンショット 2016-11-09 16.30.49.png

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

スクリーンショット 2016-11-09 16.31.39.png

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

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

スクリーンショット 2016-11-09 16.33.00.png

支払い情報の入力後、CRSの入力画面に遷移します。

ここで、最初に作成したCSRの情報を貼り付けます。

スクリーンショット 2016-11-09 17.11.36.png

貼り付けて中央の矢印を推すと、秘密鍵の内容が表示され、登録した情報として正しければ、確認画面へ進みます。

最後に確認画面が有り、申込み内容が正しければ、申込みを行い完了です。

この時点で申込み内容確認のメールが来ていれば正常に処理されています。


サーバー側の認証

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


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

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



スクリーンショット 2016-11-09 17.26.43.png

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

スクリーンショット 2016-11-09 17.27.32.png

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

スクリーンショット 2016-11-09 17.34.37.png

契約サービスの最下部に設定したSSL証明書があると思います。

※ 既にひとつ利用中のものがありますが、今回購入したものは下の「準備中」となっている部分です。

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

スクリーンショット 2016-11-09 17.37.21.png

ここで認証ファイルがダウンロードできるため、ファイルを手元にダウンロードします。

認証ファイルは「igaubiogra.htm」のようなランダムな名前で与えられます。


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

つぎに、ダウンロードしたファイルをサーバー上に配置します。

scp のコマンドを使用して、ファイル毎送信しても良いですが、vimで同じ内容のファイルを作ってしまいましょう。

ここからはサーバー上での作業になります。

まず、Apacheがアクセスするドメインのルートディレクトリへ移動します。


認証ファイルの配置

$ cd /var/www/html/ #例えばここが指定のディレクトリとする

$ touch igaubiogra.htm
$ vim igaubiogra.htm # ローカルのファイルの中身をコピペ

これでOKです。

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

http://example.com/igaubiogra.htm

これでブラウザ上に、ファイルの中身が表示されれば配置に成功しています。

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

スクリーンショット 2016-11-09 17.46.51.png

上記の画面のように、利用中になれば認証ファイルが認証されたことになります。

「サーバー証明書」から「サーバー証明書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

-----BEGIN CERTIFICATE-----

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
-----END CERTIFICATE-----

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


中間証明書の配置

$ touch internal.crt

$ vim internal.crt


internal.crt

-----BEGIN CERTIFICATE-----

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
-----END CERTIFICATE-----

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


Apacheに反映

ひとつのサーバー上で複数のアプリケーションを動作させており、Apacheでは /etc/httpd/conf.dvhost.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



参考文献


おまけ

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

サービス紹介

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