まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

タグ:http

Node.js + Express の環境で SSL を使う(https でアクセスできるようにする)方法を調べたのでまとめました。


まず SSL を使うための鍵ファイルと証明書ファイルを用意します。公式なドメインを所有していて、本物の鍵/証明書ファイルを持っているのであればそれを使っても構いません。試験的に試すのであれば、いわゆる「オレオレ証明書」を作成します。Linux 環境であれば openssl コマンドを使って、以下のように入力します:
$ openssl genrsa -out server_key.pem 2048
Generating RSA private key, 2048 bit long modulus
...............+++
..........................+++
e is 65537 (0x10001)

$ openssl req -batch -new -key server_key.pem -out server_csr.pem -subj "/C=JP/ST=Chiba/L=Funabashi/O=Jugeme/OU=Dev/CN=juge.me"

$ openssl x509 -in server_csr.pem -out server_crt.pem -req -signkey server_key.pem -days 73000 -sha256
Signature ok
subject=/C=JP/ST=Chiba/L=Funabashi/O=Jugeme/OU=Dev/CN=juge.me
Getting Private key

$

↑この例では juge.me というホスト名で運用する前提での、サーバーの鍵ファイル(server_key.pem)と証明書ファイル(server_crt.pem)を作成しています。

この2つのファイルと同じディレクトリに app.js というファイル名で、Node.js のソースコードを以下の内容で作成しました。アプリケーションそのものはドキュメントルート(/)にアクセスがあった場合に「ハローワールド」と表示するだけの単純なものです:
//. app.js

var express = require( 'express' ),
    http = require( 'http' ),
    https = require( 'https' ),
    cfenv = require( 'cfenv' ),
    fs = require( 'fs' ),
    app = express();
var appEnv = cfenv.getAppEnv();

//. 鍵ファイルと証明書ファイル var options = { key: fs.readFileSync( './server_key.pem' ), cert: fs.readFileSync( './server_crt.pem' ) };
//. 鍵ファイルと証明書ファイルを指定して、https で待受け var server = https.createServer( options, app ).listen( appEnv.port, function(){ console.log( "server stating on " + appEnv.port + " ..." ); });
//. ドキュメントルートにリクエストがあった場合の処理 app.get( '/', function( req, res ){ res.write( 'ハローワールド' ); res.end(); });

このコードを実行すると待受ポート番号が動的に決定して表示されます(↓の例だと 6015 番ポートで https が待ち受けていることが分かります):
$ node app.js
server stating on 6015 ...

ではウェブブラウザで実際にアクセスしてみます。本当に使っている本物のドメイン/ホスト名であればそのままアクセスできると思いますが、試験的に実行している場合はこのホストに "juge.me" という名前でアクセスできる必要があります。必要に応じて hosts ファイルを編集するなどして、目的のホスト(node app.js を実行したホスト)に "juge.me" というホスト名でアクセスできるような準備をしておいてください。

そしてウェブブラウザで "https://juge.me:(ポート番号)" にアクセスします:
2017041301


オレオレ証明書名物「安全な接続ではない」という警告画面になると思います。ここからの手順はウェブブラウザの種類にもよりますが、FireFox の場合であれば「エラー内容」ボタンをクリックしてから「例外を追加」をクリックして、このサイトの警告を無視するための設定を行います。

そして「セキュリティ例外の追加」ダイアログにて、この URL の「セキュリティ例外を承認」します:
2017041302


すると警告が消えて、プログラムで用意したコードが実行され、「ハローワールド」というメッセージが表示されることが確認できます:
2017041303


IBM Bluemix のような PaaS 環境だと、このあたりも含めてアプリケーションサーバー環境が用意されるので楽ですが、素で Node.js 環境を構築する場合はアプリケーション側でも https 対応を実装する必要があり、意外と面倒ね。

Apache HTTP サーバーのリダイレクト機能を使って、ウェブアプリケーションに○ニータイマー的な機能を実装してみました。

