Google App Engine Java スタンダード+Spring Boot+Vuetify 開発環境と本番環境の設定からGAEへデプロイ

とりあえず、もっていきたい構成は、以下。

Eclipse 上で、APIの開発、Visual Studio Code上で、UIの開発をそれぞれ行い、UI のビルド -> Eclipse側プロジェクトに書き出し -> GAEへデプロイ。

クラウドを利用したWebサービス+API+モバイルのエコシステムのテンプレート環境を作りたいのだが、一つ一つ面倒だ。あと、下図に、Xamarinを入れ込んでAPI呼び出しまでの環境を作りたい。

favphrase_architecture

ローカル開発環境で、サービス側とUI側を同時に立ち上げて動作確認を行うところまで確認できたので、Base URL を開発環境と、本番環境で切り替えられるようにし、デプロイまで疎通する。

1.Vue CLIでの環境の切り替え

1.1環境設定ファイル

hhttps://cli.vuejs.org/guide/mode-and-env.html#environment-variables

プロジェクト直下に、.env ファイルを配置し、そこに設定を記述する。

.env                # すべての場合でロード
.env.local          # すべての場合でロード, Gitでは無視
.env.[mode]         # 特定のモードの場合のみロード
.env.[mode].local   # 特定のモードの場合のみロード, Gitでは無視

1.2 モード

https://cli.vuejs.org/guide/mode-and-env.html#modes

詳細は、上記URL参照。

1.3 設定実装

vue_env_path

.env

本番環境では取得元と同じURLとする。環境変数名は、VUE_APP_ プレフィックスとしないといけないようだ。

VUE_APP_API_BASE_URL=""

.env.development

開発時には、取得元ではないホストを呼び出す。

VUE_APP_API_BASE_URL="http://localhost:8080"

1.4.Vue(axios)による、REST API呼び出し

変更前の状態は、http://typea.info/blg/glob/2019/04/google-app-engine-java-spring-bootvuetifyajax.html

<script>
import axios from 'axios';

export default {
  name: 'FavPhrase',
  methods: {
    sampleAjax : function() {
      axios.get(process.env.VUE_APP_API_BASE_URL + "/api/hello")
        .then((res) => {
          alert("status=" + res.status + ":" + res.data);
        });
    }
  }
}
</script>

1.5 サーバー(Spring MVC) 側

変更前の状態 http://typea.info/blg/glob/2019/04/google-app-engine-java-spring-bootvuetifyajax.html  では、リクエストヘッダーに Oigin が含まれないとシグネチャが一致しないため、対応APIなしとなってしまう。RequestHeader アノテーションに、required=false を追加する。

@RestController
public class ApiController {
	@GetMapping("/api/hello")
	public ResponseEntity hello(
			@RequestHeader(name="Origin", required=false) String origin) {
		
		System.out.println(String.format("%s", origin));
		
		HttpHeaders headers = new HttpHeaders();
		headers.add("Access-Control-Allow-Origin", origin);
		
		String body = "Hello GAE Java std env with Spring boot !";
		return new ResponseEntity<>(body, headers, HttpStatus.OK );
	}
}

2.実行

2.1 UI 、APIそれぞれ別に実行

Vue を node の devServer で起動(8081ポート)画面から、API(8080ポート)の呼び出し成功

vs2eclipse

2.2 Spring Bootに統合したUIから実行

npm run buid により、Spring Boot の静的ディレクトリに吐き出したアプリケーション(8080ポート)を実行しAPI(8080ポート)を呼び出し。成功!

oneclipse

2.3 GAEで実行

Eclipse のプロジェクトから、 mvn appengine:deploy を実行し、gloud app browse 成功!

cors_gae_success

とりあえず一歩野望に近づいた。