富士通システムズウェブテクノロジー Advent Calendar 2019 6日目の投稿です 記事の内容は全て個人の見解であり、執筆内容は執筆者自身の責任です。所属する組織は関係ありません。
はじめに
最近では色々な開発で使われるようになってきたクラウドサービスたち(AWS、Azureなど)の中で、私がまだ一度も使ったことがないGoogleのクラウドサービス「Google Cloud Platform」を使ってみようというのが今回の企画！
具体的には、タイトル通りフロントエンドのフレームワークで有名な「Angular」とバックエンドのフレームワークで有名な「Spring Boot」の2つをGoogle Cloud Platform(GCP)で動かしてみたいと思います。
Google Cloud Platformとは？
一言でいうと「Googleが提供しているクラウドコンピューティングサービス」のこと。インターネットさえ繋がっていれば、Google社が提供している開発支援のサービス、サーバなどの基盤環境を簡単に利用できる。主要なサービスだけでも21個ものサービスを提供している。
ちなみに、今回使うのは以下のサービス
Google Compute Engine
気になったら調べてみてね。
Angularとは？
Googleと個人や企業のコミュニティによって開発されているTypeScriptベースのオープンソースのフロントエンドWebアプリケーションフレームワークです。
昔は、「AngularJS」というJavaScript中心のものから始まり、バージョン2.0以降からアーキテクチャや開発言語を一新して現在の「Angular」という名称になりました。注意ですが、「AngularJS」と「Angular」は全く別物です。実際に使ってみると分かりますが、使える機能や関数が完全に違うので互換性は一切ありません。
小ネタですが、このフレームワークはGoogleが関わっているので、Angular Material DesignというGoogleのサイトやスマホのデザインテーマが使えたりします。
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コマンドが必要なので、公式サイトを参考にインストールします。
Angularのサンプル作成
今回はAngular7をサンプルに用意しました。
現在(2019/12)でリリースされているAngular8だと、Google App Engineでうまく動かない事例があるのでAngular7にしています。
Angularのセットアップは、公式に沿って行い、サンプルを作成しました。
※Angular CLIのインストール時、バージョン7を明示的に指定する必要があります。
Springのサンプル作成
Springのサンプルは、ベースプロジェクトを作成できるSpring Initializrサイトを利用しました。
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にサービスが登録される
フロントエンドのURLは、以下のようになる
https://<GCPのプロジェクト名>.appspot.com
これだけでデプロイできる！！！
SpringをGoogle Compute Engineで動かす
Google App Engineでも動かせるっポイが、今回はGoogle Compute Engineで動かす
- GCP管理画面のサイドメニューより、
Compute Engine→VMインスタンスからバックエンドサーバを作成を行う
インスタンスを作成ボタンを押下して詳細画面へ
- インスタンス作成の詳細画面で、配備するアプリに適した環境を設定する(今回はサンプルなので、最小設定)
サーバのスペックを選択
作成画面より
管理、セキュリティ、ディスク、ネットワーク、単一テナンシーのボタンをクリックし、以下を設定- 管理タブ→起動スクリプト
# 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"
ネットワーキングタブ→ネットワーク タグ
- 任意のタグを設定
- 今回は
spring
- 今回は
- どのポートを許可するかのファイアウォールルールの個別指定が可能になる
- 任意のタグを設定
以下の項目を設定し作成する
# gcloud compute scp <local_file_name> <instance_id>:/tmp
- 成功後、指定したディレクトリ配下にプログラムがデプロイされる
- jarを実行し、指定のブラウザからSpringを起動
# java -jar <spring_jar_file>
以下のURLでアプリが動作する！
http://<VMインスタンスの外部IP>:8080/<WebAPIのURI>
まとめ
初見で挑んでみて、構築の難易度はAWS、Azureと比べても同じくらいの印象。
公式ドキュメントもそこまでややこしく書かれてないので、意外と読みやすかった。
今回使ったGoogle App Engine、Google Compute Engineも使いやすく、操作中のレスポンスも早くて快適。
もっと先に進めて、リポジトリの管理やCI/CDの設計をしてみたかったが、Angularの配備が予想以上に苦戦していたこともありちょっと残念(まさか、Angular8がうまく動作しないなんて思わなかった。。。)
