Azure DevOps Pipelines で Nuxt.js アプリを Firebase に継続的にデプロイする

kheiakiyama.hateblo.jp

Nuxt.js で書いたアプリですが、デプロイが煩わしい状態でしたので、最近話題の Azure DevOps を使って継続的デプロイを設定しました。

Azure DevOps Pipelines について

まずは公式リンク。

azure.microsoft.com

なぜ Azure DevOps(Pipelines) を使うかというと、プライベートリポジトリを使う場合の CI/CD サービスで Travis CI や CircleCI を使うとそこそこの費用が発生するためです。
(私は GitHub はプライベートリポジトリを使っています)
ギョーム開発であれば有償サービスを使うべきかとは思いますが、Azure DevOps Pipelines は月1,800分の無償枠があります。(2018/9/14 現在)
個人開発で何かを作るにはこの枠を有効に使えるのではないでしょうか。

実装方法

Azure DevOps Pipelines

DevOps Pipelines では GUI で設定する方法とYAMLファイルで設定する方法がある。
GUI で作ったものは後からYAMLを確認できるので、まずは GUI から入るとよい。
ここでは結果のみ書く。

以下の yaml をリポジトリ直下に置き、Agent-pool は Hosted Ubuntu 1604 を使う。

azure-pipelines.yml

pool:
  vmImage: 'Ubuntu 16.04'
  
variables:
  firebaseToken: '********'

steps:
- script: |
   #!/bin/bash
   npm install firebase-tools firebase-functions firebase-admin
  displayName: 'Install firebase-cli'

- task: Npm@1
  displayName: 'npm install'
  inputs:
    verbose: false

- script: |
   #!/bin/bash
   npm run build
   npm run copyassets
   node_modules/.bin/firebase deploy --token $(firebaseToken)
  displayName: 'Run npm deploy'

パイプライン内では npm のグローバル環境下に Firebase CLI をインストールする権限がないため、firebase はローカルにインストールしています。
そのため firebase deploy はパス指定して動かす苦肉の策で実行しています。

このYAML についてのドキュメントはまだまだ充実してません。
サンプルコードが以下に紹介されており、GitHub を漁ると iOS や Android のサンプルも見つかるので参考になれば。

Create your first pipeline | Microsoft Docs

Node 部分

package.json

  "scripts": {
    "dev": "nuxt",
    "build": "npm run clean && nuxt build",
    "clean": "rm -rf dist && rm -rf functions/nuxt",
    "deploy": "npm run build && npm run copyassets && firebase deploy", // for local only
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "copyassets": "mkdir -p dist/assets && npm run copydist && npm run copystatic",
    "copydist": "cp -R functions/nuxt/dist/ dist/assets",
    "copystatic": "cp -R static/ dist"
  },

Nuxt.js 部分

nuxt.config.js

module.exports = {
  buildDir: "functions/nuxt",
  build: {
    publicPath: "/assets/",
  }

感想

Microsoft-Hosted Agent の Docker Image に Firebase CLI を入れる PullRequest 書いたら通るのでしょうか。
後で気が向いたら試してみようと思います。
GitHub - Microsoft/vsts-agent-docker: Visual Studio Team Services (VSTS) Agent Docker Images

Self-Hosted Agent を作るのは結構敷居が高い印象あるので、Travis CI のように Agent に使う Docker Image を指定できると一番理想的です。