システム パッケージのチュートリアルを使用する

gcloud のデフォルトを設定する

Cloud Run サービスを gcloud のデフォルトに構成するには:

1. デフォルト プロジェクトを設定します。

   gcloud config set project PROJECT_ID

   PROJECT_ID は、このチュートリアルで作成したプロジェクトの名前に置き換えます。

2. 選択したリージョン向けに gcloud を構成します。

   gcloud config set run/region REGION

   REGION は、任意のサポートされている Cloud Run のリージョンに置き換えます。

サンプルコードを取得する

使用するコードサンプルを取得するには:

1. ローカルマシンにサンプルアプリのリポジトリのクローンを作成します。

   Node.js

   git clone https://github.com/GoogleCloudPlatform/nodejs-docs-samples.git

   または、zip 形式のサンプルをダウンロードし、ファイルを抽出してもかまいません。

   Python

   git clone https://github.com/GoogleCloudPlatform/python-docs-samples.git

   または、zip 形式のサンプルをダウンロードし、ファイルを抽出してもかまいません。

   Go

   git clone https://github.com/GoogleCloudPlatform/golang-samples.git

   または、zip 形式のサンプルをダウンロードし、ファイルを抽出してもかまいません。

   Java

   git clone https://github.com/GoogleCloudPlatform/java-docs-samples.git

   または、zip 形式のサンプルをダウンロードし、ファイルを抽出してもかまいません。

2. Cloud Run のサンプルコードが含まれているディレクトリに移動します。

   Node.js

   cd nodejs-docs-samples/run/system-package/

   Python

   cd python-docs-samples/run/system-package/

   Go

   cd golang-samples/run/system_package/

   Java

   cd java-docs-samples/run/system-package/

アーキテクチャを可視化する

基本的なアーキテクチャは次のようになります。

ユーザーが HTTP リクエストを Cloud Run サービスに送信し、このサービスが Graphviz ユーティリティを実行して、リクエストを画像に変換します。この画像が HTTP レスポンスとしてユーザーに配信されます。

コードについて

Dockerfile で環境構成を定義する

Dockerfile は、サービスで使用する言語と基礎となるオペレーティング環境（Ubuntu など）によって異なります。

Build and Deploy Quickstart では、他のサービスの Dockerfile を作成する際の出発点として利用できるよう、さまざまな Dockerfiles を紹介しています。

このサービスでは、デフォルト以外のシステム パッケージを追加する必要があります。

1. エディタで Dockerfile を開きます。

2. Dockerfile RUN ステートメントを探します。このステートメントにより、任意のシェルコマンドを実行して環境を変更できます。Dockerfile に、複数の FROM ステートメントの探索で識別された複数のステージがある場合、そのステートメントは最終ステージにあります。

   必要なパッケージとそのインストール方法は、コンテナで宣言されているオペレーティング システムによって異なります。

   ご使用のオペレーティング システムまたはベースイメージの説明については、適切なタブをクリックして確認してください。

   Debian / Ubuntu

   RUN apt-get update -y && apt-get install -y \
     graphviz \
     && apt-get clean

   Alpine

   Alpine は、フォント サポート用に 2 番目のパッケージを必要とします。

   RUN apk --no-cache add graphviz ttf-ubuntu-font-family

   コンテナ イメージのオペレーティング システムを確認するには、FROM ステートメントで名前を確認するか、ベースイメージの README を確認します。たとえば、node から拡張する場合、Docker Hub でドキュメントと親 Dockerfile を見つけることができます。

3. ローカルでの docker build または Cloud Build を使用してイメージをビルドし、カスタマイズをテストします。

受信リクエストを処理する

サンプル サービスは、受信 HTTP リクエストのパラメータを使用して、適切な dot ユーティリティ コマンドを実行するシステムコールを呼び出します。

以下の HTTP ハンドラでは、グラフの説明の入力パラメータが dot クエリ文字列変数から抽出されます。

