Nuxt.js で書いたアプリですが、デプロイが煩わしい状態でしたので、最近話題の Azure DevOps を使って継続的デプロイを設定しました。
Azure DevOps Pipelines について
まずは公式リンク。
なぜ 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 を指定できると 一番理想的です。
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発
- 作者: 花谷拓磨
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/10/19
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
