Rails + Webpackerを使ったアプリにCircleCIを導入しようとしたが、環境構築を完了するまでに17回ものトライをし、Failedしまくったので自省を込めてメモ

環境

各バージョン

Ruby：2.4.1
Rails：5.1.4
Webpacker：2.0
yarn：v0.24.5
CircleCI：2.0

ディレクトリ構造

root/
   ├ .bundle/
   ├ .circleci/
   │ └  config.yml    ←ここ
   ├ app/
   ├ bin/
   .
   .
   └ yarn.lock

1回目：CircleCIにGithubリポジトリを登録した...

プロジェクトに設定を書く前にサービス登録 + プロジェクトを登録した。

あれ、もう実行されてる...

$ npm install
npm WARN package.json @ No repository field.
npm WARN package.json @ No license field.
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
WARN engine dotenv@4.0.0: wanted: {"node":">=4.6.0"} (current: {"node":"4.2.6","npm":"2.14.12"})
・
・
npm ERR! Please include the following file with any support request:
npm ERR!     /home/ubuntu/myapp/npm-debug.log
npm install returned exit code 1
Action failed: npm install

ビルド前の説明を読んだらこのような記述が

Create a folder named .circleci and add a file config.yml

Start buildingする前にプロジェクトにconfigファイル追加しないとダメだったみたい。

2～8回目：そもそもyamlの書き方をよくわかってなかった...

何も理解しないままコピペするのも良くないと思い、自力で設定ファイルを書き上げてみる事に。
CircleCI 2.0 Documentation

実現したい動きは下の通り

CircleCIをrunさせる環境はdocker
必要なgemをbundle install
DB環境を構築、テーブルを作成
rspecでテストが通ればビルド完了！

ビルドの流れを把握するためにまずは1、2までを実行することにした。

この時に書いた設定がこちら

.circleci/config.yml

version: 2
jobs:
   build:
      parallelism: 3
      docker:
         - image: circleci/ruby:2.4.1-node
         # myappはリポジトリ名を記入
         working_directory: ~/myapp
         environment:
            PGHOST: 127.0.0.1
            PGUSER: circleci-demo-ruby
            RAILS_ENV: test

    steps:
      - checkout

      # Restore bundle cache
      - type: cache-restore
        name: Restore bundle cache
        key: rails-demo-bundle-{{ checksum "Gemfile.lock" }}

      - run:
          name: Bundle Install
          command: bundle install --path vendor/bundle

      # Store bundle cache
      - type: cache-save
        name: Save bundle cache
        key: rails-demo-bundle-{{ checksum 'Gemfile.lock' }}
        paths: vendor/bundle

      # Database setup
      - run:
          name: Database setup
          command: |
            bundle exec bin/rails db:create
            bundle exec rails db:migrate

      # Run rspec in parallel
      - type: shell
          command: |
            bundle exec rspec --profile 10 \
                              --out test_results/rspec.xml \
                              --format progress \
                              $(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)

すると、エラーが発生

Configuration errors: 2 errors occurred:
Error parsing config file: yaml: line 6: did not find expected '-' indicator
Cannot find a job named `build` to run in the `jobs:` section of your configuration file.
If you expected a workflow to run, check your config contains a top-level key called 'workflows:'

一つ目はあるべきはずの-が見つからないという内容。
つまり、yamlの書き方に問題があった。

.circleci/config.yml

docker:
   - image: circleci/ruby:2.4.1-node
     working_directory: ~/myapp
     environment:
       PGHOST: 127.0.0.1
       PGUSER: circleci-demo-ruby
       RAILS_ENV: test

でも、2つ目のbuild:が見つからないとは何だ？？？？
書き方はあってるはずなのに...？？？？

調べても解答らしい解答が見つからなかったので現時点で明らかになっている間違いを書き直した。

environment:をインデントし、image:下に置く
working_directory:はdocker:下に属さないので外す
インデント時のスペースの取り方がバラバラなので整列させる
parallelisum:を利用するコンテナの数に合わせる

.circleci/config.yml

jobs:
  build:
+   parallelism: 1
+   working_directory: ~/myapp
    docker:
      - image: circleci/ruby:2.4.1-node
+      environment:
+        PGHOST: 127.0.0.1
+        PGUSER: circleci-demo-ruby
+        RAILS_ENV: test

これでもう一度ビルドすると上のエラーが全部消えた！
....でも二つ目のエラーは結局なにが原因だったのかわからず終いに。後で調べてみることにする。

9～15回目：データベースに接続できない...

ここからデータベースに接続し、3と4の手順を実行する。

.circleci/config.yml

・
・
  docker:
    - image: circleci/ruby:2.4.1-node
      environment:
        PGHOST: 127.0.0.1
        PGUSER: circleci-demo-ruby
        RAILS_ENV: test