クエリ文字列で使用するために、グラフの説明に含まれている文字の URL エンコードが必要になる場合があります。

app.get('/diagram.png', (req, res) => {
  try {
    const image = createDiagram(req.query.dot);
    res.setHeader('Content-Type', 'image/png');
    res.setHeader('Content-Length', image.length);
    res.setHeader('Cache-Control', 'public, max-age=86400');
    res.send(image);
  } catch (err) {
    console.error(`error: ${err.message}`);
    const errDetails = (err.stderr || err.message).toString();
    if (errDetails.includes('syntax')) {
      res.status(400).send(`Bad Request: ${err.message}`);
    } else {
      res.status(500).send('Internal Server Error');
    }
  }
});

@app.route("/diagram.png", methods=["GET"])
def index():
    """Takes an HTTP GET request with query param dot and
    returns a png with the rendered DOT diagram in a HTTP response.
    """
    try:
        image = create_diagram(request.args.get("dot"))
        response = make_response(image)
        response.headers.set("Content-Type", "image/png")
        return response

    except Exception as e:
        print(f"error: {e}")

        # If no graphviz definition or bad graphviz def, return 400
        if "syntax" in str(e):
            return f"Bad Request: {e}", 400

        return "Internal Server Error", 500

// diagramHandler renders a diagram using HTTP request parameters and the dot command.
func diagramHandler(w http.ResponseWriter, r *http.Request) {
	if r.Method != http.MethodGet {
		log.Printf("method not allowed: %s", r.Method)
		http.Error(w, fmt.Sprintf("HTTP Method %s Not Allowed", r.Method), http.StatusMethodNotAllowed)
		return
	}

	q := r.URL.Query()
	dot := q.Get("dot")
	if dot == "" {
		log.Print("no graphviz definition provided")
		http.Error(w, "Bad Request", http.StatusBadRequest)
		return
	}

	// Cache header must be set before writing a response.
	w.Header().Set("Cache-Control", "public, max-age=86400")

	input := strings.NewReader(dot)
	if err := createDiagram(w, input); err != nil {
		log.Printf("createDiagram: %v", err)
		// Do not cache error responses.
		w.Header().Del("Cache-Control")
		if strings.Contains(err.Error(), "syntax") {
			http.Error(w, "Bad Request: DOT syntax error", http.StatusBadRequest)
		} else {
			http.Error(w, "Internal Server Error", http.StatusInternalServerError)
		}
	}
}

get(
    "/diagram.png",
    (req, res) -> {
      InputStream image = null;
      try {
        String dot = req.queryParams("dot");
        image = createDiagram(dot);
        res.header("Content-Type", "image/png");
        res.header("Content-Length", Integer.toString(image.available()));
        res.header("Cache-Control", "public, max-age=86400");
      } catch (Exception e) {
        if (e.getMessage().contains("syntax")) {
          res.status(400);
          return String.format("Bad Request: %s", e.getMessage());
        } else {
          res.status(500);
          return "Internal Server Error";
        }
      }
      return image;
    });

内部サーバーエラーと無効なユーザー入力を区別する必要があります。このサンプル サービスは、エラー メッセージにユーザー入力の問題を示す文字列 syntax が含まれていない限り、すべての dot コマンドライン エラーに対して内部サーバーエラーを返します。

図を生成する

図を生成するコアロジックは、dot コマンドライン ツールを使用して、グラフの説明の入力パラメータを PNG 形式の図に変換します。

// Generate a diagram based on a graphviz DOT diagram description.
const createDiagram = dot => {
  if (!dot) {
    throw new Error('syntax: no graphviz definition provided');
  }

  // Adds a watermark to the dot graphic.
  const dotFlags = [
    '-Glabel="Made on Cloud Run"',
    '-Gfontsize=10',
    '-Glabeljust=right',
    '-Glabelloc=bottom',
    '-Gfontcolor=gray',
  ].join(' ');

  const image = execSync(`/usr/bin/dot ${dotFlags} -Tpng`, {
    input: dot,
  });
  return image;
};

