Home

Apps

Blog

Privacy Policy

Flmelinkに記事を書いたら、自動でビルドするようにしたい。FlamelinkはWebhookに対応しているのだが無料プランだと使用できない。<br />
しかし、無料プランでもできる方法を考えた。
<ol>
	<li>Flamelinkで書き込み</li>
	<li>Firestoreでwriteトリガー発火</li>
	<li>CloudFunctionsでビルドトリガー発火</li>
	<li>CloudBuildでビルド</li>
	<li>FirebaseHostingにデプロイ</li>
</ol>
<br />
図にすると以下のようになる。<br />
<br />
<img alt="" src="https://firebasestorage.googleapis.com/v0/b/blog-2bc1d.appspot.com/o/flamelink%2Fmedia%2Fblog-diagram.png?alt=media&amp;token=1e652097-419f-47b2-abc1-b6a5c0b35f71" />
<hr />
<ol>
	<li>
	<h1>Flamelinkで書き込み</h1>
	</li>
</ol>
普通に書き込みするだけで次のステップに移りたい

<hr />
<ol start="2">
	<li>
	<h1>Firestoreでwriteトリガー発火</h1>
	</li>
</ol>
CloudFunctionでwriteトリガーを検知して、ビルドトリガーを発火させる。<br />
&nbsp;
<div>index.ts
<pre>
<code class="language-javascript">import * as functions from "firebase-functions";
import cloudbuild from "./cloudbuild";

const REGION = "asia-northeast1";

exports.modifyContent = functions.region(REGION).firestore
    .document("/fl_content/{content_id}")
    .onWrite((change, context) =&gt; {
        cloudbuild("blog-2bc1d", "build-page", "master");
    });
</code></pre>
</div>

<hr />
<ol start="3">
	<li>
	<h1>CloudFunctionsでビルドトリガー発火</h1>
	</li>
</ol>
CloudBuildでビルドトリガーを発火させている。<br />
<a href="https://github.com/googleapis/nodejs-cloudbuild/blob/master/samples/quickstart.js">https://github.com/googleapis/nodejs-cloudbuild/blob/master/samples/quickstart.js</a><br />
をちょっと変えただけ。<br />
あとはCloudBuildのコンソールでビルドトリガーを設定すればOK
<div>cloudbuild.ts
<pre>
<code class="language-javascript">"use strict";

// [START cloudbuild_quickstart]
/**
 * @param {string} projectId Your Google Cloud Platform project ID
 * @param {string} triggerId  UUID for build trigger.
 * @param {string} branchName  Branch to run build against.
 */
export default async function setBuildTrigger(
    projectId = "YOUR_PROJECT_ID", // Your Google Cloud Platform project ID
    triggerId = "YOUR_TRIGGER_ID", // UUID for build trigger.
    branchName = "BRANCH_TO_BUILD" // Branch to run build against.
) {
    // Imports the Google Cloud client library
    const { CloudBuildClient } = require("@google-cloud/cloudbuild");

    // Creates a client
    const cb = new CloudBuildClient();

    // Starts a build against the branch provided.
    const [resp] = await cb.runBuildTrigger({
        projectId,
        triggerId,
        source: {
            projectId,
            dir: "./",
            branchName,
        },
    });
    console.info(`triggered build for ${triggerId}`);
    const [build] = await resp.promise();

    const STATUS_LOOKUP = [
        "UNKNOWN",
        "Queued",
        "Working",
        "Success",
        "Failure",
        "Error",
        "Timeout",
        "Cancelled",
    ];
    for (const step of build.steps) {
        console.info(
            `step:\n\tname: ${step.name}\n\tstatus: ${STATUS_LOOKUP[build.status]}`
        );
    }
}
// [END cloudbuild_quickstart]

// quickstartはコマンドラインから実行するため以下コメントアウト
// const args = process.argv.slice(2);
// setBuildTrigger(...args).catch(console.error);
</code></pre>
</div>

<hr />
<ol start="4">
	<li>
	<h1>CloudBuildでビルド</h1>
	</li>
	<li>
	<h1>FirebaseHostingにデプロイ</h1>
	</li>
</ol>
以下のビルド構成ファイルをプロジェクトのルートに配置<br />
ビルドとデプロイが行われる
<div>cloudbuild.json
<pre>
<code class="language-javascript">{
  "steps": [
    {
      "name": "gcr.io/cloud-builders/npm",
      "args": [
        "install"
      ],
      "dir": "/workspace/functions"
    },
    {
      "name": "gcr.io/cloud-builders/npm",
      "args": [
        "run",
        "deploy"
      ],
      "dir": "/workspace/functions"
    }
  ]
}</code></pre>
</div>


1.Flamelinkで書き込み
2.Firestoreでwriteトリガー発火
3.CloudFunctionsでビルドトリガー発火
4.CloudBuildでビルド
5.FirebaseHostingにデプロイ

import * as functions from "firebase-functions";
import cloudbuild from "./cloudbuild";

const REGION = "asia-northeast1";

exports.modifyContent = functions.region(REGION).firestore
    .document("/fl_content/{content_id}")
    .onWrite((change, context) => {
        cloudbuild("blog-2bc1d", "build-page", "master");
    });
{
  "steps": [
    {
      "name": "gcr.io/cloud-builders/npm",
      "args": [
        "install"
      ],
      "dir": "/workspace/functions"
    },
    {
      "name": "gcr.io/cloud-builders/npm",
      "args": [
        "run",
        "deploy"
      ],
      "dir": "/workspace/functions"
    }
  ]
}

記事一覧

自動ビルド