IBM Cloud の Cloud Foundry を使って静的ウェブサイトをホスティングする


# staticfile_buildpack を使う

[IBM Cloud CLI](https://cloud.ibm.com/docs/cli?topic=cloud-cli-ibmcloud-cli#overview) を使うと、静的ウェブサイトホスティング向けのビルドパック staticfile_buildpack があることがわかります。

```
ibmcloud login
ibmcloud target --cf
```

```
$ ibmcloud cf buildpacks
Invoking 'cf buildpacks'...

Getting buildpacks...

buildpack                               position   enabled   locked   filename                                             stack
liberty-for-java                        1          true      false    buildpack_liberty-for-java_v3.29-20190223-2128.zip
sdk-for-nodejs                          2          true      false    buildpack_sdk-for-nodejs_v3.26-20190313-1440.zip
dotnet-core                             3          true      false    buildpack_dotnet-core_v2.1-20181205-1536.zip
swift_buildpack                         4          true      false    buildpack_swift_v2.0.18-20190303-1915.zip
java_buildpack                          5          true      false    java-buildpack-v4.9.zip
ruby_buildpack                          6          true      false    ruby-buildpack-v1.7.15.zip
dotnet-core_v2_1-20181205-1536          7          true      false    buildpack_dotnet-core_v2.1-20181205-1536.zip
nodejs_buildpack                        8          true      false    nodejs-buildpack-v1.6.20.zip
go_buildpack                            9          true      false    go-buildpack-v1.8.20.zip
python_buildpack                        10         true      false    python-buildpack-v1.6.11.zip
php_buildpack                           11         true      false    php-buildpack-v4.3.51.zip
xpages_buildpack                        12         true      false    xpages_buildpack_v1.2.2-20170112-1328.zip
staticfile_buildpack                    13         true      false    staticfile-buildpack-v1.4.24.zip
binary_buildpack                        14         true      false    binary-buildpack-v1.0.17.zip
dotnet-core_v1_0_26-20170913-1346       15         true      false    buildpack_dotnet-core_v1.0.26-20170913-1346.zip
dotnet-core_v2_0-20180918-1356          16         true      false    buildpack_dotnet-core_v2.0-20180918-1356.zip
liberty-for-java_v3_28-20190127-1723    17         true      false    buildpack_liberty-for-java_v3.28-20190127-1723.zip
liberty-for-java_v3_29-20190223-2128    18         true      false    buildpack_liberty-for-java_v3.29-20190223-2128.zip
swift_buildpack_v2_0_17-20190212-2123   19         true      false    buildpack_swift_v2.0.17-20190212-2123.zip
swift_buildpack_v2_0_18-20190303-1915   20         true      false    buildpack_swift_v2.0.18-20190303-1915.zip
sdk-for-nodejs_v3_25_1-20190115-1637    21         true      false    buildpack_sdk-for-nodejs_v3.25.1-20190115-1637.zip
sdk-for-nodejs_v3_26-20190313-1440      22         true      false    buildpack_sdk-for-nodejs_v3.26-20190313-1440.zip
```

# 静的ウェブサイトを準備する
ディレクトリを作成します。

```
mkdir sample-web-page
cd sample-web-page
```

以下のファイルを配置します。

```
$ ls
cloud.png		index.html		manifest.yml
```

> cloud.png
>![Kobito.OaVJGj.png](https://qiita-image-store.s3.amazonaws.com/0/101361/b3607dcc-84d9-80da-8179-bcd137bf91b0.png "Kobito.OaVJGj.png")


```html:index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to IBM Cloud !</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to IBM Cloud !</h1>
<p>This web site is running on IBM Cloud.</p>
<p>このウェブサイトは IBM Cloud で稼働しています。</p>


<img src="./cloud.png" alt="IBM Cloud Blue">

</body>
</html>
```

マニフェストファイルでは、staticfile_buildpack を指定します。

```yaml:manifest.yml
applications:
- buildpack: staticfile_buildpack   
  host: static-web-page 
  name: static-web-page
  memory: 64M
```

# IBM Cloud にプッシュ

```
$ ibmcloud cf push
Invoking 'cf push'...

Pushing from manifest to org khayama-org / space khayama-au as xxx@example.com...
Using manifest file /Users/khayama/GitHub/sample-web-page/manifest.yml
Deprecation warning: Use of 'buildpack' attribute in manifest is deprecated in favor of 'buildpacks'. Please see http://docs.cloudfoundry.org/devguide/deploy-apps/manifest.html#deprecated for alternatives and other app manifest deprecations. This feature will be removed in the future.



Deprecation warning: Route component attributes 'domain', 'domains', 'host', 'hosts' and 'no-hostname' are deprecated. Found: host.
Please see http://docs.cloudfoundry.org/devguide/deploy-apps/manifest.html#deprecated for the currently supported syntax and other app manifest deprecations. This feature will be removed in the future.


Using manifest file /Users/khayama/GitHub/sample-web-page/manifest.yml

Creating app static-web-page in org khayama-org / space khayama-au as xxx@example.com...
OK

Using route static-web-page.au-syd.mybluemix.net
Binding static-web-page.au-syd.mybluemix.net to static-web-page...
OK

Uploading static-web-page...
Uploading app files from: /Users/khayama/GitHub/sample-web-page
Uploading 12.4K, 3 files
Done uploading               
OK

Starting app static-web-page in org khayama-org / space khayama-au as xxx@example.com...
Downloading staticfile_buildpack...
Downloaded staticfile_buildpack
Cell c425400e-9cf9-4263-8a16-c1687ed49710 creating container for instance dc81c1f1-9e16-495b-a262-4aeebd980c63
Cell c425400e-9cf9-4263-8a16-c1687ed49710 successfully created container for instance dc81c1f1-9e16-495b-a262-4aeebd980c63
Downloading app package...
Downloaded app package (12.4K)
-----> Staticfile Buildpack version 1.4.24
-----> Installing nginx
       Using nginx version 1.13.9
-----> Installing nginx 1.13.9
       Download [https://buildpacks.cloudfoundry.org/dependencies/nginx/nginx-1.13.9-linux-x64-21ff4d0f.tgz]
-----> Root folder /tmp/app
-----> Copying project files into public
-----> Configuring nginx
Exit status 0
Uploading droplet, build artifacts cache...
Uploading droplet...
Uploading build artifacts cache...
Uploaded build artifacts cache (2.6M)
Uploaded droplet (2.7M)
Uploading complete
Cell c425400e-9cf9-4263-8a16-c1687ed49710 stopping instance dc81c1f1-9e16-495b-a262-4aeebd980c63
Cell c425400e-9cf9-4263-8a16-c1687ed49710 destroying container for instance dc81c1f1-9e16-495b-a262-4aeebd980c63
Cell c425400e-9cf9-4263-8a16-c1687ed49710 successfully destroyed container for instance dc81c1f1-9e16-495b-a262-4aeebd980c63

1 of 1 instances running

App started


OK

App static-web-page was started using this command `$HOME/boot.sh`

Showing health and status for app static-web-page in org khayama-org / space khayama-au as xxx@example.com...
OK

requested state: started
instances: 1/1
usage: 64M x 1 instances
urls: static-web-page.au-syd.mybluemix.net
last uploaded: Sun Mar 31 16:39:27 UTC 2019
stack: cflinuxfs2
buildpack: staticfile_buildpack

     state     since                    cpu    memory     disk      details
#0   running   2019-04-01 01:39:50 AM   0.0%   0 of 64M   0 of 1G
```

すぐにサイトにアクセスできるようになります。
![Kobito.EMA80y.png](https://qiita-image-store.s3.amazonaws.com/0/101361/a0223c9b-6553-2f63-49f6-8cb0f633afc2.png "Kobito.EMA80y.png")


# 応用オプション

カスタムドメイン、SSL 化にも対応できるので、サイトがダウンしたときのエラーページなどをホスティングさせるといった使い方も問題なくできます。

>[Adding and using a custom domain](https://cloud.ibm.com/docs/apps?topic=creating-apps-updatingapps#updatingapps)

>[IBM Cloud の Cloud Foundry で使える無料の Let's Encrypt SSL 証明書を取得する - Qiita](https://qiita.com/khayama/items/20acb24619f485020dcc)

![Kobito.cI9iUO.png](https://qiita-image-store.s3.amazonaws.com/0/101361/c057d055-a5a0-eafc-6737-f9041cbc6987.png "Kobito.cI9iUO.png")