触って学ぶ『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](https://qiita-image-store.s3.amazonaws.com/0/189936/ce7be017-cebb-ec34-6764-0e091365de77.png)

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

+ IBM Cloud（**無償のライトプラン**）を使う。
+ 静的サイトだが、Object Storageを選ばず、あえて**Cloud Fundry アプリ** を使う。
+ 自分PCは、Windows 10 だ。そして**Windowsコマンドプロンプト**を使う。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/189936/03f029ad-3e44-88b1-2e58-f32533e03917.png)

# 事前準備（手順）
「**IBM Cloud の初期設定**」と「**自分PCからIBM Cloud に接続する初期設定**」の２つ。

## 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](https://qiita-image-store.s3.amazonaws.com/0/189936/70e8b7db-d99d-8cb9-cace-5e93608b3273.png)


# 事前準備（IBM Cloud編）
IBM Cloud 管理ポータルの操作は他の記事で記載されているので省略します。Cloud Foundry アプリは、WEBサイトの簡単なスクリプトでよく使う[PHP]を選びました。Cloud Foundry アプリのリソース作成が完了すると、ポータルでインスタンスにSSH接続できるようになります。また、自動的に[Hello World]のページが公開されていますので、"アプリURL…"をクリックしてWEBサイトが公開されていることを確認します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/189936/8498b318-932e-c2b3-568b-967709c8bda7.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/189936/04c16d69-66b1-20c4-b8e9-0274e468d0e5.png)

▼Cloud Foundry アプリ のOSは、Ubuntu 14 ですね。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/189936/214ec18d-3316-9ba3-4a71-64819e6e9add.png)


# 事前準備（自分PC編）

## ibmcloud CLI のインストール
Windows 10 のコマンドプロンプトで、**ibmcloud CLIツールをインストール**します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/189936/5a993138-d3b3-711d-4f57-4604dbbe9bbe.png)

## ibmcloud CLIの初期設定
IBM Cloudのアカウント情報を登録します。Windowsコマンドプロンプト"cmd"を起動します。

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

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

C:<code>&yen;</code>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:<code>&yen;</code>myWeb> _
</pre>


## (参考)bluemixコマンドの省略形
[bluemix]コマンドは、[bx]と省略することも出来るようです。つまり[bluemix login -u ]は、[bx login -u ]でも同じ機能を実行してくれます。2019/11月時点でもまだ使えるようです。
[bx]だけで実行するとヘルプを表示してくれます。[bx]コマンドだけで色々な操作が出来そうです。

## アップロードするWEBコンテンツを用意する
WEBコンテンツ（HTMLや画像ファイル）は、既存のWEBから持ってきたが、次の２つだけは新たに作成した。

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](https://qiita-image-store.s3.amazonaws.com/0/189936/f4162090-f06a-07f4-6764-8455f43b95d0.png)

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

▼この部分です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/189936/f9eb8edb-a4fe-b188-6c63-bb1a48861e98.png)


<pre>
C:<code>&yen;</code>myWeb>ibmcloud cf push

'cf push'を起動しています...
Using manifest file C:<code>&yen;</code>myWeb<code>&yen;</code>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:<code>&yen;</code>myWeb> _
</pre>
"Successfully destoryed container"と表示された行で最初に起動したインスタンスが消えて、"App FunnySnowman was started using xxx"の行で新しいインスタンスが起動したのでしょう。正常にコマンドプロンプトにカーソルが戻ってきたら、コンテンツが書き換わっているはずです。ブラウザでURLにアクセスしてみます。

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

▼おおっ。表示できた。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/189936/74764041-9b4f-387d-51be-6e224781613e.png)

▼しかも。ここ。鍵のマークまである。暗号化されたHTTPS通信になっている！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/189936/e7e4a803-bab0-37ee-0a9c-70b4ec501001.png)

▼ダウンロードのスピードは？
うーん。国内0.2秒に対しBluemixインスタンスのある米国南部だと2秒かかる。距離がある分だけレスポンスは気になるか。無償＆開発用途だから割り切りましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/189936/7e3d15bb-19ff-fb49-f891-f075b00e6274.png)

▼Cloud Foundry アプリ 側のフォルダ構成
![image.png](https://qiita-image-store.s3.amazonaws.com/0/189936/80eeec3a-4fd7-2c41-72cd-d0e97525caf6.png)


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

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

1. 仮想サーバーを用意してWebサイトを構築する
2. PaaS の Cloud Foundry アプリ を使う

PaaSは、これだけ便利（↓）。

+ 仮想サーバーの初期構築が不要。IPアドレスやネットワーク設定など何もしていない。
+ 記載しなかったけど、アプリケーションの稼働監視(モニタリング)が自動で設定されていた。
+ OSのセットアップが不要。IISやApacheの設定を何もしていない。
+ WEB公開作業が不要。ドメイン名とSSLサーバー証明書の購入をしていない。

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