脆弱性管理を始めてから重い腰を上げてCreate React AppからViteに移行して使ってみた

こんにちは。
最近、雪が降ったり春らしい暖かさになったり、また雪予報が出てたりと、気温と天気の変化が大きくて体調管理が難しい日々が続いていますね。
新年に立てた目標を改めて見返しながら、進捗の悪さに焦りつつも、「来年度から」という都合がいいマイルストーンに甘えて少し余裕ができたつもりになっている今日この頃です。

ここしばらくは社内向けに勤怠システムの内製化をしながら手触り感を持ってあれこれ検証や観察を続けています。
アプリ開発もある程度落ち着いてきて、そろそろ本格的に運用フェーズに移行する段階に差し掛かってきました。
運用フェーズに移行するにあたり、脆弱性管理にも力を入れていきたいと考えていた頃に、yamoryさんとのご縁があり、サービスを使ってみることにしました。

今回の話

Create React Appを使って社内勤怠システムを作っていました。 Reactを使って開発をやっている方にとってはお馴染みのツールですが初めての方向けに簡単にまとめると、Create React AppはFacebookなどをサービスしているMetaが開発しているReactアプリ作成ツールです。
開発を始める際に最低限必要なファイルを一式作成することができるため、Create React Appのようなツールを活用して作成することが多いです。使ったことがない方向けにどんな感じで使いやすいのかなどをまた別の機会にブログにまとめられたと思っています。

https://github.com/facebook/create-react-app

最近社内でyamoryというサービスを使い始めたので、自分が開発しているアプリケーションのスキャンを実行してみたところ、多くの脆弱性が見つかりました。
これに対応する過程で独自に調査したところ、Create React Appは2022年の更新を最後に開発が停止しているようで、何か別のツールに乗り換えが必要になりました。検討の結果、Viteに乗り換えようと考えました。Viteに乗り換えたきっかけについてはいずれ、ブログ記事にしたいと思っています。今回の記事は、Create React AppからViteに乗り換えをどう行なったかをまとめた記事になります。

脆弱性とは

脆弱性とは、システム、ソフトウェア、またはセキュリティ上の問題の可能性を指します。これは、不正アクセス、データ漏洩、または悪意のある攻撃に悪用される可能性があります。脆弱性は、セキュリティ上のリスクを増加させ、システムやデータの安全性を脅かすことがあります。組織や個人は脆弱性を定期的に評価し、適切な対策を講じることで、セキュリティを強化する必要があります。

最近では、社会的に有名な企業だけでなく、グループ会社や取引先などのサプライチェーンを狙った攻撃も目立つようになりました。
自分たちはそこまで大手企業ではないから大丈夫とは言えなくなっています。自分たちの会社の脆弱性を突かれて取引先の企業へ損害を与えることもあり得ます。そのようなニュースもまだ皆さんの記憶に新しいのではないでしょうか。
そのようなリスクを減らすためにも、自分たちは大丈夫とは思わずに、まずは脆弱性に関心を持って情報収集することは大きな1歩です。

yamoryとは

詳しくは公式サイトを見て頂きたいのですが、簡単に言うとSBOMやDevSecOpsなどにも対応した脆弱性管理クラウドのサービスです。

yamory.io

残念ながら、個人がアカウントを作って手軽に始められるようなサービスではありません。事前に資料請求や問い合わせが必要です。もし、気になる方は公式サイトの資料請求または弊社へご連絡ください。お取次も可能です。今回は、比較検討した上で採用したわけではありませんが、試しに1つという気持ちでアプリライブラリを使って脆弱性管理を始めてみました。
色々と使いこなしてきたらまた改めて別の記事にまとめられたらと思っています。

アプリライブラリ | 使い方 | yamory - 脆弱性管理クラウド

Viteとは

Vite(ビート)は、JavaScriptのビルドツールおよび開発サーバーで、Vue.jsフレームワークの開発者Evan Youによって作成されました。リアルタイムでコードをモジュール化し、高速な開発サーバーとホットリロードを提供します。主にVue.jsのプロジェクト向けに設計されていますが、他のフレームワークやライブラリでも使用できます。

個人的な肌感ですがよく耳にするツールの1つではないかと思っています。

Viteへ移行開始

移行を始めていく前に少し余談ですが、今回は使用しませんがcreate-react-appのように1からプロジェクトを構築する時は、次のコマンドを実行して構築できます。

npm create vite@latest  . -- --typescript react-ts

では移行を始めていきます。まずは必要なパッケージをインストールします。yarnを使用している方は適宜読み替えてください。

npm install vite @vitejs/plugin-react

package.json内のdependencies: { ... }を見ると追加されたことが確認できます。
僕の場合はあれこれパッケージのバージョンアップを怠っていたこともあり、依存パッケージのバージョンアップが必要でした。
同じようにインストール時にエラーが出た場合は確認して最低バージョン以上にアップデートします。

{
  ...
  "dependencies": {
    ...
+   "@vitejs/plugin-react": "^4.2.1",
+   "vite": "^5.1.4",
    ...
  },
  ...
}

忘れないうちに不要になるreact-scriptsのパッケージを削除します。

npm uninstall react-scripts

ここからはファイルをVite仕様に合わせていくために幾つかのファイルを編集していきます。

スクリプトの修正

package.json内のscripts: { ... }を編集します。今回はstartとbuildのみを残してそれ以外は一旦削除します。

{
  ...
  "scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
-   "eject": "react-scripts eject"
+   "start": "vite",
+   "build": "vite build"
  }
  ...
}

Viteの設定ファイルを作成

最初からプロジェクトを作成する際には自動で作成されますが、今回は手動で作成します。
package.jsonに配置している階層と同じ場所にvite.config.tsを作成して次のコードを配置します。

import react from "@vitejs/plugin-react";
import path from "path";
import { defineConfig } from "vite";

export default defineConfig({
  server: {
    host: true,
    open: true,
  },
  resolve: {
    alias: {
      src: path.resolve(__dirname, "./src/"),
    },
  },
  build: {
    outDir: "build",
  },
  plugins: [react()],
});

index.htmlの修正

まずはディレクトリ階層を変更します。./public/index.htmlから1つ階層を上げてpublicディレクトリの外に配置します。

次に<link />タグのhrefから%PUBLIC_URL%を削除します。
例として1つのみ紹介していますが、他のものも同じように修正します。

- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+ <link rel="manifest" href=/manifest.json" />

Viteに変更した際は直接index.tsxを呼び出す必要があるため、次のようにscriptを追加します。

<!DOCTYPE html>
<html lang="en">

<head> ... </head>
<script> ... </script>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
+ <script type="module" src="/src/index.tsx"></script>
</body>

</html>

環境変数のプレフィック名も変わります。Create React AppではREACT_APP_を使用していましたが、ViteではVITE_を使用するため、変更します。