def create_diagram(dot):
    """Generates a diagram based on a graphviz DOT diagram description.

    Args:
        dot: diagram description in graphviz DOT syntax

    Returns:
        A diagram in the PNG image format.
    """
    if not dot:
        raise Exception("syntax: no graphviz definition provided")

    dot_args = [  # These args add a watermark to the dot graphic.
        "-Glabel=Made on Cloud Run",
        "-Gfontsize=10",
        "-Glabeljust=right",
        "-Glabelloc=bottom",
        "-Gfontcolor=gray",
        "-Tpng",
    ]

    # Uses local `dot` binary from Graphviz:
    # https://graphviz.gitlab.io
    image = subprocess.run(
        ["dot"] + dot_args, input=dot.encode("utf-8"), stdout=subprocess.PIPE
    ).stdout

    if not image:
        raise Exception("syntax: bad graphviz definition provided")
    return image

// createDiagram generates a diagram image from the provided io.Reader written to the io.Writer.
func createDiagram(w io.Writer, r io.Reader) error {
	stderr := new(bytes.Buffer)
	args := []string{
		"-Glabel=Made on Cloud Run",
		"-Gfontsize=10",
		"-Glabeljust=right",
		"-Glabelloc=bottom",
		"-Gfontcolor=gray",
		"-Tpng",
	}
	cmd := exec.Command("/usr/bin/dot", args...)
	cmd.Stdin = r
	cmd.Stdout = w
	cmd.Stderr = stderr

	if err := cmd.Run(); err != nil {
		return fmt.Errorf("exec(%s) failed (%w): %s", cmd.Path, err, stderr.String())
	}

	return nil
}

// Generate a diagram based on a graphviz DOT diagram description.
public static InputStream createDiagram(String dot) {
  if (dot == null || dot.isEmpty()) {
    throw new NullPointerException("syntax: no graphviz definition provided");
  }
  // Adds a watermark to the dot graphic.
  List<String> args = new ArrayList<>();
  args.add("/usr/bin/dot");
  args.add("-Glabel=\"Made on Cloud Run\"");
  args.add("-Gfontsize=10");
  args.add("-Glabeljust=right");
  args.add("-Glabelloc=bottom");
  args.add("-Gfontcolor=gray");
  args.add("-Tpng");

  StringBuilder output = new StringBuilder();
  InputStream stdout = null;
  try {
    ProcessBuilder pb = new ProcessBuilder(args);
    Process process = pb.start();
    OutputStream stdin = process.getOutputStream();
    stdout = process.getInputStream();
    // The Graphviz dot program reads from stdin.
    Writer writer = new OutputStreamWriter(stdin, "UTF-8");
    writer.write(dot);
    writer.close();
    process.waitFor();
  } catch (Exception e) {
    System.out.println(e);
  }
  return stdout;
}

安全なサービスを設計する

dot ツールには、ウェブサービスの脆弱性が存在する可能性があります。このリスクを軽減するには、コンテナ イメージを定期的に再ビルドし、graphviz パッケージの最新バージョンが使用されるようにします。

ユーザーの入力をコマンドライン パラメータとして受け入れるように現在のサンプルを拡張する場合は、コマンド インジェクション攻撃の対策を講じる必要があります。たとえば、次のような方法でインジェクション攻撃を防ぎます。

• サポートされているパラメータの辞書と入力をマッピングする
• 入力値を検証し、既知の安全な範囲内にあることを確認する（正規表現などを使用）
• シェル構文が評価されないように入力をエスケープする

よく使用される権限が付与されているデフォルトのアカウントではなく、Google Cloud サービスを使用する権限が付与されていないサービス アカウントでサービスをデプロイすることで、潜在的な脆弱性をさらに軽減できます。そのため、このチュートリアルの手順では、新しいサービス アカウントを作成して使用します。

コードの配布

コードを配布するには、Cloud Build でビルドし、Artifact Registry にアップロードして Cloud Run にデプロイします。

