LoginSignup
2
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2018-01-08

はじめに

(本記録は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編)

ibmcloud CLI のインストール

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

ibmcloud CLIの初期設定

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


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

ibmcloud version 0.20.0+5d69177-2019-10-31T07:15:05+00:00

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

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

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

C:¥myWeb> _

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

[bluemix]コマンドは、[bx]と省略することも出来るようです。つまり[bluemix login -u ]は、[bx login -u ]でも同じ機能を実行してくれます。2019/11月時点でもまだ使えるようです。
[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コマンドプロンプトで、[ibmcloud cf push]を実行して、WEBコンテンツをアップロードしてみる。もしも画面に"FAILED" "Not logged in"と表示される場合は、[ibmcloud login -u]から実行します。

▼この部分です。
image.png


C:¥myWeb>ibmcloud 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サイトには使えなかったですね。cronとかで自動デプロイしちゃえばいいのかな。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2