cloudfoundry
Bluemix
IBM-Cloud
IBMChampion

触って学ぶ『Windowsユーザーが Cloud FoundryアプリでWEBサイトを公開する』


はじめに

(本記録はPaaSのお勉強です)WEBアプリを公開するとき、仮想サーバーを用意してソフトウェアをインストールするよりも、Cloud Foundy とか PaaS とかを使うと凄く便利だという。どんだけ便利なのかは実際に触ってみないと分からないので、アサヒネットのホームページサービスに保存してある自分のWEBコンテンツをIBM Cloud(無償プラン)に持ち込んで実感してみたい。


IBM Cloud に 持ち込むWEBサイト

WEBアプリじゃないけれど、自作アニメーションカーソルを掲載している[Funny Snowman]という看板の静的WEBサイト <http://www.asahi-net.or.jp/~cb9i-kn/> を対象とする。

image.png


ゴール設定

自分PCに保存したWEBコンテンツを、IBM Cloudにアップロードして、下記の条件でWEBサイトを公開する。


  • IBM Cloud(無償のライトプラン)を使う。

  • 静的サイトだが、Object Storageを選ばず、あえてCloud Fundry アプリ を使う。

  • 自分PCは、Windows 10 だ。そしてWindowsコマンドプロンプトを使う。

image.png


事前準備(手順)

IBM Cloud の初期設定」と「自分PCからIBM Cloud に接続する初期設定」の2つ。


IBM Cloud の初期設定


  1. 無償ライトプランをサインアップする。

  2. Cloud Foundryの"組織とスペース"を作成する。

  3. 作成した組織・スペースの中に、Cloud Foundryアプリのリソースを作成する。

  4. 少し待つとCloud Foundryアプリが稼働し、デフォルトのWEBサイトが公開される。


自分PCの初期設定


  1. コマンドラインツールをダウンロード・インストールする(WindowsコマンドプロンプトでBluemix CLIが使えるようになる)。

  2. コマンドプロンプトのBluemix CLIを使って、IBM Cloudに接続できるように初期設定する。

  3. Bluemix CLIでアプリをアップロードして、自分WEBサイトを公開する

図解(上記手順の場所)

image.png


事前準備(IBM Cloud編)

IBM Cloud 管理ポータルの操作は他の記事で記載されているので省略します。Cloud Foundry アプリは、WEBサイトの簡単なスクリプトでよく使う[PHP]を選びました。Cloud Foundry アプリのリソース作成が完了すると、ポータルでインスタンスにSSH接続できるようになります。また、自動的に[Hello World]のページが公開されていますので、"アプリURL…"をクリックしてWEBサイトが公開されていることを確認します。

image.png

image.png

▼Cloud Foundry アプリ のOSは、Ubuntu 14 ですね。

image.png


事前準備(自分PC編)


Bluemix CLI のインストール

Windows 10 のコマンドプロンプトで、Bluemix CLIツールをインストールします。

image.png


Bluemix CLIの初期設定

IBM Cloudのアカウント情報を登録します。Windowsコマンドプロンプト"cmd"を起動します。


C:¥myWeb>bx -v       ←まずBluemixコマンドが正しくインストールされたことを確認する。

bx version 0.14.0+3303164-2019-02-06T06:09:00+00:00

C:¥myWeb>bluemix login -u {ユーザ名} -o {組織名} -s {スペース名}

API エンドポイント: https://api.ng.bluemix.net
Password> ←ここでパスワードを入力します
認証中です...
OK
ターゲットの組織 {ここに自分の組織名が表示されます}
ターゲットのスペース {ここに自分のスペース名が表示されます}

API エンドポイント: https://api.ng.bluemix.net (API バージョン: 2.92.0)
地域: us-south
ユーザー: {自分のユーザ名が表示されます}
アカウント: アカウントがターゲットになっていません。'bluemix target -c ACCOUNT_ID' を使用してください
リソース・グループ: リソース・グループがターゲットになっていません。'bluemix target -g RESOURCE_GROUP' を使用してください
組織: {自分の組織名が表示されます}
スペース: {自分のスペース名が表示されます}