1. Artifact Registry を作成します。

   gcloud artifacts repositories create REPOSITORY \
       --repository-format docker \
       --location REGION

   次のように置き換えます。

   • REPOSITORY は、リポジトリの一意の名前に置き換えます。プロジェクト内のリポジトリのロケーションごとに、リポジトリ名は一意でなければなりません。
   • REGION は、Artifact Registry リポジトリに使用する Google Cloud リージョンに置き換えます。

2. 次のコマンドを実行してコンテナをビルドし、Artifact Registry に公開します。

   Node.js

   gcloud builds submit --tag REGION-docker.pkg.dev/PROJECT_ID/REPOSITORY/graphviz

   PROJECT_ID は Google Cloud プロジェクト ID、graphviz はサービスに付ける名前です。

   ビルドが成功すると、ID、作成時間、画像の名前を含む SUCCESS メッセージが表示されます。イメージが Artifact Registry に保存されます。このイメージは必要に応じて再利用できます。

   Python

   gcloud builds submit --tag REGION-docker.pkg.dev/PROJECT_ID/REPOSITORY/graphviz

   PROJECT_ID は Google Cloud プロジェクト ID、graphviz はサービスに付ける名前です。

   ビルドが成功すると、ID、作成時間、画像の名前を含む SUCCESS メッセージが表示されます。イメージが Artifact Registry に保存されます。このイメージは必要に応じて再利用できます。

   Go

   gcloud builds submit --tag REGION-docker.pkg.dev/PROJECT_ID/REPOSITORY/graphviz

   PROJECT_ID は Google Cloud プロジェクト ID、graphviz はサービスに付ける名前です。

   ビルドが成功すると、ID、作成時間、画像の名前を含む SUCCESS メッセージが表示されます。イメージが Artifact Registry に保存されます。このイメージは必要に応じて再利用できます。

   Java

   このサンプルでは、Jib を使用して一般的な Java ツールにより Docker イメージをビルドします。Jib は、Dockerfile や Docker をインストールせずにコンテナのビルドを最適化します。Jib を使用して Java コンテナを構築する方法の詳細を確認します。

   1. Dockerfile を使用して、インストールしたシステム パッケージでベースイメージの構成とビルドを行い、Jib のデフォルト ベースイメージを上書きします。

      # Use the Official eclipse-temurin image for a lean production stage of our multi-stage build.
      # https://hub.docker.com/_/eclipse-temurin/
      FROM eclipse-temurin:17.0.12_7-jre
      
      RUN apt-get update -y && apt-get install -y \
        graphviz \
        && apt-get clean

      gcloud builds submit --tag REGION-docker.pkg.dev/PROJECT_ID/REPOSITORY/graphviz-base

      ここで PROJECT_ID は、Google Cloud プロジェクト ID です。

   2. Docker を承認して Artifact Registry に push するには、gcloud 認証ヘルパーを使用します。

      gcloud auth configure-docker

   3. Jib で最終的なコンテナを作成し、Artifact Registry で公開します。

      <plugin>
        <groupId>com.google.cloud.tools</groupId>
        <artifactId>jib-maven-plugin</artifactId>
        <version>3.4.0</version>
        <configuration>
          <from>
            <image>gcr.io/PROJECT_ID/graphviz-base</image>
          </from>
          <to>
            <image>gcr.io/PROJECT_ID/graphviz</image>
          </to>
        </configuration>
      </plugin>

      mvn compile jib:build \
       -Dimage=REGION-docker.pkg.dev/PROJECT_ID/REPOSITORY/graphviz \
       -Djib.from.image=REGION-docker.pkg.dev/PROJECT_ID/REPOSITORY/graphviz-base

      ここで PROJECT_ID は、Google Cloud プロジェクト ID です。

