Zenn
Closed4

Remix+CloudflareでWebサイトを作る 18（GitHubActionsで参照となる.envを動的に作成・pnpmに移行・描画速度向上のためにimport見直す）

個人開発
Cloudflare
Vite
pnpm
Remix
saneatsusaneatsu

【2024-03-23】.envファイルをCommitに含めたくないのでGithubActionを使って環境ごとにファイルを動的に作成する

背景

https://zenn.dev/link/comments/f35928a731fb42

1つ前にprocess.envではなくimport.meta.envを使うようにして.env.developmentファイルを作成した。
今後Staging、Production用の.envファイルも作成する必要が出てくるが、これらは.gitignoreしたい。

デプロイ時にignore対象となっている.envファイルを参照する。

実装

1. GitHub Actionsの環境変数を定義

まずはSecrets/Variablesを定義する。
どれをどこに定義するかはこのScrapで書いた。

2. GitHub Actionsの修正

GitHub Actionsの環境変数を元に.env.stagingというファイルを作成する。

.github/workflows/staging-deploy.yml
（省略）
    steps:
+     - name: 🔑 Create .env.staging
+       env:
+         VITE_CLIENT_URL: ${{ vars.VITE_CLIENT_URL }} # 見られてもいい値かなと思いVariablesにした
+         VITE_SESSION_SECRET: ${{ secrets.VITE_SESSION_SECRET }}
+         VITE_GOOGLE_CLIENT_ID: ${{ secrets.VITE_GOOGLE_CLIENT_ID }}
+         VITE_GOOGLE_CLIENT_SECRET: ${{ secrets.VITE_GOOGLE_CLIENT_SECRET }}
+       run: |
+         echo NODE_ENV=staging >> .env.staging
+         echo VITE_CLIENT_URL=$VITE_CLIENT_URL >> .env.staging
+         echo VITE_SESSION_SECRET=$VITE_SESSION_SECRET >> .env.staging
+         echo VITE_GOOGLE_CLIENT_ID=$VITE_GOOGLE_CLIENT_ID >> .env.staging
+         echo VITE_GOOGLE_CLIENT_SECRET=$VITE_GOOGLE_CLIENT_SECRET >> .env.staging

      - name: ⏬ Install
        run: npm install
        working-directory: ./

      - name: 🔨 Build
-        run: npm run build
+        run: npm run build:staging # ここに合わせてpackage.jsonも修正する
        working-directory: ./

（省略）

以下を追加しておく。
ここで --mode staging とすることで.env.stagingを参照するようになる。

package.json
+ "build:staging": "npm run sass:build && remix vite:build --mode staging",

3. Cloudflareの自動デプロイを無効にする

その他

GitHub Actionsを使って.envファイルを作る形式にしたため、以下のようにローカルからCloudflareのStaging環境にデプロイ試してみるみたいなことはできなくなった。

今までこうしたいケースも全然なかったしいいんだけども。

npm run build && wrangler pages deploy ./build/client --project-name=<PROJECT_NAME> --branch="deploy-from-local" --env staging
saneatsusaneatsu

【2024-03-24】npmからpnpmに移行

メリット

pnpm は npm と何が違うのか

  • 2倍高速
  • node_modules内のディスク容量が効率的
  • 厳密なパッケージ管理で、package.jsonに記載のあるものしかアクセスできない。

GPTにも聞いてみる

移行

# 1. pnpmをインストール
$ npm install -g pnpm

# 2. /node_moduleを削除
$ rm -rf node_modules

# 3. パッケージをインストール
$ pnpm install

npmを禁止

pnpm コマンドだけを許可し、npm iなどをうつとエラーを出すようにする。

このファイルを新規作成

.npmrc
engine-strict=true

以下のように変更

package.json
  "scripts": {
+   "preinstall": "npx -y only-allow pnpm",
  },
  "engines": {
    "node": ">=18.0.0",
+   "npm": "npmではなくpnpmを使用してください"
  }

package-lock.json を削除して終わり。

移行前後のサイズ比較

1割減った。

$ du -sh node_modules
765M	node_modules # 移行前

692M	node_modules # 移行後

