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_ プレフィックスとしないといけないようだ。

  1. VUE_APP_API_BASE_URL=""

.env.development

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

  1. 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

  1. <script>
  2. import axios from 'axios';
  3.  
  4. export default {
  5. name: 'FavPhrase',
  6. methods: {
  7. sampleAjax : function() {
  8. axios.get(process.env.VUE_APP_API_BASE_URL + "/api/hello")
  9. .then((res) => {
  10. alert("status=" + res.status + ":" + res.data);
  11. });
  12. }
  13. }
  14. }
  15. </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 を追加する。

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

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

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

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です