はじめに

タイトルのとおり、SAP Cloud PlatformでVueアプリを動かしたいなぁというのが動機です。
普通に考えると、コイツもただのWebアプリなんだから、HTML5モジュールとしてデプロイしたら動くはずなのですが、専用のプラグインを発見しました。無理やりMTAプロジェクトをいじるより、プラグインのほうがスマートに違いない！ということで、早速動かしてみました。

アーキテクチャ

こんな感じのものを作ります。

作り方

事前準備

いくつか環境構築が必要なのですが、ここではさらっと列挙だけしておきます。

SAP Cloud Platform on Cloud Foundryのtrialアカウントを作成する
trialアカウントのCFを有効化して、orgやspaceを作成し、必要リソースを割り当てる
開発PCにCloud Foundry CLI、Node.js、npm、Vue CLIをインストールする
SAP NPM registryを設定する

1. Approuterを作る

Vueプロジェクトを作成します。

$ vue create my-approuter --default

上で作成したプロジェクトにプラグインをインストールします。アカウントや関連サービスの名前の入力を求められるので、自分のアカウント（sxxxxxxxxxxtrial）とサービス名（ここではデフォルトにしました）を入力します。

$ vue add scp-cf-approuter

SAP Cloud Platformで、xsuaaサービスインスタンスとdestinationサービスインスタンスを作成します。
manifest.yamlから、approuteerの依存サービスが分かります。
サービスインスタンス名は、yamlに定義されている名前と一致させる必要があります。

# manifest.yaml
---
#application settings
applications:

#approuter settings
- name: approuter                             
  memory: 128M                                
  routes:                                     
    - route: approuter-sxxxxxxxxxxtrial.cfapps.eu10.hana.ondemand.com
  env:                                        # env variables 
    TENANT_HOST_PATTERN: 'approuter-(.*).cfapps.eu10.hana.ondemand.com' 
    SAP_JWT_TRUST_ACL: '[{"clientid":"*","identityzone":"*"}]'
  services:                                   # binded services 
    - my-xsuaa           # instantie to uaa service 
    - my-destination

Service MarketplaceからAuthorization and Trust ManagementとDestinationのタイルをクリックして、New Instanceからインスタンスを作成します。Destinationのタイルが見えない場合は、リソースが割り当たってないので、EntitlementsでDestinationを追加します。Destinationには、アプリのURLを定義します。まだこの時点ではアプリを作っていないので後から設定します。

インスタンスが作成されると、Service Instancesに表示されます。

あとはapprouterをビルド＆デプロイするだけなのですが、そのままだと以下のようなエラーでデプロイに失敗しました。

   -----> Installing binaries
          engines.node (package.json): 9.9.X
          engines.npm (package.json): 5.6.x
          **ERROR** Unable to install node: no match found for 9.9.X in [8.15.1 8.16.0 10.15.3 10.16.0 12.3.1 12.6.0]
   Failed to compile droplet: Failed to run all supply scripts: exit status 14

なので、package.jsonを修正します。ここでは、8.15.Xにしました。

{
  …
  "engines": {
    "node": "9.9.X", // ここを対応しているバージョンに変更する
    "npm": "5.6.x"
  }
}

デプロイします。ログインしていない場合は、cf loginでログインしてください。

$ npm run build && cf push

2. Appを作る

Vueプロジェクトを作成します。

$ vue create my-app

上で作成したプロジェクトにプラグインをインストールします。アカウントや関連サービス名を聞かれるので、設定します。xsuaaサービスは、前手順で作成したxsuaaサービス名を入力します。それ以外は、今回使用しないので一旦デフォルトのままでOKです。

$ vue add scp-cf-approuter

サービスの依存関係を潰さないとデプロイエラーになるため、ソースを少し手直しします。また、Vuetifyの初期化エラーのためデプロイできても何も表示されないという現象が発生したので、そこも直しておきます。

まず、manifest.yamlから使わないサービスをコメントアウトします。

---
#application settings
applications:

- name: myapp                
  routes:
    - route:  https://myapp-p2001700579trial.cfapps.eu10.hana.ondemand.com
  memory: 128M                                 
  env: 
    SAP_JWT_TRUST_ACL: '[{"clientid":"*","identityzone":"*"}]'
    SAP_SCC_LOCATION_IDS: '[""]'
    SAP_SCC_BACKEND_DESTINATION: 'mycompany_sap_dev'
  services:                                    
    - my-xsuaa            
    #- my-connector-company # これをコメントアウト

src/main.jsを編集します。

import Vue from 'vue'

import axios from './plugins/axios'
Vue.prototype.$http = axios;


- import './plugins/vuetify'
+ import Vuetify from "vuetify";

import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'

Vue.config.productionTip = false
+ Vue.use(Vuetify);
+ const opts = {};

new Vue({
  router,
  store,
+  vuetify: new Vuetify(opts),
  render: h => h(App)
}).$mount('#app')

デプロイします。

$ npm run build && cf push

3. Destinationを設定する

my-destinationにアプリのURLを設定します。

ちなみに、manifest.yamlで環境変数として渡すこともできますが、not recommended とのことです。

    destinations: >
      [
        {
          "name":"myapp",                                             
          "url":"https://myapp-s0000000000trial.cfapps.eu10.hana.ondemand.com/",    
          "forwardAuthToken": true                                    
        }
      ]