SHOW Toro TIME

アニメやゲーム、最近の気になることをどんどん書いていくブログです

Google Cloud PlatformでAngularとSpring Bootを動かしてみた!

富士通システムズウェブテクノロジー Advent Calendar 2019 6日目の投稿です 記事の内容は全て個人の見解であり、執筆内容は執筆者自身の責任です。所属する組織は関係ありません。

f:id:shotoro:20191208142334p:plain

はじめに

最近では色々な開発で使われるようになってきたクラウドサービスたち(AWS、Azureなど)の中で、私がまだ一度も使ったことがないGoogleクラウドサービス「Google Cloud Platform」を使ってみようというのが今回の企画!

具体的には、タイトル通りフロントエンドのフレームワークで有名な「Angular」とバックエンドのフレームワークで有名な「Spring Boot」の2つをGoogle Cloud Platform(GCP)で動かしてみたいと思います。

Google Cloud Platformとは?

一言でいうと「Googleが提供しているクラウドコンピューティングサービス」のこと。インターネットさえ繋がっていれば、Google社が提供している開発支援のサービス、サーバなどの基盤環境を簡単に利用できる。主要なサービスだけでも21個ものサービスを提供している。

ちなみに、今回使うのは以下のサービス

気になったら調べてみてね。

Angularとは?

Googleと個人や企業のコミュニティによって開発されているTypeScriptベースのオープンソースのフロントエンドWebアプリケーションフレームワークです。

昔は、「AngularJS」というJavaScript中心のものから始まり、バージョン2.0以降からアーキテクチャや開発言語を一新して現在の「Angular」という名称になりました。注意ですが、「AngularJS」と「Angular」は全く別物です。実際に使ってみると分かりますが、使える機能や関数が完全に違うので互換性は一切ありません。

小ネタですが、このフレームワークGoogleが関わっているので、Angular Material DesignというGoogleのサイトやスマホのデザインテーマが使えたりします。

ja.wikipedia.org

Spring Bootとは?

Javaプラットフォーム向けのオープンソースアプリケーションフレームワークであるSpring Frameworkが提供する機能の1つ。前提としてSpring単体の知識が必要になるが、簡単に言うとSpring単体だとやらないといけなかった細かい設定作業を省いて、開発者がコーディングに専念できるように特化された開発アプリだと思えば良いかと思います。

あと、Spring Bootで作成したJavaアプリは、デフォルトでWebコンテナを内包しているので、Tomcatをいちいち用意する必要もなくjarを起動するだけでJavaアプリが起動できます。(通称、組み込みTomcat)

準備したこと

AngularとSpring Bootを動かす前に、まず事前にやっておいたことをまとめます。

GCPの利用登録&GCPのプロジェクト作成

今回は個人googleアカウントを利用し、GCPの無料トライアルサービスを使いました。

ポイントは以下の点

  • 無料トライアルは12ヵ月間、月300ドル分のGCPサービスを使える
  • 300ドル分以上使ってしまった時点でGoogle Cloud Platformの無料トライアルは終了する
  • 月300ドル以上の使用なため、例えば1月に250ドル分使用した場合次の月の2月にはまた300ドル分使用できるようになっている

プロジェクトの作成までは、既にある記事のほうがわかりやすいです。

【Qiita】これから始めるGCP(GCE) 安全に無料枠を使い倒せ

GCP SDKのインストール

資産をGCPのサービスにデプロイするためにgcloudコマンドが必要なので、公式サイトを参考にインストールします。

f:id:shotoro:20191203213642p:plain

Angularのサンプル作成

今回はAngular7をサンプルに用意しました。

現在(2019/12)でリリースされているAngular8だと、Google App Engineでうまく動かない事例があるのでAngular7にしています。

Angularのセットアップは、公式に沿って行い、サンプルを作成しました。
※Angular CLIのインストール時、バージョン7を明示的に指定する必要があります。

angular.jp

f:id:shotoro:20191204183814p:plain

Springのサンプル作成

Springのサンプルは、ベースプロジェクトを作成できるSpring Initializrサイトを利用しました。

https://start.spring.io/

f:id:shotoro:20191203214430p:plain

RESTful APIの設計で、適当にUser情報を返してくれるサンプルで動かしました。

