openshiftでデモアプリをホスティングする

[合同会社kumanote](http://kumano-te.com/)のTanakaです。

[openshift](https://www.redhat.com/ja/technologies/cloud-computing/openshift)を使って、小さなWebアプリを作る機会があり、そのときのメモをご紹介します。

**無料でサーバーをつくって、軽くデモをするときなどに便利です。**

## openshiftとは？

Openshiftは、redhat社が展開するクラウドサーバーのサービスです。  
（GoogleやAWSなんかと同じような感じですね）

使ってみた感想としては、以下です。

- Googleさん の Google Container Engine に近い
- redhatさんの`Kubernetes`愛を感じる
- 学習コストがやや高く、小さなアプリ公開にはむかない
  - Kubernetes を多少理解している必要がある
  - [Openshift の Document](https://docs.openshift.com/online/welcome/index.html) は 豊富なのですが、最初に来た人にはとっつきづらい
  - 一度理解してしまえば、demoやるときは最速かも（今後もことあるごとに利用させていただきたい）


## 実施したこと

以下実施したことを記載します。
今回は、デモページを公開したかったので・・
最終的なゴールは**静的ファイル（html/image/css/js）**の配信を行うサーバーを立てるまでになります。
（・・が、db等も使えるので、簡単なアプリケーションは、無料で作れてしまう機能が備わっています。）

### sign up

まずは登録からですね。
[ここ](https://manage.openshift.com/)から登録できます。
**クレジットカード登録不要**です。  

※ 1 project 無料で、72時間毎に18時間sleepするらしいので、商用利用はほぼ不可能です。

![スクリーンショット 2017-08-20 14.29.16.png](https://qiita-image-store.s3.amazonaws.com/0/188896/abd388f1-8fe5-fd20-f141-9240047c790d.png)
![スクリーンショット 2017-08-20 14.32.12.png](https://qiita-image-store.s3.amazonaws.com/0/188896/9992213a-6179-601d-4575-9439526f5114.png)


### プロジェクトの作成

web consoleが開いたら、全てGUIでプロジェクトを作成できます。

![スクリーンショット 2017-08-20 14.40.12.png](https://qiita-image-store.s3.amazonaws.com/0/188896/195b1d04-442b-428d-114b-2e66c8b2fa99.png)

プロジェクトの概要を入力します
![スクリーンショット 2017-08-20 14.41.48.png](https://qiita-image-store.s3.amazonaws.com/0/188896/ff23beb1-a2c1-b4d3-c689-2d7d4c5b1fe2.png)

JavaScriptを選択します
![スクリーンショット 2017-08-20 14.42.22.png](https://qiita-image-store.s3.amazonaws.com/0/188896/fb3d519e-c924-b01b-62e8-da8103d4e8db.png)

Node.js v6 を選択します
![スクリーンショット 2017-08-20 14.42.30.png](https://qiita-image-store.s3.amazonaws.com/0/188896/8522112b-ed7f-9985-0647-57ab94502b53.png)

デプロイしたいGithubのリポジトリを入力します
**private repository OKです** → その場合、githubのリポジトリにデプロイキーを登録して、sshのprivate keyをopenshiftのプロジェクトに登録する必要があります。
また、githubにwebhookを登録することもでき、ブランチをpushしただけで、ビルド〜デプロイが自動化できるのも魅力でした。
![スクリーンショット 2017-08-20 14.51.04.png](https://qiita-image-store.s3.amazonaws.com/0/188896/40dace79-8b15-1ad5-cd72-45d3a9294c44.png)

これだけで動きます。結構すごいです。
ただ、動作原理がわかるまでかなりの時間を使いました。Documentをもう少しわかり易くしてほしいです。。

以下、僕なりの理解です。

- openshiftはソースコードからコンテナイメージを動的に作成する機能（s2iというらしい）がある
- 上のように、カタログを選択した（nodeのtemplateを使った）場合は、`npm install`後、プロジェクトルートの`npm start`を動かすコンテナイメージが勝手に作られる
  - **つまり`package.json`に`start script`かいとけば、勝手にimageがつくられる** ← これがわかるまで四苦八苦しました。
- 上のように、カタログを選択した（nodeのtemplateを使った）場合は、カタログにて定義されたserviceやpodが勝手に立ち上がり、サービスが公開される。

### ソースコードのアップ

以下だけ、要点をかいつまんで

- package.json

`scripts.start`を記述して、`server.js`を呼ぶようにしました。

```json
{
  "name": "kumanote-test",
  "version": "1.0.0",
  "description": "",
  "author": "kumanote,LLC.",
  "main": "server.js",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src",
    "test": "IP=0.0.0.0 PORT=3030 mocha --timeout 5000 tests/*_test.js",
    "start": "node server.js"
  },
  "dependencies": {
    "chai": "^3.5.0",
    "chai-http": "^2.0.1",
    "mocha": "^2.4.5",
    "express": "^4.13.4"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}
```


- server.js

`dist`配下に公開したいファイルを配置しました。
また、`port`や`ip`は`process.env.OPENSHIFT_NODEJS_PORT`や`process.env.OPENSHIFT_NODEJS_IP`の指定が必要みたいです。

```js
var express = require('express'),
    app     = express();

var port = process.env.PORT || process.env.OPENSHIFT_NODEJS_PORT || 8080,
    ip   = process.env.IP   || process.env.OPENSHIFT_NODEJS_IP || '0.0.0.0';

app.use(express.static(__dirname + '/dist'));

// error handling
app.use(function(err, req, res, next){
  console.error(err.stack);
  res.status(500).send('Something bad happened!');
});

app.listen(port, ip);
console.log('Server running on http://%s:%s', ip, port);

module.exports = app;
```


以上になります。