importエラー出まくる

が、pnpm devしたら色々importエラー出まくる

https://zenn.dev/tektek/articles/4fe385f68062cc

数が多すぎるしこの記事の方法でも解決しなかったので一旦Stay。

saneatsusaneatsu

【2024-03-24】ボタンをクリックしても反応しなくなっている

問題

ここでViteのimport.meta.envを使うようにした。

import.meta.env.VITE_CLIENT_URL などの値は画面上で表示されているから、GitHub Actionsで.env.stagingは正しく作成されていると考えて良さそうに思っていた。

が、今気づいたけどボタンをクリックしても全く反応しなくなっている...。

ローカルでは正常に動いている。
差分は「ローカルでは.env.developmentが存在し、Staging/Production環境では.env.staging .env.productionがGitHub Actions内で作成される」という点だけ。
ということで怪しいのはGitHub Actionsだと考えた。

修正

ちょっとやって諦めて寝て起きたら理由がわかった（こういう時あるよな〜）。
Remix v2.6まではデプロイ対象が./publicだったけど、v2.7でViteになってから./build/clientになったの忘れてた。

バグの発生経緯は以下。

  • v2.6の時にこのワークフローのファイルを作る
  • → その後GitHub ActionsでのデプロイをやめてCloudflareデフォルトのデプロイ機能を使う
  • → v2.7にアプデ
    • package.jsonのデプロイコマンドは./publicから./build/clientに修正したが、GitHub Actionsは使ってなかったため修正漏れ発生
  • →今回.envファイルを作るためにGitHub Actionsでのデプロイする形式に戻したがデプロイ箇所は修正を入れていなかった

デプロイ自体は成功するし画面に静的に描画されるものは書き換わっているから気付かなかった。

.github/workflows/staging-deploy.yml
（省略）

      - name: 🚀 Deploy
        id: cloudflare-wrangler
        uses: cloudflare/wrangler-action@v3
        with:
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-         command: pages deploy ./public --project-name=<PROJCET_NAME> --branch=${{ needs.setup.outputs.BRANCH }} --env staging
+         command: pages deploy ./build/client --project-name=<PROJCET_NAME> --branch=${{ needs.setup.outputs.BRANCH }} --env staging
saneatsusaneatsu

【2024-03-24】描画速度が遅いのを改善したい

背景

ローカルでいじっているときは描画速度が早いけど、デプロイ先だと遅い。

一番気になるのは初期描画。いくらなんでも遅すぎない？ってくらい遅い。
その後は早いは早いけどもっとどうにかできそう。

Joy UI（MUI）を使っていることは原因になっているのか？

現状

アイコン一番使っているページでLighthouse実行してみたらスコア低すぎた。

調査

「MUIを使っているから」は原因ではなさそう

https://www.ultra-noob.com/blog/2022/16/

2022年の記事だが結論MUIは直接関係してなさそう。

インポートを見直す

Remix+CloudflareでWebサイトを作る 2の中で、MUIアイコンのImportエラーがでたから以下のように修正した。

// 🚨 表示されない（Before）
import LightModeIcon from "@mui/icons-material/LightMode";

// ✅ 表示される（After）
import { LightMode } from "@mui/icons-material";

https://zenn.dev/tttela/articles/1e1d171bb5ece3522e87

この記事を見るとAfterの書き方にするとパフォーマンスが下がるぽい。

Remixをv2.6→v2.7にした時に、コンポーネント周りでImportエラーがでたから以下のように変更したけど、これも遅い原因になっていそう。

// 🚨 Importエラーになる（Before）
import Box from '@mui/joy/Box';
import Card from '@mui/joy/Card';

// ✅ Success（After）
import { Box, Card } from "@mui/joy";

Boxのimport先を変えた時のエラー文は以下。

Unexpected Server Error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Import方法を変えるとアイコン表示されなかったり、エラーになったり...。
どうしたもんか。

その他

https://zenn.dev/spacemarket/articles/3ee5fe0597ff3e

ちゃんとテスト書いてこまめなパフォーマンスチューニングしなければ

このスクラップは2024/03/24にクローズされました