[チュートリアル] ASP.NETCoreのWebアプリ公開からCloudant NoSQL DB接続まで (IBM Cloud Foundry)

皆さん、こんにちは。戸倉彩です。

今回はIBM Cloud上で提供されているCloud Foundryサービスを利用してASP.NETCoreのWebアプリケーションを構築する手順について紹介します。
※本記事はIBMが公式が公開しているIBM Cloud資料 **[「Getting started with ASP.NET Core」](https://cloud.ibm.com/docs/cloud-foundry?topic=cloud-foundry-getting_started-dotnet)** の翻訳版がまだ存在しないこともあり、日本語の参考訳にスクリーンショットや独自にコメントを追加した内容になります。
※本内容は2020年10月30日現在のものとなります。

## はじめに
本チュートリアルを進めるためには、**IBM Cloud**が必要となります。
IBM Cloudのアカウントをお持ちでない方は、Qiita記事 **[「「IBM Cloudをはじめました」無料ではじめられるライト・アカウント登録方法」](https://qiita.com/ayatokura/items/42d4bc728112c733c80d)** を参考にしてください。
**<注意点>**
2020年10月30日現在、IBM CloudのCloud Foundryを無料で試したい場合には、必ずクレジットカード登録を行わない **「ライトアカウント」** をご利用ください。最新のIBM Cloudのアカウント比較表については、IBM Cloud資料 **[「アカウント・タイプ」](https://cloud.ibm.com/docs/account?topic=account-accounts&locale=ja)** で確認することができます。
<img src="https://ulxudq.by.files.1drv.com/y4mcHMSKVUr8LEu73V97DfC4MGeWwiX_W9jbdEaWGg8Jow2JOWggR8b1i2bsf4OCHeBRvQMXR-eTeb6eJSm6dub-VeX5U0J6UO4ZAgSWtBWLTUG_ErDCQyLumjUGCgyx7velOO6CtggwFNHItZ9myzkh2dc03uoUYAsbLD51Hwn6Aou_l2VDJcTBztFtlH6uQIDbgKq-0AINbZtMdtKOaMy4w?width=1254&height=914&cropmode=none" width="600">
**参考情報**: [IBM Cloud Foundry Public プラン変更のお知らせ 2020/4/22](https://www.ibm.com/blogs/solutions/jp-ja/plan-updates-for-ibm-cloud-foundry-public/)

## 必要なもの
* [IBM Cloudアカウント](https://cloud.ibm.com/registration)
* [IBM Cloud CLI](https://cloud.ibm.com/docs/cli?topic=cli-getting-started): IBM Cloudをコマンドで操作するためのコマンド・ライン・インターフェース(CLI)です。
* Cloud Foundry CLI ※参考記事[「IBM Cloud CLI: Cloud Foundry CLIの追加方法 (v1.00以降)」](https://qiita.com/nishikyon/items/d9c7e19800a5f930eb5a)  
* [Git](https://git-scm.com/downloads): GitHubリポジトリーからクローンする際に利用します。
* [.NETCore SDK3.1](https://dotnet.microsoft.com/download) 

## Step 1 サンプルアプリのクローン
1. コマンドラインで、GitHubリポジトリに公開されているサンプルアプリをローカルにクローンする。

```
git clone https://github.com/IBM-Cloud/get-started-aspnet-core
```
## Step 2 アプリをローカル実行
早速、ローカル環境でアプリを実行してみます。
1. コマンドラインで、ディレクトリをサンプルアプリが格納されている場所に変更する。

```
cd get-started-aspnet-core/src/GetStartedDotnet
```

2.次のコマンドを実行して、アプリをローカル実行する。

```
dotnet restore
```
```
dotnet run
```

3.Webブラウザで **http://localhost:5000/** にアクセスし、アプリを表示する。表示されていることを確認できたら **[Control]**+**[C]** を同時に押して、終了させる。  
▼ローカル上のChromeでシークレットウィンドウを用いて開いたブラウザ画面を表示した例
<img src="https://ulxtdq.by.files.1drv.com/y4mfNcJxRrM85VF0vwVx-VN7yyfTN45DynhcXqppaJWRVSBW1JotTkFzBFT9yUDqFLy_1NTneS2S8voPGFI5ASNrq6LxbxuT7LPjrQIaXQwSbGgUX389v0ow4HxIWiJ6_-kJ0-0ZyXO2Qix4LFCjyCqGdUv8QByNd8L2G0eNKBDTB76c4ciHuU9qCy46e721kqnSOUnns58CEoBRvR721eB2g?width=1202&height=860&cropmode=none" width="600">

## Step 3 アプリをクラウドにデプロイするための準備
**[IBM Cloud Foundry]()** にアプリをデプロイするには、 **「manifest.yml」** と呼ばれているマニュフェストファイルをセットアップすると効率的に作業を進めることができます。ファイルの中には名前、クラウド上の各インスタンスに割り当てるメモリの量、ルートなど、アプリに関する基本情報が含まれています。ここからはymlファイルを編集していきます。
1. VS Codeなどのエディタで先ほどクローンした「get-started-aspnet-core」フォルダを開く。もし、コマンドから操作の続きを行い、VS Codeを呼び出す場合には下記を実行する。

```
cd ../..
```
```
code .
```

2.フォルダ内の「manifest.yml」ファイルを開き 下記を編集し、ファイルを保存する。★IBM Cloud資料の例では、メモリに512MBが指定されていますが、**無料範囲**の**256MB**に変更してください。
- **name** 任意のアプリ名 → デフォルト `GetStartedDotnet` のままでもOK
- **memory** → **256MB** に書き換える 
<img src="https://ulxsdq.by.files.1drv.com/y4mcMW3iGihlZHXBGXT_H8-Cx0l3R51mGMCXpB-23F_QqVH0cFQbfzJuWxxYylLA49-t-7_0094WLicmZFRedc2HTnGa0kpF__NcHEb4cVg224-FsAW6tkRCBGLSMeqwIO7kMJ1F5pTimdGe9eShZOi4vEEZH68mUwIHoDfRt7Gk6HotExT-wdqewcdnBUWhX7XUJ5GdjWM-IlGhTU6E0K1Rw?width=1589&height=941&cropmode=none" width="600">

## Step 4 アプリをIBM Cloud Foundryにデプロイする
1. コマンドからIBM Cloudにログインする。

```
ibmcloud login
```

2.リソースグループをターゲットにする。※デフォルトでは `Default` になっていますが、個別に別のリソースグループを作成して管理している場合には、そちらのリソースグループ名をDefaultの部分を置き換えて指定してください。

```
ibmcloud target -g Default
```

3.ターゲットのCloud Foundry環境内に組織を作成する場合は、下記のコマンドを実行する。
参考情報: [IBM Cloud資料 - 組織およびスペースの追加](https://cloud.ibm.com/docs/account?topic=account-orgsspacesusers&locale=ja) 

```
ibmcloud account org-create <任意の組織名>
```

4.上記で作成した組織内にスペースを作成する場合は、下記のコマンドを実行する。

```
ibmcloud account space-create <スペース名>
```

5.Cloud Foundryのターゲットを指定する。

```
ibmcloud target --cf
```

6.`directory, get-started-aspnet-core` のアプリケーションのメインディレクトリ上で操作を行っていることを確認し、アプリケーションをIBM Cloudへプッシュする。

```
ibmcloud cf push
```

7.アプリケーションのデプロイ完了すると、アプリが実行中であることを示すメッセージが表示される。経路のURLにブラウザからアクセスする。
▼表示されているメッセージの例
<img src="https://ulxrdq.by.files.1drv.com/y4mI0Mfpbg9aox8-cqFj0pC5AD39REwPzWlLmBVJ7QPHgSlfmLSsqf2zcGjepjN6KhZ3rtpF44G68hnffQR9R_fDcPf4bFEYV2u1pnpaf_5sCtqHhBQOGL1cxh40C53431iXVwhR0flDsiUCGV4slrk1WSFltlI09ctlgYgA8eJ9ENHM2ko3hw8RgAOp6IAanQLtbrAOhDjw2zRpCXUbK5GnQ?width=1756&height=870&cropmode=none" width="600">

8.ローカル実行した画面と同じ画面が表示されていれば成功です。
▼サンプルアプリをIBM Cloud上にデプロイした例
<img src="https://ulxqdq.by.files.1drv.com/y4mn1NFs3T95YuXndqaGt3dwtLbEeNkLFt7N7n6C3v121pt5jgSkC14DtXMej2Q8Y-aIZXNfnKNO-xVEapqeSR6ems8XCoeywjdZfaXCOHyiduPhN71kCGCziDF-BKMA1l8SgHuD5K6zGr39ncWErEQ7h3Tewg-ZClfwnPAKdM8scPlDWX02vsroMFVIcG5aACFT5Q9so4c8T4UY-4tSLjPrA?width=1316&height=885&cropmode=none" width="600">

## Step 5 データベースの追加
次に、IBM Cloudant NoSQLデータベースをこのアプリケーションに追加し、ローカルおよびIBM Cloudで実行できるようにセットアップします。
1.ブラウザで**[IBM Cloudダッシュボード](https://cloud.ibm.com/login)** にログインする。
2. **[カタログ]**メニュー→**[サービス]**で表示される検索ボックスから**「Cloudant」**を検索し、クリックする。
<img src="https://ulxpdq.by.files.1drv.com/y4m6tXpileyse5DnaTYSmE9CwtSNaLxz4ZflehdJHSgCt_jttFs3vo3cAcMoMKNSjOVkB3W14PA_uKhYx8UtarZZ6u0TrR83T79JimPyJ3s4E8emDNKGJNDl0Ob0EcCIBehv-7y8iAhivfMwv6pE-Qk_GHSxoMI7i8xdG9ykizS2K2fEGaCmWgd9PBvYYgtrZ77IVQrW0wbSU4kDLdNn-vv_Q?width=1587&height=922&cropmode=none" width="600">
3. **認証方法** (Authentication method)で**[IAM and legacy credentials]**をドロップダウンメニューから指定し、料金プランが **Free** であることを確認してから、**[Create]** ボタンで作成する。
※それ以外の項目はデフォルトのままでOKです。任意で名前などを指定することも可能です。
<img src="https://ulxodq.by.files.1drv.com/y4m1b1JCGDywNpsPcRaTBrgLqMm5IqMH58Eg6Cr8DD1a_ex7YXDmkDw-FGSsbE-V9fGMeIkfIh2gHmaEFlxgOoU2XA0Yc8rLrB1Vtn_w6DZTZNTjrQ7iJRyHB3ZRtDYV5uKdoKINRn9uQ_FWgPIh393YGcnuYa-6GPNuNfpZq8cT-XIlrINKPHkD991D6lLYumNCX4dp6duiaINYGo3AMLigA?width=1462&height=1047&cropmode=none" width="600">
4.Cloudantが作成されるとIBM Cloudダッシュボードの **[リソース・リスト]** 上で状態が **[アクティブ]** に更新される。作成したCloudantサービス名をクリックする。
<img src="https://t1xxdq.by.files.1drv.com/y4mtW5_IvsmSEwdwCPGjL6lfRBuRpKWsoonLnl8_dZr0l1dVbWL4tO67YKtSC4n9Nlk0NO1f9Mib5XxjJOI7LknLJqneAHuSoc4C_XHhdu1lyDr3Bm_paPl9xtCYrSqKPUktO_ZehHoH01t1EcmI9RfO6aYlGo6mYhmX3fs05nEea6aNZ0TY30jGaDhCTNT9UnmVReI-RiXYJ17nsLkiIscaQ?width=1847&height=695&cropmode=none" width="600">
5.ご自身のCloudantサービス情報が表示されたら、左側の **[接続]**メニュー→**[接続の作成]** をクリックする。
<img src="https://t1xwdq.by.files.1drv.com/y4mfuKI-nkDheAg3MV7HvLrXpRcYVtS4FadX0Urg-nZmzD9gI71HZqveF5Q_fviXfEkwetw1AYKml0oDfvj4EjsPYWih6je2d5shNW5QoeB7sVcdI0xnXW84jaN3xVIiMCMdAYEuFxI9AtSdJQRk7kcWm71cetV9hKBLoOjV-TsecTLTvAlB24BEqmonQN_fIhvN2Md9vezNT5lq-T-ZEBdrQ?width=1593&height=831&cropmode=none" width="600">
6.先ほど作成したご自身のアプリケーション名のボタンをクリックし、画面右下の **[次へ]** ボタンで次に進む。
<img src="https://t1xvdq.by.files.1drv.com/y4maCnW1J92oGpPttG4rfZB213GO1k3Mg50BIFBn7qw-Tu7tPj8f9RjP1hyAo-LBb_4L1nBy_egOsmnTreCV46eGlvv4JaScvLHfiWEx61LGl8mu2Xd3GYAZpSVD80vBaIw2P57jIl2E0uNrrqCec6lvhmoGu547k073F7-pLQIZdRDJD5X9XnjPkrTt7_vg6xb5g2yEzsQFUSVIpGoW9ya-g?width=1818&height=716&cropmode=none" width="600">
7.今回はそのまま **[作成]** ボタンをクリックする。
<img src="https://t1xudq.by.files.1drv.com/y4mD_duCPrQyLNVkvLvYFnJ8YPTEYtfDSJZe8AC9Z2KJrY9uA0SJmiOyWkio96eJ3ABX26mVvvpRe1pzgG4K1OX3sc_YdrlsnMRfttdEIwolpe0nlpeWKdPLdrK4_y6vfWnsLF76Eb-gFbhUBP6KIV6Wxg-tfXKxdfVzcGloM51xxO5OcV-hi7vmkHC5OLXjl6Xx-SFZWOBR3v77dlwyRHdyg?width=1552&height=764&cropmode=none" width="600">
8. **[アプリの再ステージ]** 画面が表示されたら、**[再ステージ]** をクリックして再ステージを実行する。
<img src="https://t1xtdq.by.files.1drv.com/y4m7p3vlfXmpHmc_ihkdYESx-VExS19WttWy22LhdTmx6gOakvl3d-oslaVvsOeXp2Sxm_RMnjkC5B2ldpGKWfTVRXCoJdR7nUlF3B0cwxqSEb6CpuYbcDkxRWNYOwgcfVup0JablAdcTRdQEIanmMjNnkwO0T61J2xOz5sG5Ype7lQGnnnJYuagJjJwg1AcTVl8J74ZrGb7AY_owmixqKeDw?width=1614&height=810&cropmode=none" width="600">
9.状況が **[開始済み]** に更新されてたら接続完了です。
<img src="https://t1xsdq.by.files.1drv.com/y4mKKElB9z7AExs8FEM9JA6YEWZ1m-49bTdhRcJ7m5GMH3GkzpJjB1wWhRAEUqEWntcDHZjdoUJtr7p2WR7TsExRYHR_DdS33UTIQ3QUCR6YflVmCNNpY7iO2vs6LtmXxinCdjZ3f301pijepmmIUvqxaLoxcYaxZWiAm8vSh3pvCJy9O_kqjCZC-MuwjmBoybLU_iWkbBR_iqQKDJQ_C6cRg?width=1785&height=441&cropmode=none" width="600">
10. デプロイしたアプリにアクセスすると先ほど表示されていた「No databbase connection」の文字が消えていることを確認する。
11. 適当に名前を入力してみると、入力した情報が表示されると同時に、データベースに格納される。
<img src="https://t1xrdq.by.files.1drv.com/y4mUbZBsy31jJvPlSLy9nOa6eVcrIBxr3g1Yyyw-0uaPja2DTnmPPagF-wCBLs2px2OyBA5W_SQx1d9ATRQHD8jaZiIZvrwzc-dMeLOgntd_SiQuNEGp_DOkVH8V-w3M9MPgdzaN8hhfA0dfpo0V_7fJyaaNKfhsOr0wn6C_822WncW6ZvtHVYfOc3BzBLzZ5ZYei6idhnCNs4OPPXvPuAQhg?width=985&height=522&cropmode=none" width="600">

以上です。こちらはサンプルアプリのため、自由にカスタマイズしたりデザインしたりできるので、自分好みのアプリでお楽しみください。


**IBM Cloud Foundry**では、ASP.NET Coreの他にもJava、Node.js、Swift、Go、PHP、Python、Rubyに対応していますので、是非いろいろ試してみてください。

## 参考リンク
* **IBM Cloud資料 - Cloud Foundryアプリケーションの管理** - Cloud Foundryコマンド情報がまとまっています。  
https://cloud.ibm.com/docs/cli?topic=cli-ibmcloud_commands_apps&locale=ja
* **Qiita - [チュートリアル] Node.jsのWebアプリ公開からCloudant NoSQL DB接続まで (IBM Cloud Foundry)**  
https://qiita.com/ayatokura/items/d4f5b048ac8585428faf

★Twitterで最新情報配信中 [@ayatokura](https://twitter.com/ayatokura)