※最近は「○ニータイマー」と言われても知らないエンジニアも増えてるんだろうなあ。。
(注 ○ニータイマーとは? 参考 - Wikipedia



【やりたいこと】
普通に動いているアプリケーションに対して、ある日時以降は自動的にエラーページへ転送する


【作るもの】
既存のウェブアプリケーション(/xonytimer/ 以下)に対して、以下のようなファイル構成を追加します:
|- xonytimer/ (目的のアプリケーション)
|   |- index.html
|   |-    :
|
|- error.html (エラーページ)
|- .htaccess (リダイレクト設定用)

/xonytimer/ 以下に目的のウェブアプリケーションが展開されているものとします(現在普通に動いているものとします)。で、ある特定の日時以降になったら /xonytimer/ 以下へのアクセスは全て /error.html に転送するよう .htaccess に設定します。

error.html の内容は適当にこんな感じにしました:
<html>
<head>
<title>Error</title>
</head>
<body>
<h1>○ニータイマー発動。。。</h1>
</body>
</html>

肝心の転送設定は以下のような内容にします。これを .htaccess に追加(または新規作成)します:
RewriteEngine On

RewriteCond %{TIME} >20170403033000
RewriteRule ^xonytimer/(.*) /error.html [R=302,L]
 ↑注 RewriteCond の ">" と "20170403033000" との間にスペースを入れてはいけません

↑の場合、システム時間が 2017年04月03日 03時30分01秒以降となる時間以降に /xonytimer/ 以下にアクセスがあった場合は /error.html に転送する、という内容にしています。日時はあくまでサーバー側のシステム時間なので、日本時間なのかそうでないのかはシステムに依存します。設定されているタイムゾーンに併せて指定する必要がある点に注意してください。

この設定であれば 2017/04/03 03:30:00 までに /xonytimer/ 以下にアクセスした場合は普通に使えます:
2017040301


が、上記時刻以降に /xonytimer/ 以下にアクセスすると転送設定が有効になり、/error.html に強制転送されます(/xonytimer/ 以下へはアクセスできなくなります):
2017040302


簡単なリライトルールだけで設定できました。


【こんなもん何に使うのか?】

実際に使うのは、この逆のケースが多いと思っています。例えば .htaccess に記述する内容を以下のようにします:
RewriteEngine On

RewriteCond %{TIME} <20170410000000
RewriteRule ^newapplication/(.*) /underconstruction.html [R=302,L]
  ↑RewriteCond の不等号が逆向きになっている点に注意


この指定であれば、2017/04/10 00:00:00 までの間に /newapplication/ 以下にアクセスがあった場合、そのリクエストは /underconstruction.html (準備中、みたいなページを想定)に転送され、2017/04/10 00:00:00 を過ぎると /newapplication/ 以下はアクセス可能になります。

新しいアプリケーションや(申し込みサイトなど)期日を決めた一時アプリケーションを運用する場合に、URL だけは事前にお知らせてしておくとして、実際の運用は指定期日になったらアクセスを許すがそれまでは URL を知っていてもアクセスさせない、という場合に便利な転送設定となります。


前回(「WAS Liberty Core を 80/443 番ポートで動かす」)の続きです。

今回は軽量版ではなく、いわゆる「フルプロファイル版」などと呼ばれている、従来の WAS(Websphere Application Server)を対象に起動ポート番号を変更する手順を紹介します。また今回も具体的には IBM Bluemix 内の WAS on Bluemix サービスの BASE プランインスタンスを使って紹介します。


では実際に起動ポートを変更します。ウェブブラウザで https://(ホスト名):9433/ibm/console/ にアクセスして管理コンソールを開き、正しいユーザー名とパスワードを入力してログインします:
2017031601


WAS の管理コンソールにアクセスしました:
2017031602


WAS の場合、起動ポート番号はアプリケーションサーバー内の Web コンテナのトランスポートチェーンで管理しています。というわけで、まずは左ペインから サーバー - サーバータイプ - WebSphere Application Server を選択し、アプリケーションサーバーとして起動ポートを変更したいサーバーの名称(デフォルトでは server1)を選択します:
2017031603


選択したアプリケーションサーバー内から Web コンテナー設定 - Web コンテナー・トランスポート・チェーン を選択します:
2017031604


現在設定されている Web トランスポートチェーンの一覧が表示されます。この中に 80 番(http)と 443 番(https)を追加します。まずは 80 番ポートを追加するために「新規作成」ボタンをクリックします:
2017031604


作成するトランスポートチェーンの名称(下図では WCInboundDefault80)を入力し、テンプレートに WebContainer が選択されていることを確認して「次へ」をクリックします:
2017031605


利用するポート番号をここで指定します。「新規ポートの作成」が選択されていることを確認して、ポート名は "80"、ホストは "*" 、ポートは "80" をそれぞれ入力して「次へ」:
2017031606


確認の画面で「終了」を選択します:
2017031607


トランスポートチェーン一覧の画面に戻るので、今回の変更をマスター構成として「保存」します:
2017031608


追加したトランスポートチェーンが一覧に含まれていることを確認します:
2017031609


同様にしてもう1つ、443 番ポート(https)のトランスポートチェーンも新規に作成します。その場合、テンプレートには "WebContainer-Secure" を選択することに注意してください:
2017031601

また、ポート名とポートには "443" を入力します:
2017031602


こうして 80 番ポート(http)と 443 番ポート(https)のトランスポートチェーンが追加されたことを確認します:
2017031603


ここまでの作業ができれば後はサーバーを再起動して、変更を反映するだけです。が、ここも前回紹介した理由により root ユーザー権限でサーバーを起動する必要があります。具体的には ssh 等でログイン後、root ユーザーに su/sudo して、root ユーザー権限でサーバーを止めて、再び起動する、という手順を実行します:

$ sudo /bin/bash

# /opt/IBM/WebSphere/AppServer/bin/stopServer.sh server1

# /opt/IBM/WebSphere/AppServer/bin/startServer.sh server1

# exit

$

これで WAS Liberty Core の時と同様に WAS も 80/443 番ポートで利用できるようになっているはずです。

IBM の Java アプリケーションサーバーである WAS(Websphere Application Server) は標準設定のまま導入して使い始めると、9080 番ポート(http)や 9443 番ポート(https)でサーバーが起動します。これを一般的な 80 番や 443 番で起動させるための設定を紹介します。方法自体はいくつかあるのですが、ここで紹介するのは「とりあえずてっとり早くできる方法」です。 また今回は軽量版である WAS Liberty Core を対象として紹介します(フル機能版は次回)。具体的にはパブリッククラウドであるIBM Bluemix 内の WAS on Bluemix サービスの Liberty Core インスタンスを使って紹介します:


では実際に起動ポートを変更します。WAS Liberty Core の場合はアプリケーションサーバーの server.xml を編集することで変更できるので、まずはこのファイルを探します。

既にアプリケーションサーバーが起動している場合はウェブブラウザからも変更できます。 https://(ホスト名):9080/ にアクセスして、"Open Admin Console" をクリックします:
2017031601


認証が有効に設定されている場合は認証画面になります。正しいユーザー名とパスワードを入力して「送信」します:
2017031602


管理コンソールにアクセスできました。server.xml を編集するには "Server Config" を選択します:
2017031601


構成ファイルとして server.xml が表示されている(これしか表示されてない??)ので、server.xml をクリック:
2017031602


すると server.xml の編集画面に移動します。「ソース」タブで表示すると、XML テキストを直接編集することも可能です:
2017031603


なお、SSH 等でアプリケーションサーバーシステムに直接ログインできる場合であれば、server.xml は以下に存在しているので、このファイルを直接テキストエディタで編集しても構いません:
/opt/IBM/WebSphere/Profiles/Liberty/servers/server1/server.xml


以下の赤字部分4箇所を変更します。変更が完了したら保存(管理コンソールであれば右上のボタン)します:
<server description="Default Hypervisor Server">
  <!-- Simple application server, supporting servlets and jsps -->
  <featureManager>
    <feature>jsp-2.2</feature>
    <feature>adminCenter-1.0</feature>
  </featureManager>
<remoteFileAccess>
<writeDir>${server.config.dir}</writeDir>
</remoteFileAccess>
<virtualHost id="default_host" allowFromEndpointRef="defaultHttpEndpoint">
 <hostAlias>*:80</hostAlias>
 <hostAlias>*:443</hostAlias>
</virtualHost>
<!-- virtualHost id="external_host">
 <hostAlias>*:80</hostAlias>
 <hostAlias>*:443</hostAlias>
</virtualHost -->

  <quickStartSecurity userName="wsadmin" userPassword="{xor}am07ZzlubWg=" />
  <keyStore id="defaultKeyStore" password="{xor}am07ZzlubWg=" />
  <!-- disable automatic configuration and application updates, but leave mbean support enabled -->
  <config updateTrigger="mbean"/>
  <applicationMonitor updateTrigger="mbean" dropinsEnabled="true"/>
  <ssl id="defaultSSLConfig"
     sslProtocol="SSL_TLSv2"
     keyStoreRef="defaultKeyStore"
     clientAuthenticationSupported="true"/>

  <!-- open port 9080 for incoming http connections -->
  <httpEndpoint id="defaultHttpEndpoint"
                host="*"
                httpPort="80"
                httpsPort="443">
      <tcpOptions soReuseAddr="true"/>
  </httpEndpoint>
  <!-- httpEndpoint id="publicHttpEndpoint"
              host="*"
              httpPort="80"
              httpsPort="443">
      <tcpOptions soReuseAddr="true"/>
  </httpEndpoint -->
</server>


設定の変更そのものはこれだけです。後はアプリケーションサーバーを再起動・・・なのですが、OS が Linux の場合はもう1点注意が必要です。

Linux の場合、1024 番未満のポートはデフォルトでは root 権限がないと listen できません
。つまり上記の設定変更をしても再起動の際に root 以外のユーザー権限で再起動するとポートを listen できないのです。

特に IBM Bluemix 環境での場合、OS は RedHat で、その一般ユーザーである virtuser の権限で WAS は起動します。つまり上記の制約をまともに受けてしまうのでした。というわけで、WAS 再起動の際には注意が必要です。具体的にはまず root ユーザーに su(または sudo)し、root ユーザー権限でサーバーを止めて、再び起動、という手順が必要です:
$ sudo /bin/bash

# /opt/IBM/WebSphere/Liberty/bin/server stop server1

# /opt/IBM/WebSphere/Liberty/bin/server start server1

# exit

$


これで WAS Liberty Core が 80/443 番ポートで利用できるようになっているはずです:
2017031603


 

Java で(Web)アプリケーションから REST API を実行する時など、HTTP のクライアント機能を java.net.* から作るのは面倒です。現実的にはなんらかのライブラリを使うことになると思います。

そんな場合によく使われるのが Apache HTTP Client だと思ってます。2017/Mar/16 現在の最新バージョンは 4.5.3 でした。モジュールはこちらからダウンロードできます:
https://hc.apache.org/downloads.cgi

2017031501


上記サイトの HttpClient カテゴリから 4.5.3.zip と書かれたリンクをクリックすると 4.5.3 のバイナリが zip アーカイブとして取得できます(ファイル名は httpcomponents-client-4.5.3-bin.zip)。ダウンロードした zip ファイルを展開し、lib フォルダから jar ファイル群を取り出します(今回のサンプルで最低限必要なのは以下の6ファイルです):
  • commons-codec-1.4.jar
  • commons-logging-1.2.jar
  • httpclient-4.5.3.jar
  • httpclient-cache-4.5.3.jar
  • httpcore-4.4.6.jar
  • httpmime-4.5.3.jar

Eclipse 等で Java のウェブアプリケーションプロジェクトを作成し、lib フォルダ(Webcontent/WEB-INF/lib など)に上記作業で取り出した jar ファイル群をまとめてコピーしておきます。これで準備完了:
2017031502


では実際にこれらのモジュールを使って HTTP アクセスを実現するプログラムを書いて実行してみます。今回はスタンドアロンに HTTP GET を実行する、こんなプログラムにしてみます:
import org.apache.http.HttpEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;

public class HttpClient1 {
  public static void main(String[] args) {
    // TODO Auto-generated method stub
    String url = "https://www.ibm.com/developerworks/jp/"; //. HTTP GET する URL

    try{
      CloseableHttpClient client = HttpClients.createDefault();
      HttpGet get = new HttpGet( url );
      CloseableHttpResponse response = client.execute( get );
      int sc = response.getStatusLine().getStatusCode(); //. 200 の想定
      HttpEntity entity = response.getEntity();
      String html = EntityUtils.toString( entity, "UTF-8" );
      System.out.println( html ); //. 取得結果をコンソールへ
      client.close();
    }catch( Exception e ){
      e.printStackTrace();
    }
  }
}

指定した URL(上記の場合は https://www.ibm.com/developerworks/jp/")に HTTP でアクセスして、GET した結果をコンソールに出力する、というものです。この内容を記述したファイル(HttpClient1.java)を Eclipse から実行します:
2017031503


で、指定した URL  の HTML が取得できることを確認します。HTTP GET は呼び出すだけなのでシンプルですね:
2017031504


アクセス先として HTML のようなテキストではなく、画像のようなバイナリデータの場合は以下のように byte 配列として結果を取得します(HTTP リクエストヘッダを設定する例も加えています):
import org.apache.http.HttpEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;

public class HttpClient2 {
  public static void main(String[] args) {
    // TODO Auto-generated method stub
    String url = "https://dw1.s81c.com/developerworks/i/f-ii-ibmbluemix.png"; //. HTTP GET する URL

    try{
      CloseableHttpClient client = HttpClients.createDefault();
      HttpGet get = new HttpGet( url );
      get.addHeader( "User-Agent", "MyBot/1.0" );  //. HTTP リクエストヘッダの設定
      CloseableHttpResponse response = client.execute( get );
      int sc = response.getStatusLine().getStatusCode(); //. 200 の想定
      HttpEntity entity = response.getEntity();
      byte[] img = EntityUtils.toByteArray( entity );
      System.out.println( "" + img.length ); //. 取得結果をコンソールへ
      client.close();
    }catch( Exception e ){
      e.printStackTrace();
    }
  }
}

一方、HTTP POST の場合も同様ですが、GET の時との違いとしてポストデータを送信する必要もあります。以下はテキスト情報とファイルのアップロードを同時に(Multipart で)送信する場合の例です:
import java.io.File;
import java.io.FileInputStream;

import org.apache.http.HttpEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.entity.ContentType;
import org.apache.http.entity.mime.MultipartEntityBuilder;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;

public class HttpClient3 {
  public static void main(String[] args) {
    // TODO Auto-generated method stub
    String url = "https://xxx.com/posturl"; //. HTTP POST する URL

    try{
      CloseableHttpClient client = HttpClients.createDefault();
      HttpPost post = new HttpPost( url );

//. 文字情報2つとファイル1つをポスト MultipartEntityBuilder builder = MultipartEntityBuilder.create(); builder.addTextBody( "name", "K.Kimura", ContentType.TEXT_PLAIN ); builder.addTextBody( "email", "dotnsf@jp.ibm.com", ContentType.TEXT_PLAIN ); File f = new File( "./logo.png" ); builder.addBinaryBody( "image_file", new FileInputStream( f ), ContentType.APPLICATION_OCTET_STREAM, f.getName() ); HttpEntity multipart = builder.build(); post.setEntity( multipart ); CloseableHttpResponse response = client.execute( post ); int sc = response.getStatusLine().getStatusCode(); //. 200 の想定 HttpEntity entity = response.getEntity(); String html = EntityUtils.toString( entity, "UTF-8" ); System.out.println( html ); //. 取得結果をコンソールへ client.close(); }catch( Exception e ){ e.printStackTrace(); } } }

PUT や DELETE の場合も同様に。

このページのトップヘ