+   - image: circleci/postgres:9.4.12-alpine
+     environment: 
+       POSTGRES_USER: ubuntu
+       POSTGRES_DB: myapp_test
・
・
+     # Database setup
+     - run:
+         name: Database setup
+         command: |
+           bundle exec bin/rails db:create
+           bundle exec rails db:migrate

+     # Run rspec in parallel
+     - type: shell
+       command: |
+         bundle exec rspec --profile 10 \
+                           --out test_results/rspec.xml \
+                           --format progress \
+                           $(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)

9回目：docker.imageが見つからない

そして、別のエラーが発生した

Starting container circleci/postgres:9.4.12-alpine - POSTGRES_USER=ubuntu - POSTGRES_DB=myapp_test
  image cache not found on this host, downloading circleci/postgres:9.4.12-alpine - POSTGRES_USER=ubuntu - POSTGRES_DB=myapp_test
invalid reference format

調べてみると、使おうとしていたビルダpostgresql9.4.12が存在しないとの事なので、下記リンクから最新のバージョンを調べ、引用した。
https://hub.docker.com/_/postgres/

※2017年12月9日時点での最新バージョンは10.1

.circleci/config.yml

 - image: circleci/postgres:10.1-alpine

10回目～15回目：roleがないと怒られる

ここが一番手間取った...
bundle installまでは無事に実行できたが、またもエラー発生

FATAL:  role "username" does not exist
Couldn't create database for {"adapter"=>"postgresql", "encoding"=>"utf8", "pool"=>5, "username"=>"username", "password"=>"password", "host"=>"localhost", "database"=>"myapp_test"}
rails aborted!
ActiveRecord::NoDatabaseError: FATAL:  role "username" does not exist

ローカル開発環境中のPostgreSQLにアクセスできるユーザ名をRailsのconfig/database.ymlでも反映させていたが、どうやら使えないらしい。
PGUSER,POSTGRES_USERをubuntuにしても同様のエラーが発生した為、最初期から存在するrootに変更し、なんとか対応することができた

16回目：webpackコマンドがない...

yarn installを忘れていたので追加。

[Webpacker] Compilation Failed
yarn run v1.0.2
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

warning package.json: No license field
warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.
error Command "webpack" not found.

Exited with code 1

.circleci/config.yml

+     # Restore yarn cache
+     - type: cache-restore
+       name: Restore bundle cache
+       key: rails-demo-bundle-{{ checksum "yarn.lock" }}

+     - run:
+         name: yarn Install
+         command: yarn install

+     # Store yarn cache
+     - type: cache-save
+       name: Save bundle cache
+       key: rails-demo-bundle-{{ checksum 'yarn.lock' }}
+       paths: .yarn-cache

17回目：そして...

ビルド完了！

最終的なconfig設定は以下のようになった

.circleci/config.yml

version: 2
jobs:
 build:
   parallelism: 1
   working_directory: ~/myapp
   docker:
     - image: circleci/ruby:2.4.1-node
       environment:
         PGHOST: 127.0.0.1
         PGUSER: root
         RAILS_ENV: test
     - image: circleci/postgres:10.1-alpine
       environment:
         POSTGRES_USER: root
         POSTGRES_DB: myapp_test
   steps:
     - checkout

     # Restore bundle cache
     - type: cache-restore
       name: Restore bundle cache
       key: rails-demo-bundle-{{ checksum "Gemfile.lock" }}

     - run:
         name: Bundle Install
         command: bundle install --path vendor/bundle

     # Store bundle cache
     - type: save-cache
       name: Store bundle cache
       key: rails-demo-bundle-{{ checksum "Gemfile.lock" }}
       paths: vendor/bundle

     # Restore yarn cache
     - type: cache-restore
       name: Restore bundle cache
       key: rails-demo-bundle-{{ checksum "yarn.lock" }}

     - run:
         name: yarn Install
         command: yarn install

     # Store yarn cache
     - type: cache-save
       name: Save bundle cache
       key: rails-demo-bundle-{{ checksum 'yarn.lock' }}
       paths: .yarn-cache

     # Database setup
     - run:
         name: Database setup
         command: |
           bundle exec bin/rails db:create
           bundle exec rails db:migrate

     # Run rspec in parallel
     - type: shell
       command: |
         bundle exec rspec --profile 10 \
                           --out test_results/rspec.xml \
                           --format progress \
                           $(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)

反省点

ドキュメントを読み、各設定が何を意味するのかを把握すべき
データベースに関する知識(特にPostgreSQL)を深めるべき(特にconfig中のPostgreSQLユーザをroot以外に設定したい)

メール受信欄がとんでもないことに...