Visual Studio Codespaces を使って Azure Functions の Java アプリケーションの Hello World まで

17869 ワード
Java AzureFunctions VisualStudioCodespace VisualStudioCode Java テキストリンク

背景

Visual Studio Codespaces が登場して、VDIのマシンを立てずとも、Azure 上の仮想マシンを使ってのコーディングがやり易くなりました。しかも WindowsとLinuxが選択できます。Visual Studio Code との連携がシームレス過ぎて感動さえ覚えます。

Visual Studio Codespaces:
https://visualstudio.microsoft.com/ja/services/visual-studio-codespaces/

Visual Studio Codespaces - document:
https://docs.microsoft.com/ja-jp/visualstudio/online/overview/what-is-vsonline

  • 執筆時点 (2020/6/5) は Public Preview です!

一方、Azure Functions は Serverless で人気のホスティング環境です。

Azure Functions:
https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-overview

その実行エンジンはGitHub上で開発されており、オンプレミスだけでなく、AWS や GCP、あるいは k8s 上などあらゆる環境にホスティングして動かす事ができます。

ここでは、それらを使っての Java アプリケーションの Hello World までの手順をまとめておきます。
ローカルに Java でさえインストールしていない点にご注意ください😊

必要なもの

手順

1. Visual Studio Codespaces の環境作成

こちらのドキュメントに従って作成してください😊

Visual Studio Codespaces Quickstart:
https://docs.microsoft.com/ja-jp/visualstudio/online/quickstarts/browser

数十秒で作成されます!
Container ベースであることも読み取れて興味深いですね。

2. Visual Studio Codespaces に Visual Studio Code から接続

Visual Studio Codespaces はデフォルトでブラウザー内での作業になることが多いです。ですが、私はローカルでのコーディングが好きなので😁、ここからはローカルの Visual Studio Code で作業をしていきます。

  • Visual Studio Codespaces のサイトに移動します

  • 作成したインスタンスを選んで [Open in VS Code] を選びます。

  • ブラウザーから、Visual Studio Code を開こうとしているというメッセージが出てきます。[開く]で先に進みます。

こんな形で、リモートに接続ができます。

  • もし認証がうまくできないなどで、接続がうまくいかない場合は、画面左下の緑の[Codespace: <インスタンス名>]をクリックして、[Codespaces: Open Codespace in New Window]にて、別のVisual Studio Codeを起動してみてください.

3. 開発に必要なモジュールを Visual Studio Codespaces にインストール

開発に必要な幾つかのモジュールが入っていません。ターミナル から、それらをインストールします。

  • Visual Studio Code でターミナルを開きます 実際にはリモートのContainerに接続しているんですよね😊

3.1. Maven

sudo apt-get install maven

3.2. Azure Functions Core Tools

Visual Studio Codespaces 上で Azure Functions を実行するためですね。リモートでのローカル実行になります😎

sudo apt-get install azure-functions-core-tools

Azure Functions Core Tools の操作:
https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-run-local?tabs=linux%2Ccsharp%2Cbash

3.3. Azure Functions - Visual Studio Code Extension

Visual Studio Code の Extension です。Visual Studio Codespaces の方にインストールします。

これで、Visual Studio Code のアクティビティバーに Azure のアイコンが表示されます。

3.4. Java Extension Pack - Visual Studio Code Extension

Visual Studio Code の Java 用の各種 Extension です。デバッグのためですね。

これで、ほぼ既存の Azure Functions のドキュメントの手順の通り作業ができます😊

4. Azure Functions のローカルプロジェクトの作成

手順はこちらですね。

ちなみに、以下の様なJavaのコードのひな型を作成してくれます。

/src/main/java/com/function/Function.java

package com.function;

import com.microsoft.azure.functions.ExecutionContext;
import com.microsoft.azure.functions.HttpMethod;
import com.microsoft.azure.functions.HttpRequestMessage;
import com.microsoft.azure.functions.HttpResponseMessage;
import com.microsoft.azure.functions.HttpStatus;
import com.microsoft.azure.functions.annotation.AuthorizationLevel;
import com.microsoft.azure.functions.annotation.FunctionName;
import com.microsoft.azure.functions.annotation.HttpTrigger;