3. 以下を使用してデプロイします。

   gcloud

   1. 新しいサービス アカウントを作成します。コードとコードが使用するシステム パッケージは、このサービス アカウントに付与されている Google Cloud サービスのみを使用できます。

      gcloud iam service-accounts create SA_NAME

      ここで、SA_NAME はこのサービス アカウントに付ける名前です。コードにエラーや脆弱性が存在する場合、コードは他のすべての Google Cloud プロジェクト リソースにアクセスできません。
   2. サービス アカウントを指定してコードをデプロイします。

      gcloud run deploy graphviz-web --service-account SA_NAME@PROJECT_ID.iam.gserviceaccount.com  --image REGION-docker.pkg.dev/PROJECT_ID/REPOSITORY/graphviz

      ここで、PROJECT_ID は Google Cloud プロジェクト ID、SA_NAME は作成したサービス アカウントの名前、graphviz は上記のコンテナの名前、graphviz-web はサービスの名前です。「allow unauthenticated」プロンプトに「Y」と答えます。IAM ベースの認証の詳細については、アクセスの管理をご覧ください。
   3. デプロイが完了するまで待ちます。これには 30 秒ほどかかる場合があります。 成功すると、コマンドラインにサービス URL が表示されます。

   Terraform

   Terraform 構成を適用または削除する方法については、基本的な Terraform コマンドをご覧ください。

   次の Terraform コードは Cloud Run サービスを作成します。

   resource "google_service_account" "graphviz" {
     account_id   = "graphviz"
     display_name = "GraphViz Tutorial Service Account"
   }
   
   resource "google_cloud_run_v2_service" "default" {
     name     = "graphviz-example"
     location = "us-central1"
   
     deletion_protection = false # set to "true" in production
   
     template {
       containers {
         # Replace with the URL of your graphviz image
         #   gcr.io/<YOUR_GCP_PROJECT_ID>/graphviz
         image = "us-docker.pkg.dev/cloudrun/container/hello"
       }
   
       service_account = google_service_account.graphviz.email
     }
   }

   IMAGE_URL は、コンテナ イメージへの参照（us-docker.pkg.dev/cloudrun/container/hello:latest など）に置き換えます。Artifact Registry を使用する場合は、リポジトリ REPO_NAME がすでに作成されている必要があります。URL の形式は LOCATION-docker.pkg.dev/PROJECT_ID/REPO_NAME/PATH:TAG です。

   次の Terraform コードは Cloud Run サービスを公開します。

   # Make Cloud Run service publicly accessible
   resource "google_cloud_run_service_iam_member" "allow_unauthenticated" {
     service  = google_cloud_run_v2_service.default.name
     location = google_cloud_run_v2_service.default.location
     role     = "roles/run.invoker"
     member   = "allUsers"
   }

4. サービスにコードの更新をデプロイする場合は、上記のステップを繰り返します。サービスをデプロイするたびに、リビジョンが作成されます。準備ができると、トラフィックの送信が自動的に開始します。

試してみる

リクエスト ペイロードで DOT 構文の説明を含む HTTP POST リクエストを送信し、サービスを試してみましょう。

1. サービスに HTTP リクエストを送信します。

   ブラウザの URL バーに URL をコピーして [SERVICE_DOMAIN] を更新します。

   https://SERVICE_DOMAIN/diagram.png?dot=digraph Run { rankdir=LR Code -> Build -> Deploy -> Run }

   生成された図はウェブページに埋め込むことができます。

   <img src="https://SERVICE_DOMAIN/diagram.png?dot=digraph Run { rankdir=LR Code -> Build -> Deploy -> Run }" />

2. Chrome などの PNG ファイルをサポートするアプリケーションで、結果の diagram.png ファイルを開きます。

   次のようになります。

   

既製の図の説明の小コレクションを調べることができます。

1. 選択した .dot ファイルのコンテンツをコピーします。

2. サービスに HTTP リクエストを送信します。

   ブラウザの URL バーに URL をコピーします。

   https://SERVICE_DOMAIN/diagram.png?dot=SELECTED DOTFILE CONTENTS