Treating warnings as errors because of process.env.CI = true

2020/6/15にNetlifyの仕様が変わったのが原因でソースの警告があるとビルドが通らなくなる現象が発生している模様。

解決方法

(元のビルドコマンドがnpm run buildの場合)
Build Commandを「CI = npm run build」に変更する。

その他コンフィグの設定方法が変わってきているようなのでリリースなどがある場合は要注意かも。

新年2本目のボード投稿になります。
(新年の実績としては1本目)

キャップ野球情報局

https://cap-baseball.com/

成績管理システムとの連携

今回の改修の目玉は、成績管理システム「みんなのSCORE」との連携です。
成績管理システムのデータベースを利用しているのでいわば兄弟サイトです。

試合結果の表示

• リーグ戦
• 練習試合
• 大会(大福大会、佐倉大会など)

の結果をトップページで閲覧できるようになりました。
右下のページング部分から10件ずつ遡ることが可能です。

試合結果詳細

試合結果とともに関連するツイートの表示と
(あれば)試合動画の表示を行います。

チームページ

例：一橋大のページ
通算成績と直近の試合結果が表示されます。

使っている技術

• ReactJS
• Netlify
• NodeJS
• MySQL
• Docker
• nginx

今後の課題

• 一回見ると飽きてしまう(リピーターがいない)
• ブログ記事などの集約・紹介
• コンテンツなどの充実
• 個別記事とチームの紐づけ

概要

• 動画スライドコンポーネントの実装
• 蓋ざんまいサイトとの連携
• 独自ドメイン取りました
  　- トラブルシューティング
• 日別試合結果累計バグ対処
  • 原因

動画スライドコンポーネント

主にキャップ野球用の対応ですが、皆さんyoutubeとかtwitterにばらばらに動画を上げているので、蓋ざんまい非公式サイトではその集約の役割も果たしていました。

ただ、蓋ざんまいサイトでは
- 縦列に配置してコンテンツが長くなってしまう

という欠点があり、試合結果を一律JCBL-SCORE側で表示する対応をするため、どんなUIがいいか考えた結果、カルーセルみたいに横にスライドするのがよいという考えに。

使ったコンポーネント

• react-slideshow
  • 今回新たに採用したコンポーネント
• react-youtube
  • JCBL-SCOREで既に採用
• react-twitter-embed
  • 蓋ざんまいサイトで既に採用

実装結果

蓋ざんまいサイトとの連携

蓋ざんまいで独自に実装していた試合結果ページを廃止(アクセスはできますがリンクは張っていません)して、一律JCBL-SCORE側で試合結果を表示するようにしました。

独自ドメイン取りました

• 旧ドメイン(netlify)
  • https://jcblscore-react.netlify.com/league/cap_baseball
• 新ドメイン
  • https://jcbl-score.com/league/cap_baseball

だいぶ短縮できました。
設定自体は大して難しくなく、ちょっと古いですが以下のサイトなどを参考に進めました。

• Netlifyで静的サイトをホスティングする(2) 独自ドメイン設定 ～ HTTPS化
• Netlifyで独自ドメインを設定する

手順としては、
1. ネームサーバの設定をnetlifyのものにする
2. DNSが浸透するまで待つ
3. Let's encryptでSSL証明書を発行する(netlifyがやってくれる)

トラブルシューティング

3でちょっとはまりました。
ERR_CERT_COMMON_NAME_INVALID(プライバシーエラー)が出てしまうのです。
作られた証明書を見ると、subjectが「*.netlify.com」になっています。証明する対象が間違っているわけです。
よくよく考えると、新しいドメインにリダイレクトしていないままLet's encryptの処理をしていたので、redirectsに

[https://jcblscore-react.netlify.com/*](https://jcblscore-react.netlify.com/*) https://jcbl-score.com/:splat 301!

1行追記します。これで証明書を発行し直すとプライバシーエラーが解消されました。

日別試合結果累計バグ

原因

APIコンテナとDBコンテナのタイムゾーンがGMTで、DBに入っている値がJSTだったので、日付で比較しようとすると、SQLで>や
composeファイルで書くと有効な対応策がないので、SQLに渡す際に日付オブジェクトにするのをやめました。