C:¥myWeb> _


(参考)bluemixコマンドの省略形

[bluemix]コマンドは、[bx]と省略することも出来るようです。つまり[bluemix login -u ]は、[bx login -u ]でも同じ機能を実行してくれます。

[bx]だけで実行するとヘルプを表示してくれます。[bx]コマンドだけで色々な操作が出来そうです。


アップロードするWEBコンテンツを用意する

WEBコンテンツ(HTMLや画像ファイル)は、既存のWEBから持ってきたが、次の2つだけは新たに作成した。


  1. manifest.yml

  2. index.php

マニフェストは、IBM Cloud 側でCloud Foundry インスタンスを起動する設定を書く。中身は下記。


manifest.yml

---

applications:
- name: FunnySnowman
random-route: true
memory: 64M

Cloud Foundry アプリが最初に実行するファイル[index.php]の中身は、静的サイト[index.htm]へのリダイレクトとした。


index.php

<?php

header('Location: https://funnysnowman.mybluemix.net/index.htm');
exit;

▼実行直前のファイル構成

image.png


実行してみよう

Windowsコマンドプロンプトで、[bx cf push]を実行して、WEBコンテンツをアップロードしてみる。もしも画面に"FAILED" "Not logged in"と表示される場合は、[bx login -u]から実行します。

▼この部分です。

image.png


C:¥myWeb>bx cf push

'cf push'を起動しています...
Using manifest file C:¥myWeb¥manifest.yml
Uploading FunnySnowman
{中略}
Downloading xxxxxxxxx
Downloading xxxxxxx
Uploading xxxxx
{中略}
state since cpu memory disk details
0 running 2018-01-08 09:40:05 PM 0.0% 22M of 64M 172.3M of 1G

C:¥myWeb> _

"Successfully destoryed container"と表示された行で最初に起動したインスタンスが消えて、"App FunnySnowman was started using xxx"の行で新しいインスタンスが起動したのでしょう。正常にコマンドプロンプトにカーソルが戻ってきたら、コンテンツが書き換わっているはずです。ブラウザでURLにアクセスしてみます。


結果

IBM Cloud の Cloud Foundry アプリで作成したURL <https://funnysnowman.mybluemix.net/> にアクセスして、正しくWEBサイトをアップロード&公開できたことを検査する。

▼おおっ。表示できた。

image.png

▼しかも。ここ。鍵のマークまである。暗号化されたHTTPS通信になっている!

image.png

▼ダウンロードのスピードは?

うーん。国内0.2秒に対しBluemixインスタンスのある米国南部だと2秒かかる。距離がある分だけレスポンスは気になるか。無償&開発用途だから割り切りましょう。

image.png

▼Cloud Foundry アプリ 側のフォルダ構成

image.png


(補足)静的WEBサイトの公開が目的なら

クラウドのストレージ(AWS S3とかObject Storageとか呼ぶサービス)に、HTMLや画像などのファイルを保管するだけで、めちゃめちゃ簡単に静的WEBサイトを公開できます。今回は、Cloud Foundry アプリ の仕組みを勉強することが目的でした。


まとめ

以上が、WEBサイトを公開するとき PaaS を活用するとどれだけ便利かを体感するトライアルでした。次の2つのWEBサイト公開方法で比べると:


  1. 仮想サーバーを用意してWebサイトを構築する

  2. PaaS の Cloud Foundry アプリ を使う

PaaSは、これだけ便利(↓)。


  • 仮想サーバーの初期構築が不要。IPアドレスやネットワーク設定など何もしていない。

  • 記載しなかったけど、アプリケーションの稼働監視(モニタリング)が自動で設定されていた。

  • OSのセットアップが不要。IISやApacheの設定を何もしていない。

  • WEB公開作業が不要。ドメイン名とSSLサーバー証明書の購入をしていない。

最後に:

IBM Cloud ライトプランは無償なだけに、10日間、開発ポータルにアクセスしないとインスタンスが停止してしまうので、恒久的なWEBサイトには使えなかったですね。