以前より試してみたかった仮想サーバーを使ったサイトの公開を試してみました。ついでなので、ssl認証をしたhttpsアドレスで公開してみることにします。

DigitalOcean

仮想サーバーを初めて利用する際に不安なのは、利用量に応じた課金がいくらになるか分からない事ではないでしょうか。

そこで、月額料金プランのあるサービス「DigitalOcean」を利用してみることにしました。

DigitalOcean

Easily deploy an SSD cloud server on DigitalOcean in 55 seconds.

デジタルオーシャンを使えばSSDクラウドサーバーがたったの55秒で使えるようになるよ。

こんなうたい文句の通り、アカウントを作成したのち、OSイメージ・料金プラン・データセンターの地域を選択し、自分のホストネームを決めればあっという間に仮想PC(SSD使用)に接続することが出来ます。

今回は「Ubuntu16.04」「月額$10プラン」「シンガポール地域」を選択しました。

本当にあっという間にログイン出来ます。

Ubuntuのログインについて

ちょっと嵌ったのが、コンソールのログインでした。アカウントのユーザー名・パスワードを入力するのかと思ったのですが、それだと入力出来ません。

Droplet(仮想サーバの単位)を設定した際に登録したアドレスにパスワードが送信されてきます。

ユーザー名は「root」、パスワードは送付されたものを入力すればログイン出来ます。

よりセキュリティを強固にしたい場合はSSH公開鍵を追加してログインすることも可能です。

httpsアドレスでWebサイトを公開する

DigitalOceanを実際に利用してみて、良いなと感じたのはコニュニティが活発なところです。

悩んだ時に調べ物をすると詳しい投稿が数多くされていました。node.jsを利用してhttpsアドレスでWebサイトを公開するチュートリアルはこちらで詳しく解説されています。

How To Set Up a Node.js Application for Production on Ubuntu 16.04

基本こちらに書かれている手順で設定すれば大丈夫です。少し補足します。

node.jsのインストール

バージョン管理をするには n – Interactively Manage Your Node.js Versions を利用するのが一番手軽だと思います。

こちらの手順(Ubuntuに最新のNode.jsを難なくインストールする - Qiita)に沿ってインストールしました。

node.jsのデーモン化

これは上記のチュートリアルで紹介されていたPM2 を使ってみました。プロセスのリストが見やすくて使いやすいですね。

お名前.comのネームサーバー

DigitalOceanで独自ドメインを設定するにはドメインのネームサーバーを変更します。

まずはDigitalOceanの管理画面で「Networking」>「Domains」を選択します。

IPアドレスを設定したのち、ネームサーバーを指定します。

ここでは「お名前.com」で説明します。管理画面「ドメイン設定」> 「ネームサーバーの変更」にてネームサーバー情報を入力します。

しばらくすれば独自ドメインでアクセスできる様になります。

nginxのインストール

node.jsのローカルサーバー(例 http://localhost:3000 )をそのまま独自ドメイン(例 http://pondad.xyz )で公開すると、http://pondad.xyz:3000 とどうにも冴えないことになってしまいます。

しかもポート番号を80に設定するとエラーになってしまいます。(仕様です。初めて知った)

そこでnginxなどを利用してリバースプロキシを設定します。

ローカルサーバーのアドレス:ポートを独自ドメインに紐付けることが出来る様になります。

チュートリアルにある様にnginxのデフォルト設定ファイルを以下の様に記述します。

/etc/nginx/sites-available/default

1
2
3
4
5
6
7
8
9
10
11
12
13
14
server {
listen 80;
server_name pondad.xyz;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

なるほど。これでexpressなどで設置した http://localhost:3000 のサイトが http://pondad.xyz で公開されます。

Lets Encryptの設定

さて、ここからが本番。httpアドレスをhttps化してみます。

ssl認証と言うと、年間かなり高額な費用を支払わなければならない印象があったのですが、近年無償で認証を発行してくれるサービスが出来ています。

代表的なものがLets Encrypt です。モジラなどがサポートしている非営利団体が運営しているみたいですね。2016年4月12日と比較的最近正式サポートが始まりました。

こちらをDigitalOceanで利用する方法も上記のチュートリアルで解説されていました。

GitHubよりLets Encryptのオフィシャルパッケージをクローンしてきます。

1
$ sudo git clone https://github.com/letsencrypt/letsencrypt/opt/letsencrypt

ディレクトリを移動して実行プラグインを起動します。

1
$ cd /opt/letsencrypt
1
$ ./letsencrypt-auto certonly --standalone

指示に従って設定用のアドレスとドメイン(http:// はつけない)を入力すると以下の様に表示されます。

1
2
3
4
5
6
7
8
9
10
11
IMPORTANT NOTES:
- Congratulations! Your certificate and chain have been saved at
/etc/letsencrypt/live/pondad.xyz/fullchain.pem. Your cert will
expire on 2016-11-20. To obtain a new or tweaked version of this
certificate in the future, simply run letsencrypt-auto again. To
non-interactively renew *all* of your certificates, run
"letsencrypt-auto renew"
- If you like Certbot, please consider supporting our work by:
Donating to ISRG / Lets Encrypt: https://letsencrypt.org/donate
Donating to EFF: https://eff.org/donate-le

「コングラチュレイション!」の文字が出れば成功です。ようやく認証が発行されたので、ngixを利用してローカルサーバーをhttpsアドレスと紐付ける設定をします。

/etc/nginx/sites-available/default

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
server {
listen 80;
listen [::]:80 default_server ipv6only=on;
return 301 https://$host$request_uri;
}
server {
listen 443;
server_name pondad.xyz;
ssl on;
ssl_certificate /etc/letsencrypt/live/pondad.xyz/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/pondad.xyz/privkey.pem;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://localhost:3000/;
proxy_ssl_session_reuse off;
proxy_set_header Host $http_host;
proxy_cache_bypass $http_upgrade;
proxy_redirect off;
}
}

これで http://localhost:3000https://pondad.xyz へと紐づけられました。

まとめ

最初はちょっと面倒に感じますが、順を追って設定すればそれほど難しいことはありません。

初めて仮想サーバーを利用される方にも比較的とっつきやすいと思います。気になる方は是非。

$10OFF - DigitalOcean

こちらのプロモリンクからご登録で10$OFFになります。よろしければどうぞ。(リンク元には25$キャッシュバックが入ります)