IBM CloudでNode.jsアプリケーションをデプロイするまでの流れ


IBM Cloudを使ってみようと思い触ってみたので主に自分用に残します。

終わってみるとそこまでハマる感じではないと思いますが、僕はハマったところがありました苦笑 

## 1. Web上の管理画面側の設定

### アカウントの作成

ライトアカウントという無料で作れるアカウントがあり、クレジットカード登録無しで登録できます。

> https://www.ibm.com/jp-ja/cloud
> ![スクリーンショット 2021-03-24 1.47.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/b86d9ff3-aa79-c9f8-5ff1-11ebb6ef1b78.png "スクリーンショット 2021-03-24 1.47.58.png")

アカウント登録をしていきましょう。

### アプリケーション作成まで

AWSやAzure、GCPなどと同様にIBM Cloudは色々なサービスの集合体の名称です。 今回はCloud Foundryというサービスを使っていきます。

`リソースの作成`から進めていきます。

> ![スクリーンショット 2021-03-24 1.49.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/2c1895b2-5ed7-01f0-7beb-b5959cd84a7b.png "スクリーンショット 2021-03-24 1.49.39.png")

[製品選択の画面](https://cloud.ibm.com/catalog)になるので、Cloud Foundryを検索して選択します。

> ![スクリーンショット 2021-03-24 1.52.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/57ac5dee-efbb-6168-116b-50750338622f.png "スクリーンショット 2021-03-24 1.52.12.png")

[Cloud Foundryの画面](https://cloud.ibm.com/cloudfoundry/overview)に遷移したら、作成ボタンからアプリケーション作成に進みます。

> ![スクリーンショット 2021-03-24 1.53.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/be669c1a-9578-c2a1-7d0a-87d54bbde85d.png "スクリーンショット 2021-03-24 1.53.42.png")

### Cloud Foundryアプリの作成

#### ロケーション選択ではとりあえずダラスを選択

ロケーション（リージョン）選択は現状だと、ダラス（us-south）以外は無料枠では利用できない模様です。ダラスを選択します。

> ![](https://i.gyazo.com/1ec6b64a1557c63dddc22904a028d591.png)

#### 料金プラン選択ではとりあえず64MBを選択

こちらの記事（[IBM CloudのCloud Foundryデプロイの無料枠のメモリ制限](https://qiita.com/n0bisuke/items/6f23897fbf405ef91b7b)）にもありますが256MBまで選択できますが、これを選択すると無料枠で他にアプリケーションが作れなくなってしまうので一旦64MBからスタートしていきます。

#### ランタイムの選択。今回はNode.jsで

ランタイム選択です。

> ![スクリーンショット 2021-03-24 2.13.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/31b1f0a9-217d-e029-9905-2e6d41301e7d.png "スクリーンショット 2021-03-24 2.13.16.png")

利用する言語を選択しましょう。

#### アプリ名を入力して作成

適当に名前をつけましょう。今回は、`n0bisuke-testapp`としました。

> ![スクリーンショット 2021-03-24 2.14.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/64b19c55-afd4-75a5-0689-5aeb48e3db46.png "スクリーンショット 2021-03-24 2.14.15.png")

この名前を後半のマニフェストファイル（後述）で指定します。

右側の作成ボタンがアクティブになると思うので作成します。

## 2. ローカルでの開発準備

ブラウザ上での作業は一旦ここまでにして、次はローカルで開発できるようにします。

まずはCLIツールをインストールします。

基本的な開発の流れはローカル開発 -> CLIツールでデプロイという流れになります。

### CLIツールをインストールする

ibmcloudコマンドを使えるようにしますが、macOSは以下でインストールできます。

```
$ curl -sL https://ibm.biz/idt-installer | bash
```

補足: なんか内部でDocker使う模様ですが、Homebrew経由でインストールしてそうです。

> ![スクリーンショット 2021-03-21 18.51.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/e8adced8-78e7-c7fd-f7f3-42f51c8dc922.png "スクリーンショット 2021-03-21 18.51.38.png")

無事にインストール出来るとibmcloudコマンドが利用できるようになります。

```bash
$ ibmcloud 
名前:
  ibmcloud - IBM Cloud と対話するためのコマンド・ライン・ツール
詳しくは https://ibm.biz/cli-docs を参照してください

使用法:
  [environment variables] ibmcloud [global options] command [arguments...] [command options]

バージョン:
  1.4.0+4705d79-2021-02-24T21:58:03+00:00
 
省略
```

### `ibmcloud cf`コマンドを利用できるようにする

最終的に`ibmcloud cf push`というコマンドでデプロイしますが、最初は`ibmcloud cf`が利用できません。

`ibmcloud cf install`で追加インストールすることでibmcloudコマンドが機能拡張されます。

```bash
$ ibmcloud cf install

Cloud Foundry CLI をダウンロードしようとしています...
 8.93 MiB / 8.93 MiB [=======================================================] 100.00% 16s
9359027 バイトがダウンロードされました
/Users/n0bisuke/.bluemix/tmp/cf_845728579/cf-cli_6.53.0_osx.tgz に保存されました
Installing Cloud Foundry CLI...
OK
Cloud Foundry CLI is successfully installed
```

### ロケーション（リージョン）を`us-south`に設定する

**僕は初見でここの設定を間違えて永遠に先に進めませんでした苦笑**

アプリケーション作成した際に、ロケーションをダラス（us-south）を設定していたので、`ibmcloud target -r`で設定しましょう。

```bash
$ ibmcloud target -r us-south
```

僕がみた公式チュートリアルにCLI側でのリージョン設定は載ってないのですが、設定しないと永遠と進めない雰囲気でした苦笑

### CLIでログイン

アカウントにログインします。`--sso`を付けるとブラウザ経由で認証します。`--sso`オプション無しの場合そのままメールアドレスとパスワードを入力です。

```bash
$ ibmcloud login --sso

API エンドポイント: https://cloud.ibm.com
リージョン: us-south

https://identity-2.ap-north.iam.cloud.ibm.com/identity/passcode からワンタイム・コードを取得して、続行します。
デフォルトのブラウザーで URL を開きますか? [Y/n] > 
```

表示されるURLをブラウザで開くとワンタイムパスコードが表示されるのでコピーしてCLIに貼り付けます。

> ![](https://i.gyazo.com/6c51a3ec8377c6dbe303f20599e9032f.png)

認証されるとこんな感じでログインできます。

> ![](https://i.gyazo.com/6e702c2ba919be74179211a8794a4168.png)

組織、スペースなどの単語が出ていますが次で設定していきます。

リソースグループは未設定でも大丈夫そうでした。

### 組織、スペースの設定

`ibmcloud target --cf`のコマンドで自動的に設定されます。

```bash
$ ibmcloud target --cf
```

> ![](https://i.gyazo.com/e414bbac7e507cbe6d43885348829b88.jpg)

#### 補足: 別のやり方

ちなみに`ibmcloud target -o ORG_NAME -s SPACE_NAME`でも設定できます。（`ibmcloud target --cf`で自動設定してくれるので使わないかもしれないですが）

```bash
$ ibmcloud target -o n0bisuke -s dev
```

## 3. サンプルコードを作成

あとはNode.jsアプリケーションを作成していきます。

手元のNode.jsは`v15.11.0`を利用しています。

公式サンプルは色々載ってますが、シンプルなものを作っていきます。

### Node.jsアプリケーションの作成

* フォルダを作成して移動

```bash
$ mkdir ibm-cf-test
$ cd ibm-cf-test
```

* Node.jsアプリケーション開発の準備としてnpm initとpackage.jsonを作成

```bash
$ npm init -y
```

* Webサーバー用にexpressをインストール

利用するモジュールのexpressをインストールします。

```
$ npm i express
```

* サンプルコードを作成

server.jsを作成し、簡単なWebサーバーを立ち上げるコードを書きます。

```js
const express = require('express')
const app = express()
 
app.get('/', function (req, res) {
  res.send('Hello World')
})
const port = process.env.PORT || 3000
 
app.listen(port)
```

ここまでは通常のNode.jsアプリケーションと同様です。

### マニフェストファイルを作成

**ここが大事です。** 

`manifest.yml`を作成し、以下を記述します。

**このマニフェストファイルがあることでIBM Cloudにデプロイができます。**

今回`n0bisuke-testapp`というアプリ名でアプリを作成したので、nameに`n0bisuke-testapp`と記述します。

また、作成時に64MBを指定したのでここも合わせて64MBにしましょう。

```manifest.yml
---
applications:
 - name: n0bisuke-testapp
   random-route: true
   memory: 64M
```

### デプロイ

先程の`ibmcloud target --cf`のコマンドで設定が完了していれば、以下のコマンドだけでデプロイできます。

```bash
$ ibmcloud cf push  
```

デプロイ時のログが表示されてデプロイが実行されていきます。
無事にデプロイされると以下のようなログが表示されます。

```bash
省略
・
・
・

アプリが開始するのを待機しています...

名前:                   n0bisuke-testapp
要求された状態:         started
経路:                   n0bisuke-testapp-xxxxxx
最終アップロード日時:   Wed 24 Mar 02:50:27 JST 2021
スタック:               cflinuxfs3
ビルドパック:           sdk-for-nodejs

タイプ:           web
インスタンス:     1/1
メモリー使用量:   64M
開始コマンド:     npm start
     状態   開始日時               cpu    メモリー       ディスク      詳細
#0   実行   2021-03-23T17:50:51Z   0.0%   64M の中の 0   1G の中の 0   
```

デプロイされたURLにアクセスするとハローワールドが表示されると思います。

> ![スクリーンショット 2021-03-24 3.26.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/21cedd89-fcc5-73bb-7c82-153c2b711bcd.png "スクリーンショット 2021-03-24 3.26.41.png")

以上です、お疲れ様でした。

## まとめ

振り返るとそんなにハマりポイントなさそうなのですが、僕の場合リージョン選択をなぜかCLI側で日本に設定してしまってずっとハマってました。

色々なリンクや古い情報なども散らばっていてけっこう苦労したり苦

初めて試す人は気をつけてください。

npm installなども普通にできるのでHerokuなどと同様の使い勝手ですね。

次はLINE BOT作成に進んでみようと思います。