Remix+CloudflareでWebサイトを作る 18(GitHubActionsで参照となる.envを動的に作成・pnpmに移行・描画速度向上のためにimport見直す)
【2024-03-23】.envファイルをCommitに含めたくないのでGithubActionを使って環境ごとにファイルを動的に作成する
背景
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
というファイルを作成する。
(省略)
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
を参照するようになる。
+ "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
【2024-03-24】npmからpnpmに移行
メリット
- 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
などをうつとエラーを出すようにする。
このファイルを新規作成
engine-strict=true
以下のように変更
"scripts": {
+ "preinstall": "npx -y only-allow pnpm",
},
"engines": {
"node": ">=18.0.0",
+ "npm": "npmではなくpnpmを使用してください"
}
package-lock.json
を削除して終わり。
- pnpmだけを使うようにする | pnpm
- yarnを使うプロジェクトでnpm installを禁止する方法 #JavaScript - Qiita
- 【npm】npm installできないようにする【yarn】【pnpm】 #npm - Qiita
- npmからpnpm移行の際にやった11のこと
移行前後のサイズ比較
1割減った。
$ du -sh node_modules
765M node_modules # 移行前
692M node_modules # 移行後
importエラー出まくる
が、pnpm dev
したら色々importエラー出まくる
数が多すぎるしこの記事の方法でも解決しなかったので一旦Stay。
【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は使ってなかったため修正漏れ発生
- package.jsonのデプロイコマンドは
- →今回.envファイルを作るためにGitHub Actionsでのデプロイする形式に戻したがデプロイ箇所は修正を入れていなかった
デプロイ自体は成功するし画面に静的に描画されるものは書き換わっているから気付かなかった。
(省略)
- 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
【2024-03-24】描画速度が遅いのを改善したい
背景
ローカルでいじっているときは描画速度が早いけど、デプロイ先だと遅い。
一番気になるのは初期描画。いくらなんでも遅すぎない?ってくらい遅い。
その後は早いは早いけどもっとどうにかできそう。
Joy UI(MUI)を使っていることは原因になっているのか?
現状
アイコン一番使っているページでLighthouse実行してみたらスコア低すぎた。
調査
「MUIを使っているから」は原因ではなさそう
2022年の記事だが結論MUIは直接関係してなさそう。
インポートを見直す
Remix+CloudflareでWebサイトを作る 2の中で、MUIアイコンのImportエラーがでたから以下のように修正した。
// 🚨 表示されない(Before)
import LightModeIcon from "@mui/icons-material/LightMode";
// ✅ 表示される(After)
import { LightMode } from "@mui/icons-material";
この記事を見ると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方法を変えるとアイコン表示されなかったり、エラーになったり...。
どうしたもんか。
その他
ちゃんとテスト書いてこまめなパフォーマンスチューニングしなければ