Note

# CircleCIを用いたVuePressの自動ビルド+デプロイ

  • タイトルのとおりです

# はじめに

  • VuePressは毎回buildする必要があるので面倒

  • 誰かがCIを使って自動デプロイとか言ってたな

  • やってみるか

  • や　り　ま　し　た

# CircleCIのセッティング

  • インストール等のセッティングを行います
  • 本題を見たい方は, 本題まで飛んでください

# 初期設定

  • 大抵はつぎの公式ページに書かれています
  • 公式がちゃんとしているので書くことはあまりないですが, 流れだけざっとさらっていきます
  • 部分的に翻訳されているようです

# 1. 登録

# 2.ssh-keyの設定

注意

  • パスフレーズ付きのrsa鍵だとCircleCI側から認められないので注意してください
    • これに騙されました

# 3.CircleCI CLIツールのインストール

  • つぎの公式記事の通りに進めれば問題ないはずです

  • CircleCI CLIツールでは, つぎのようなことができます

    • CI config(.circleci/config.yml)のデバッグとvalidation
    • ローカルでのジョブ実行
    • CircleCIのAPI利用
    • CircleCI Orbs関連

  • インストールするコマンドだけ残しておきます

  • MacとLinuxでは次のコマンドでインストールできるようです

  • 念の為アップデートまで含めたコマンドを書いておきます

# install
$ curl -fLSs https://circle.ci/cli | bash 
# update
$ circleci update
$ circleci switch
  • インストールしている際に, permission deniedが発生することがあるようです
  • その時はつぎのようにコマンドを変更して対処してください

# .circleci/config.ymlファイルの作成

注意

  • インデントでerrorになることが多いです
  • 注意しましょう
    • これで小一時間溶かしました

# 作成したファイルのvalidation

  • つぎの公式記事の通りに進めれば問題ないはずです

  • 次のコマンドでvalidationができます

    • ただし, config.ymlは.circleci/config.ymlに配置しましょう
$ circleci config validate
# Config file at .circleci/config.yml is valid

# 本題

  • タイトルで触れている自動ビルド + デプロイの部分に入っていきます

  • 全体の流れはつぎのとおりです

  • 四角で囲まれた部分をCircleCIを用いて構築していきます

  • CircleCIにやってもらいたいことは, つぎの2つです

    • $ yarn src:buildの実行
    • 実行後にできた./docs以下のファイルをgh-pagesブランチに配置

  • しかし, いずれもnodeのパッケージをインストールしておく必要があります

  • その処理を書いてから, 先ほどの2つの処理を加えていきます

# 0. nodeのパッケージインストール

  • nodeのパッケージをインストールするためには, つぎのように書きます
  • restore_cacheとsave_cacheでnode_moduleのキャッシュを残しておくものです
// .circleci/config.yml
+ version: 2
+ jobs:
+   build:
+     docker:
+       - image: node:8.12
+     working_directory: ~/task4233/note
+     steps:
+       - checkout
+       - restore_cache:
+           key: yarn-{{ .Branch }}-{{ checksum "yarn.lock" }}
+       - run:
+           name: Install dependencies
+           command: yarn
+       - save_cache:
+           key: yarn-{{ .Branch }}-{{ checksum "yarn.lock" }}
+           paths:
+             - ./node_modules
+
+ workflows:
+   version: 2
+   build-deploy:
+     jobs:
+       - build

# 1. $ yarn src:buildの実行

  • これは簡単です
  • つぎのように, .circleci/config.ymlに追記します
// .circleci/config.yml
version: 2
jobs:
  build:
    docker:
      - image: node:8.12
    working_directory: ~/task4233/note
    steps:
      - checkout
      - restore_cache:
          key: yarn-{{ .Branch }}-{{ checksum "yarn.lock" }}
      - run:
          name: Install dependencies
          command: yarn
      - save_cache:
          key: yarn-{{ .Branch }}-{{ checksum "yarn.lock" }}
          paths:
            - ./node_modules
 +     - run:
 +         name: Build
 +         command: yarn src:build

workflows:
  version: 2
  build-deploy:
    jobs:
      - build

# 2. gh-pagesブランチに配置

  • そのようなスクリプトは存在していないので, スクリプトを作成して.circleci/config.ymlに追記します

# スクリプトの作成

  • gh-pagesブランチに./docs以下のファイルを配置するために, nodejsのgh-pagesパッケージを利用します
  • つぎのように新たにdeploy.jsを書きます
// deploy.js
+ var ghpages = require("gh-pages");
+
+ ghpages.publish("./docs", {
+     user: {
+         name: "{YOUR_NAME}",
+         email: "{YOUR_EMAIL}"
+     },
+     message: "Auto build and deploy [ci skip]"
+ }, function(err) {
+     if (err) {
+         console.log(err);
+         process.exit(1);
+     } else {
+         console.log("Successfully Delployed!");
+     }
+ });
  • 6,7行目は自身のものに変更してください
  • 9行目でわざわざmessageを記載しているのは, コミットメッセージに[ci skip]を付与することでgh-pagesブランチでCircleCIを動作させないためです
    • gh-pagesブランチは公開用ブランチなので, gh-pagesブランチではCircleCIを動作させません

# スクリプトを実行するコマンドの追記

  • このjsファイルを実行させるためのコマンドをpackage.jsonに追記します
  • 他の部分は私の設定なので, 自身のpackage.jsonに7行目の内容のみ追記してください
// package.json
{
    "name": "pg",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
+       "deploy": "node ./deploy.js",
        "src:dev": "vuepress dev src --port 3030",
        "src:build": "rm -rf ./docs && vuepress build src"
    },
    "repository": {
        "type": "git",
        "url": "git+https://github.com/task4233/note.git"
    },
    "author": "task4233",
    "license": "ISC",
    "devDependencies": {
        "markdown-it": "^8.4.2",
        "markdown-it-katex": "^2.0.3",
        "markdown-it-task-lists": "^2.1.1",
        "vuepress": "^0.14.8"
    },
    "dependencies": {
        "gh-pages": "^2.0.1"
    }
}

# .circleci/config.ymlへの追記

  • コマンドが完成したので, .circleci/config.ymlに追記します
  • つぎのように追記します
version: 2
jobs:
  build:
    docker:
      - image: node:8.12
    working_directory: ~/task4233/note
    steps:
      - checkout
      - restore_cache:
          key: yarn-{{ .Branch }}-{{ checksum "yarn.lock" }}
      - run:
          name: Install dependencies
          command: yarn
      - save_cache:
          key: yarn-{{ .Branch }}-{{ checksum "yarn.lock" }}
          paths:
            - ./node_modules
      - run:
          name: Build
          command: yarn src:build
 +    - run:
 +        name: Deploy
 +        command: yarn deploy

workflows:
  version: 2
  build-deploy:
    jobs:
      - build

# 書いた.circleci/config.ymlのvalidate

  • githubにpushしてからconfig.ymlのせいでエラーがでると悲しくなるので, ローカルでvalidateします
  • つぎのコマンドでvalidateできます
$ circleci config validate -c {config.ymlまでのファイルパス}
# circleci config validate -c ./.circleci/config.yml
# Config file at ./.circleci/config.yml is valid.
Last Updated: 8ヶ月前