OSSコントリビューションを始めてみようと思い、以前から興味のあった covid-19 のレポジトリを clone して立ち上げてみました。
ちょっとした js/ts や Vue.js のコードは書けるものの、それ以外のフロントエンドの世界は基本的に未知の世界なので、私にできることがあるのかどうか、正直自信がないです。
といっても、貢献の仕方がきちんと記載されていることや、現在コミュニティが活発に動いており、いざとなればサポートが期待できそうなこと、そして何より母国語でコミュニーケーションが取れるコミュニティが存在していることが重要だと思ったので、開発の難易度はともかく取っ掛かりとしては非常に魅力的に見えました。とりあえず開発環境を立ち上げてみて、それからやれそうな issue を探してみようと思いました。
...が、最初の開発環境で出鼻をくじかれてしまったので、その履歴をメモしてみます。同じようになにか手を動かしてみたい、と考えている方になら、まあ、多少は役に立つこともあるでしょう。
前提
docker-compose で環境を立ち上げる人向け
手順は こちら
対応履歴
ローカルで docker-compose up --build を実行すると、以下のように怒られます。
# docker-compose up --build
Building app
Step 1/9 : FROM node:10.19-alpine
10.19-alpine: Pulling from library/node
aad63a933944: Pull complete
17551d40f9c7: Pull complete
1d4f35a66b6c: Pull complete
d4192b8fc2e1: Pull complete
Digest: sha256:9a88e3bc3f845b74d2fd8adcbc64608736a8be4a3e9dc7aa34fa743e3677a552
Status: Downloaded newer image for node:10.19-alpine
---> 34a10d47f150
Step 2/9 : ENV PROJECT_ROOTDIR /app/
---> Running in fa15b08cab2e
Removing intermediate container fa15b08cab2e
---> e7546315f07c
Step 3/9 : WORKDIR $PROJECT_ROOTDIR
---> Running in d7d39ac9e544
Removing intermediate container d7d39ac9e544
---> c41f52edd3a7
Step 4/9 : COPY package.json yarn.lock $PROJECT_ROOTDIR
---> 49fc6fa87357
Step 5/9 : RUN yarn install
---> Running in 7c8341d4c80e
yarn install v1.21.1
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
warning sha.js@2.4.11: Invalid bin entry for "sha.js" (in "sha.js").
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
warning "@nuxtjs/eslint-config > eslint-plugin-import@2.19.1" has incorrect peer dependency "eslint@2.x - 6.x".
warning "@nuxtjs/eslint-config > eslint-plugin-vue@6.2.2" has incorrect peer dependency "eslint@^5.0.0 || ^6.0.0".
warning "@nuxtjs/eslint-config > eslint-plugin-unicorn > eslint-template-visitor@1.1.0" has incorrect peer dependency "eslint@^6.4.0".
warning "@nuxtjs/eslint-config-typescript > @typescript-eslint/eslint-plugin@2.34.0" has incorrect peer dependency "eslint@^5.0.0 || ^6.0.0".
warning "@nuxtjs/eslint-config-typescript > @typescript-eslint/parser@2.34.0" has incorrect peer dependency "eslint@^5.0.0 || ^6.0.0".
warning " > vue-axe@2.3.1" has incorrect peer dependency "axe-core@3.5.3".
[5/5] Building fresh packages...
success Saved lockfile.
Done in 66.08s.
Removing intermediate container 7c8341d4c80e
---> aa6515cbd52e
Step 6/9 : COPY . $PROJECT_ROOTDIR
---> 8248334cb30d
Step 7/9 : EXPOSE 3000
---> Running in eb00ab759a12
Removing intermediate container eb00ab759a12
---> 978632ad8767
Step 8/9 : ENV HOST 0.0.0.0
---> Running in 51f509d2eacd
Removing intermediate container 51f509d2eacd
---> d206597bf10d
Step 9/9 : CMD ["yarn", "dev"]
---> Running in 18740a7574bb
Removing intermediate container 18740a7574bb
---> 87b818972363
Successfully built 87b818972363
Successfully tagged covid19_app:latest
Recreating covid19 ... done
Attaching to covid19
yarn run v1.21.1
$ cross-env NODE_ENV=development GENERATE_ENV=development nuxt-ts
covid19 | start Loading module
covid19 | ℹ PurgeCSS is not enabled because you are in dev mode
covid19 |
covid19 | ╭─────────────────────────────────────────────╮
covid19 | │ │
covid19 | │ Nuxt.js v2.11.0 │
covid19 | │ Running in development mode (universal) │
covid19 | │ │
covid19 | │ Listening on: http://172.22.0.2:3000/ │
covid19 | │ │
covid19 | ╰─────────────────────────────────────────────╯
covid19 |
^[[18;148Rcovid19 | ℹ Preparing project for development
covid19 | ℹ Initial build may take a while
covid19 | ✔ Builder initialized
covid19 | ✔ Nuxt files generated
covid19 | ✖ Client
covid19 | Compiled with some errors in 6.00m
covid19 |
covid19 | ✔ Server
covid19 | Compiled successfully in 6.06m
covid19 |
covid19 | ℹ Starting type checking service...
covid19 | ℹ Using 1 worker with 2048MB memory limit
covid19 | ℹ No type errors found
covid19 | ℹ Version: typescript 3.8.3
covid19 | ℹ Time: 21903ms
covid19 |
covid19 | ERROR Failed to compile with 1 errors
covid19 |
covid19 | This dependency was not found:
covid19 |
covid19 | * dayjs/plugin/duration in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vuetify-loader/lib/loader.js??ref--19-0!./node_modules/vue-loader/lib??vue-loader-options!./components/cards/TestedNumberCard.vue?vue&type=script&lang=js&
covid19 |
covid19 | To install it, you can run: npm install --save dayjs/plugin/duration
covid19 | ℹ Waiting for file changes
covid19 | ℹ Memory usage: 917 MB (RSS: 1.19 GB)
Cannot find module ... と出ています。これは既知の問題で、 Cannot find module **** と怒られた時 に対応方法が書かれているので、いったんプロセスを止めてそれに従います。
docker-compose run --rm app yarn install
再度、 docker-compose up を実行します。
docker-compose up --build
以下のようなログが出ます。
# docker-compose up --build
Building app
Step 1/9 : FROM node:10.19-alpine
---> 34a10d47f150
Step 2/9 : ENV PROJECT_ROOTDIR /app/
---> Using cache
---> e7546315f07c
Step 3/9 : WORKDIR $PROJECT_ROOTDIR
---> Using cache
---> c41f52edd3a7
Step 4/9 : COPY package.json yarn.lock $PROJECT_ROOTDIR
---> Using cache
---> 16c590b71d72
Step 5/9 : RUN yarn install
---> Using cache
---> f6cbdb623b12
Step 6/9 : COPY . $PROJECT_ROOTDIR
---> Using cache
---> 08299d974d43
Step 7/9 : EXPOSE 3000
---> Using cache
---> ae3653095e25
Step 8/9 : ENV HOST 0.0.0.0
---> Using cache
---> d7264bcfe5b7
Step 9/9 : CMD ["yarn", "dev"]
---> Using cache
---> b0c93f1dcbab
Successfully built b0c93f1dcbab
Successfully tagged covid19_app:latest
Starting covid19 ... done
Attaching to covid19
yarn run v1.21.1
$ cross-env NODE_ENV=development GENERATE_ENV=development nuxt-ts
covid19 | start Loading module
covid19 | ℹ PurgeCSS is not enabled because you are in dev mode
covid19 |
covid19 | ℹ NuxtJS collects completely anonymous data about usage.
covid19 | This will help us improving Nuxt developer experience over the time.
covid19 | Read more on https://git.io/nuxt-telemetry
covid19 |
ログはここで止まりました。なので、ひとまず localhost:3000 にアクセスしてみますが、 このページは動作していません と表示されます。サーバープロセスは起動していないようです。
コンテナの中を見てみます。
docker-compose exec app /bin/sh
開発サーバーの実行は yarn dev です。同様のコマンドを打ってみます。
# yarn dev
yarn run v1.21.1
$ cross-env NODE_ENV=development GENERATE_ENV=development nuxt-ts
start Loading module nuxt:purgecss 15:32:53
ℹ PurgeCSS is not enabled because you are in dev mode nuxt:purgecss 15:32:53
ℹ NuxtJS collects completely anonymous data about usage. 15:32:54
This will help us improving Nuxt developer experience over the time.
Read more on https://git.io/nuxt-telemetry
? Are you interested in participation? (Y/n)
プロンプトが表示されて、先に進んでないですね。。。これを出力しているのが Nuxt なのか、それとも別の何かなのか、そのへんはちょっと私にはわかりません。後続のエラーからすると yarn 絡みではないかと思います...。ひとまず、 Y を押して進めます。
以下のような画面が出て、 Nuxt のビルドが始まります。
しばらく待つとエラーで終了します。
ℹ Preparing project for development 15:33:26
ℹ Initial build may take a while 15:33:26
✔ Builder initialized 15:33:26
✔ Nuxt files generated 15:33:28
● Client █████████████████████████ building (65%) 1030/1119 modules 89 active
css-loader › postcss-loader › sass-loader › node_modules/vuetify/src/components/VAvatar/VAvatar.sass
● Server █████████████████████████ building (64%) 839/924 modules 85 active
css-loader › postcss-loader › sass-loader › node_modules/vuetify/src/components/VAvatar/VAvatar.sass
ℹ Starting type checking service... nuxt:typescript 15:33:37
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
type checking とあるので、ts 関係の何かでしょうか...?
（ストップした場所を見る限りは CSS プリプロセッサの問題ぽい雰囲気もありますが、ts って CSS も型定義あるんですかね・・・詳しい方教えてください）
とりあえず --verbose をつけて再実行してみます。
# yarn dev --verbose
yarn run v1.21.1
$ cross-env NODE_ENV=development GENERATE_ENV=development nuxt-ts --verbose
start Loading module nuxt:purgecss 15:41:18
ℹ PurgeCSS is not enabled because you are in dev mode nuxt:purgecss 15:41:18
╭────────────────────────────────────────╮
│ │
│ Nuxt.js @ v2.13.2 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: server-side │
│ ▸ Target: server │
│ │
│ Listening: http://172.22.0.2:3000/ │
│ │
╰────────────────────────────────────────╯
ℹ Preparing project for development 15:41:21
ℹ Initial build may take a while 15:41:21
✔ Builder initialized 15:41:21
✔ Nuxt files generated 15:41:23
✔ Client
Compiled successfully in 2.85m
✔ Server
Compiled successfully in 2.88m
ℹ Starting type checking service... nuxt:typescript 15:41:30
ℹ No type errors found nuxt:typescript 15:44:20
ℹ Version: typescript 3.9.5 nuxt:typescript 15:44:20
ℹ Time: 20078 ms nuxt:typescript 15:44:20
ℹ Waiting for file changes 15:44:20
ℹ Memory usage: 528 MB (RSS: 916 MB) 15:44:20
ℹ Listening on: http://172.22.0.2:3000/ 15:44:20
通ってしまった。何も変えてないはずなんですけどね...。 localhost:3000 も閲覧できました。
成果物を確認するために2回ビルドする、って話は LaTeX で経験があります。LaTeX では、章構成等が変わった場合に（成果物である PDF を確認するため）ビルドを複数回実行する必要があります。1回目は目次情報の再計算が目的です。
今回詰まったのは CSS プリプロセッサのコンパイル処理っぽい雰囲気なので、CSS のプリプロセッサにも似たような事情があるのでしょうか？？ちょっとこのへんの話はまったくわからないので誰か詳しい方の補足が欲しいです。
さて、コンテナの中に入ることで動作確認したは良いのですが、本来ならこれを docker-compose up でやりたいわけです。
今のコンテナは潰して再実行してみます。
# docker-compose up --build
docker-compose up --build
Building app
Step 1/9 : FROM node:10.19-alpine
---> 34a10d47f150
Step 2/9 : ENV PROJECT_ROOTDIR /app/
---> Using cache
---> e7546315f07c
Step 3/9 : WORKDIR $PROJECT_ROOTDIR
---> Using cache
---> c41f52edd3a7
Step 4/9 : COPY package.json yarn.lock $PROJECT_ROOTDIR
---> Using cache
---> 16c590b71d72
Step 5/9 : RUN yarn install
---> Using cache
---> f6cbdb623b12
Step 6/9 : COPY . $PROJECT_ROOTDIR
---> Using cache
---> 08299d974d43
Step 7/9 : EXPOSE 3000
---> Using cache
---> ae3653095e25
Step 8/9 : ENV HOST 0.0.0.0
---> Using cache
---> d7264bcfe5b7
Step 9/9 : CMD ["yarn", "dev"]
---> Using cache
---> b0c93f1dcbab
Successfully built b0c93f1dcbab
Successfully tagged covid19_app:latest
Starting covid19 ... done
Attaching to covid19
yarn run v1.21.1
$ cross-env NODE_ENV=development GENERATE_ENV=development nuxt-ts
covid19 | start Loading module
covid19 | ℹ PurgeCSS is not enabled because you are in dev mode
covid19 |
covid19 | ╭────────────────────────────────────────╮
covid19 | │ │
covid19 | │ Nuxt.js @ v2.13.2 │
covid19 | │ │
covid19 | │ ▸ Environment: development │
covid19 | │ ▸ Rendering: server-side │
covid19 | │ ▸ Target: server │
covid19 | │ │
covid19 | │ Listening: http://172.22.0.2:3000/ │
covid19 | │ │
covid19 | ╰────────────────────────────────────────╯
covid19 |
covid19 | ℹ Preparing project for development
covid19 | ℹ Initial build may take a while
covid19 | ✔ Builder initialized
covid19 | ✔ Nuxt files generated
covid19 | ✔ Client
covid19 | Compiled successfully in 2.90m
covid19 |
covid19 | ✔ Server
covid19 | Compiled successfully in 2.92m
covid19 |
covid19 | ℹ Starting type checking service...
covid19 | ℹ No type errors found
covid19 | ℹ Version: typescript 3.9.5
covid19 | ℹ Time: 17101 ms
covid19 | ℹ Waiting for file changes
covid19 | ℹ Memory usage: 567 MB (RSS: 968 MB)
covid19 | ℹ Listening on: http://172.22.0.2:3000/
いけました。
初回ビルド時だけの挙動だったのでしょうか？...と言っても、今やっている処理はアプリのビルドであって、コンテナイメージのビルドとは違ってます。2回目は前回の情報（キャッシュとか）持っててそのおかげ...みたいな話ではなさそうかなと予想しているのですが、現時点でこうなった理由に心当たりはないです。説明できる方がいたらコメントいただけると嬉しいです。
まとめ
開発環境の立ち上げで苦戦している方がありましたら、一度コンテナの中に入って手動で yarn dev を叩いてみると良さそう、という感じでした。
なにはともあれ、開発環境は動きました。次は自分のレベルでもできそうな issue を探してみようと思います。