[CI]プレビューデプロイ

[no-yan]

レビューをブラウザ上で終わらせるために、PRごとにデプロイされるようにしたいと思います。 実機で動作確認をすると、どんな小さいPRでも5分以上時間がかかると思います。これをなくしましょう。

当初Herokuでのpreviewを考えましたが有料のため、Vercelのhobby(無料)プランで提供されるpreview機能を使うつもりです。

Vercelでは、こんなbotがデプロイされたURLを発行してくれます。

[no-yan]

@ShopOne 権限が必要になるので、コラボレーターにしてもらうことは可能ですか？ その場合はフロントエンド側のレビューは引き受けられます。

[ShopOne]

助かります！コラボレーター発行します。 フロントのレビューも助かります！

[no-yan]

モノレポ構成なので、ビルドステップの更新が必要そう。 https://vercel.com/docs/concepts/deployments/build-step

[no-yan]

VercelでPreview Deployする件ですが、レポジトリ所有者が登録する必要がありました（それはそう）。 @ShopOne 登録するところまでやっていただきたいのですが、丸投げして大丈夫ですか？土日に画面共有して作業とかでもいけます。 参考: https://weseek.co.jp/tech/621/

[ShopOne]

リプライに気が付けませんでした… ちょっとやってみます

[ShopOne]

https://shitforces-fyhp597uw-shopone.vercel.app とりあえず登録？は出来てURLは生えていると思います。 共有すべきことはありますでしょうか？

[no-yan]

ありがとうございます！気づいてからが早い。 ルートディレクトリでビルドするせいで404が出ているはずなので、ビルドコマンドをcd frontend && npm run buildに変更してみてください。 https://vercel.com/docs/concepts/deployments/build-step ビルドできるでしょうか？

それ以外は今のところ大丈夫です！わからないことがあれば遠慮なくきいてください。

あと今後、環境変数でfetch先を切り替えるつもりです。その際に環境変数の設定をお願いすると思います。 現在の設定ではvercelのfetchは失敗します(同じドメインにバックエンドがあることを想定するため)。これを治すため、previewでも本番環境に接続するか、あるいはpreview用のバックエンド環境を建てるかのどちらかをやります。

[ShopOne]

ビルドの設定はできたと思います。ただlintのあれでビルド落ちしちゃってました(IntelliJ上だと何も出てないんですが…) 一応エラー共有をしておきます、vercelの設定になにかあるんですかね？

src/App.tsx
--
23:53:23.442 | Line 3:3:  'useColorMode' is defined but never used       @typescript-eslint/no-unused-vars
23:53:23.442 | Line 4:3:  'useColorModeValue' is defined but never used  @typescript-eslint/no-unused-vars
23:53:23.442 |  
23:53:23.443 | src/components/SubmitAccountInfo.tsx
23:53:23.443 | Line 23:45:  Arrow function has too many lines (119). Maximum allowed is 100  max-lines-per-function
23:53:23.443 |  
23:53:23.443 | src/functions/HttpRequest.ts
23:53:23.443 | Line 27:12:   Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
23:53:23.443 | Line 243:13:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
23:53:23.444 |  
23:53:23.444 | src/pages/AccountPage/CreateContestElement.tsx
23:53:23.444 | Line 10:42:  Arrow function has too many lines (249). Maximum allowed is 100  max-lines-per-function
23:53:23.444 |  
23:53:23.444 | src/pages/ContestEditPage/index.tsx
23:53:23.445 | Line 56:59:   Arrow function has too many lines (237). Maximum allowed is 100  max-lines-per-function
23:53:23.446 | Line 115:35:  Arrow function has too many lines (120). Maximum allowed is 100  max-lines-per-function
23:53:23.446 | Line 298:29:  Arrow function has too many lines (171). Maximum allowed is 100  max-lines-per-function
23:53:23.446 |  
23:53:23.446 | src/pages/ContestPage/ProblemsTab.tsx
23:53:23.446 | Line 30:56:   Arrow function has too many lines (102). Maximum allowed is 100  max-lines-per-function
23:53:23.447 | Line 195:24:  Arrow function has too many lines (135). Maximum allowed is 100  max-lines-per-function
23:53:23.447 |  
23:53:23.447 | src/pages/ContestPage/index.tsx
23:53:23.447 | Line 90:24:  Arrow function has too many lines (153). Maximum allowed is 100  max-lines-per-function
23:53:23.447 |  
23:53:23.447 | src/pages/TermsPage.tsx
23:53:23.447 | Line 3:31:  Arrow function has too many lines (215). Maximum allowed is 100  max-lines-per-function

環境変数了解です～

[no-yan]

CIではEslintのワーニングがエラーとして扱われるので、コンパイルが失敗するようです。 Treating warnings as errors because process.env.CI = true.

Eslintでエラーが出ないようにすれば成功するので、やっておきます。