Help us understand the problem. What is going on with this article?

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

More than 3 years have 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アプリケーション」まで一気に学べる機械学習のマンツーマン家庭教師サービス「キカガク」に興味のある方はお気軽にご連絡ください。

yoshizaki_kkgk
株式会社キカガク代表取締役の吉崎です。 人工知能・機械学習を初心者の方にわかりやすくお伝えするセミナーを定期的に開催しています。 独学で悩んでいる方は、ぜひ覗いてみてください。 https://www.kikagaku.co.jp/services/seminars/
https://www.kikagaku.co.jp
kikagaku
人工知能・機械学習の教育コンサルティング
https://www.kikagaku.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした