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

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

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

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

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

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

1.1環境設定ファイル

h https://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 設定実装

.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呼び出し

変更前の状態は、https://www.typea.info/blog/index.php/2019/04/20/google_app_engine_java_spring_bootvuetifyajax

<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) 側

変更前の状態 https://www.typea.info/blog/index.php/2019/04/20/google_app_engine_java_spring_bootvuetifyajax では、リクエストヘッダーに 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 );
	}
}