ここまで出来たら、いざTry!

やってみた

どんな感じで、資産を配備できるかを実際のサービスを使って動かしてみました。

AngularをGoogle App Engineで動かす

  • 事前準備で実施したGCP SDKのインストールを行い、以下の内容がしっかりできていることが前提

    • 開発プロジェクトとの接続設定ができている

    • 利用するGoogleアカウントの設定ができている

  • ローカル端末にAngular7の資産を用意する

  • app.yamlファイルをAngular資産のルートディレクトリに作成する

    ※デプロイ時に必要

runtime: php55
api_version: 1
threadsafe: true
# サービス名を指定しない場合、defaultになる
# service: angular
handlers:
- url: /
  static_files: dist/index.html
  upload: dist/index.html
- url: /
  static_dir: dist
# gcloud app deploy   
  • デプロイが成功すると、Google App Engineにサービスが登録される

f:id:shotoro:20191204182521p:plain

  • フロントエンドのURLは、以下のようになる

    https://<GCPのプロジェクト名>.appspot.com

これだけでデプロイできる!!!

f:id:shotoro:20191204183814p:plain

SpringをGoogle Compute Engineで動かす

Google App Engineでも動かせるっポイが、今回はGoogle Compute Engineで動かす

  • GCP管理画面のサイドメニューより、Compute EngineVMインスタンスからバックエンドサーバを作成を行う

f:id:shotoro:20191203220335p:plain

  • インスタンスを作成ボタンを押下して詳細画面へ

f:id:shotoro:20191203220534p:plain

  • インスタンス作成の詳細画面で、配備するアプリに適した環境を設定する(今回はサンプルなので、最小設定)

f:id:shotoro:20191203220737p:plain

  • サーバのスペックを選択

  • 作成画面より管理、セキュリティ、ディスク、ネットワーク、単一テナンシーのボタンをクリックし、以下を設定

# Install dependencies from apt
sudo apt-get update
sudo apt-get --only-upgrade install -yq google-cloud-sdk
sudo apt-get install -yq openjdk-8-jdk

# Make Java8 the default
sudo update-alternatives --set java /usr/lib/jvm/java-8-openjdk-amd64/jre/bin/java
echo "Startup Complete"

f:id:shotoro:20191203215047p:plain

  • ネットワーキングタブ→ネットワーク タグ

    • 任意のタグを設定
      • 今回はspring
    • どのポートを許可するかのファイアウォールルールの個別指定が可能になる

f:id:shotoro:20191203215144p:plain

f:id:shotoro:20191203215210p:plain

  • 以下の項目を設定し作成する

    • 一致した時のアクション
      • 許可
    • ターゲットタグ (VMインスタンスで設定したネットワークタグ)
      • 今回はspring
    • ソースIPの範囲
      • 0.0.0.0/0
    • プロトコルとポート(指定したプロトコルとポート)
      • tcp : 8080 (Springを使うための指定ポート)

f:id:shotoro:20191203215219p:plain

f:id:shotoro:20191203215241p:plain

f:id:shotoro:20191203215254p:plain

  • ローカル端末よりGCPSDKを起動し、Spring用のVMインスタンスにSpringのサンプルプログラムを配備する
# gcloud compute scp <local_file_name> <instance_id>:/tmp
  • 成功後、指定したディレクトリ配下にプログラムがデプロイされる

f:id:shotoro:20191203215307p:plain

  • jarを実行し、指定のブラウザからSpringを起動
# java -jar <spring_jar_file>

以下のURLでアプリが動作する!

http://<VMインスタンスの外部IP>:8080/<WebAPIのURI>

f:id:shotoro:20191204213557p:plain

まとめ

初見で挑んでみて、構築の難易度はAWS、Azureと比べても同じくらいの印象。

公式ドキュメントもそこまでややこしく書かれてないので、意外と読みやすかった。

今回使ったGoogle App EngineGoogle Compute Engineも使いやすく、操作中のレスポンスも早くて快適。

もっと先に進めて、リポジトリの管理やCI/CDの設計をしてみたかったが、Angularの配備が予想以上に苦戦していたこともありちょっと残念(まさか、Angular8がうまく動作しないなんて思わなかった。。。)

次は、GCPリポジトリ管理を調べてみるかな。