import java.util.Optional;

/**
 * Azure Functions with HTTP Trigger.
 */
public class Function {
    /**
     * This function listens at endpoint "/api/HttpExample". Two ways to invoke it using "curl" command in bash:
     * 1. curl -d "HTTP Body" {your host}/api/HttpExample
     * 2. curl "{your host}/api/HttpExample?name=HTTP%20Query"
     */
    @FunctionName("HttpExample")
    public HttpResponseMessage run(
            @HttpTrigger(
                name = "req",
                methods = {HttpMethod.GET, HttpMethod.POST},
                authLevel = AuthorizationLevel.ANONYMOUS)
                HttpRequestMessage<Optional<String>> request,
            final ExecutionContext context) {
        context.getLogger().info("Java HTTP trigger processed a request.");

        // Parse query parameter
        final String query = request.getQueryParameters().get("name");
        final String name = request.getBody().orElse(query);

        if (name == null) {
            return request.createResponseBuilder(HttpStatus.BAD_REQUEST).body("Please pass a name on the query string or in the request body").build();
        } else {
            return request.createResponseBuilder(HttpStatus.OK).body("Hello, " + name).build();
        }
    }
}

5. Visual Studio Codespace 上で、Azure Functions のコードをデバッグする

ドキュメントの通りですと、F5 でローカルでAzure Functionsが起動します。ここでは、Visual Studio Codespace 側、つまり、リモートで起動させます。

  • [ターミナル] を起動して、以下のコマンドを発行します。
mvn clean package

結構時間かかります😅...

mvn azure-functions:run

で、見慣れた Azure Functions の実行画面に。

これで、Visual Studio Codespaces 上で、Azure Functions が起動しました!

ちなみに、debug実行する際には以下のコマンドになります。
ブレークポイントが動いていませんが...😅

mvn azure-functions:run -DenableDebug

6. Visual Studio Codespace 上の Azure Functions にアクセスする

Azure Functions Core Tools がデフォルトで作成してくれる アクセス用のURLである http://localhost:7071/api/HttpExample は、自分のPCからそのままではアクセスできませんよね。

Visual Studio Codespaceのインスタンス上の Azure Functionsに接続するため、ここでは、Visual Studio Code の Remote Extensionに入っているポートフォワーディングを利用します。

  • アクティビティーバーの [リモートエクスプローラー] を選択します。

  • [Forward port...] を選択し、ローカルでのポート番号を入れます。Azure Functions Core Tools が設定してくれたポート番号である[7071]を設定します。

  • 作成した Forward Ports を選択すると、URLをコピーするアイコンが表示されます。

この文字列がクリップボードにコピーされます。

http://127.0.0.1:7072/

そのままブラウザーのURLに張り付けてコピーすると、Azure Functions が稼働していることが確認できます。

このサンプルは、Visual Studio Codespaces 側では以下のURLで待っています。

http://localhost:7071/api/HttpExample

これを以下の様に書き換えます。
QueryStringの name の先はどんな文字列でも良いです😊

http://127.0.0.1:7072/api/HttpExample?name=Hello-VisualStudioCodespace

Azure Functions が呼び出せましたね!

まとめ

Visual Studio Codespaces が、Azure上のリモート環境という事を忘れなければ、普段の開発に近い形で行えると思います。

  • Container の 作成・削除は容易
  • 追加モジュールもインストール可能
  • アイドル時間設定で、勝手に止めてくれる

是非、楽しんでください!

参考

Visual Studio Codespaces VS Code How-to:
https://docs.microsoft.com/ja-jp/visualstudio/online/how-to/vscode

Maven Plugin for Azure Functions:
https://docs.microsoft.com/ja-jp/java/api/overview/azure/maven/azure-functions-maven-plugin/readme?view=azure-java-stable#azure-functionsrun

Azure Functions の Java 開発者向けガイド:
https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-reference-java?tabs=consumption

Visual Studio Code での Remote 環境での開発:
https://code.visualstudio.com/docs/remote/remote-overview