現状の課題
WSL2でAstroを使ってウェブサイトを作っているのですが、時々フリーズします。一度フリーズすると再起動するまで頻発します。とりあえずWSLが悪だと断定しました。 仕方なくWindows上で開発することに。Unixで環境構築するのは非常に楽なのですが...
必要なものですが、AstroはNode.jsで動くので、Node.jsのバージョンマネージャーが必要です。また、モジュールを管理するパッケージマネージャーも必要です。
バージョンマネージャー
WindowsではNVM for Windowsなどが主流だと思いますが、私はfnmを使います。fnmはRustで書かれているので、高速です。NVM for Windowsのパフォーマンスは知りませんが、こちらもGoで書かれているので高速だと思います。
パッケージマネージャー
npmやyarnなどがありますが、私はpnpmを使用します。パフォーマンスだけならばYarn PNPが最速のようですが、Yarnとpnpmでは大きな差は開いてないように見えます。
fnmのインストールについて
Windowsのパッケージマネージャー
ChocolateyやScoopがありますが、私はWingetを使います。非公式のフロントエンドもあります。このWingetUIはChocolateyとScoopを含む複数のパッケージマネージャーに対応しています。
Cargoを使うことにした
wingetでfnmをインストールしようと思いましたが、上手くいかなかったのでcargoを使いました。なので、Rustの環境を構築します。
Rustのインストール
Visual Studioのインストール
Rustでコンパイルする際にはVisual Studioが必要です。要件が2017以上なので、現時点で最新の2022をインストールします。
>winget search "Visual Studio"
名前 ID バージョン ソース
--------------------------------------------------------------------------------------
Visual Studio Community 2022 XPDCFJDKLZJLP8 Unknown msstore
Visual Studio Community 2022 Microsoft.VisualStudio.2022.Community 17.8.3 winget
検索すると、２つありますが、私はMicrosoft.VisualStudio.2022.Communityの方をインストールしました。明確な違いは不明ですが、恐らく上がMicrosoft Store版で、下がWinget版だと思います。
そして、Visual Studioをインストールする際にVisual Studio Installerが立ち上がりますが、自動で閉じられた場合はもう一度開きます。Visual Studio Community 2022がインストール済みとして表示されている項目の右端にある「変更」を押下します。
「ワークロード」のブラウズ画面で「デスクトップとモバイル」→「C++によるデスクトップ開発」を選択し、下の「ダウンロードしながらインストール」を押下します。すると、インストールが始まるはずです。
Rustup (Cargo)のインストール
rustupは１つしか無いです。Visual Studioより先にインストールしてもエラーは出ませんが、ここでは Visual Studioを先にインストールすることを推奨します。 また、ビルドツールの設定が上手くいかない場合があるみたいです。
fnmのインストール
cargo install fnm
こうして、fnmをインストールできます。
fnm install lts/hydrogen
fnm use lts/hydrogen
fnmは コードネームでのインストールが可能です。
また、以下の記事も参考にしてみて下さい。
- Winget
- Chocolatey
- Scoop
以下はコマンドの一覧です。
pnpmのインストール
winget install pnpm
設定は自動で行われます。ターミナルを再起動して設定を適用できます。
GitとGitHubの設定
Gitのインストール
winget install git
GitもWingetでインストールできます。
メールアドレスの確認
メールアドレス確認画面
SSH接続にはメールアドレスが必要なのですが、Primary email addressの説明の中で、12345678+github@users.noreply.github.comのようなメールアドレスがあります。これを使うのが一般的です。
SSH・GitHubの認証の設定
Host github github.com
HostName github.com
User git
IdentityFile C:\Users\taiko\.ssh\github
IgnoreUnknown UseKeychain
AddKeysToAgent yes
UseKeychain yes
後から作ってもエラーにはなりません。変更可能です。 IgnoreUnknownはUseKeychainよりも先に記述してください。IdentityFileが間違っているとエラーになります。このパスは後に指定します。
SSH鍵の作成
> mkdir .ssh
> cd .ssh
# https://github.com/settings/emails で確認したメールアドレスを指定します
> ssh-keygen -t ed25519 -C "12345678+github@users.noreply.github.com"
Generating public/private ed25519 key pair.
# IdentityFileで指定したパスと同じにする必要があります。
# 何も入力しない場合は表示されているパスが使われます。
Enter file in which to save the key (C:\Users\user/.ssh/id_ed25519)
C:\Users\user/.ssh/github
# 何も入力しない場合はパスフレーズが設定されません。
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in C:\Users\user/.ssh/github
Your public key has been saved in C:\Users\user/.ssh/github.pub
The key fingerprint is:
SHA256: 12345678+github@users.noreply.github.com
The key's randomart image is:
+--[ED25519 256]--+
| |
| |
| |
| |
| |
| |
| |
| |
| |
+----[SHA256]-----+
SSHのキーを作成します。RSAもありますが、ed25519を使用します。
SSH鍵の登録
> cat github.pub
ssh-ed25519 key 12345678+github@users.noreply.github.com
catコマンドで出力された全文をコピーし、SSH and GPG keysの「New SSH Key」を押下し、Titleには任意の名前、Keyにはコピーした内容を貼り付けてください。最後に「Add SSH key」を押下してSSHを追加できます。
鍵の追加画面
SSH鍵の登録画面
GitHub公式がドキュメントを公開しているので、こちらもご参照下さい。
GPG鍵の作成
> winget search gnupg
名前 ID バージョン ソース
--------------------------------------------------
GNU Privacy Guard GnuPG.GnuPG 2.4.3 winget
Gpg4win GnuPG.Gpg4win 4.2.0 winget
これも２つありますが、これらは異なるものです。GnuPG.GnuPGをインストールしてください。
> gpg --full-generate-key
gpg (GnuPG) 2.4.3; Copyright (C) 2023 g10 Code GmbH
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.
# 10を入力します
ご希望の鍵の種類を選択してください:
(1) RSA と RSA
(2) DSA と Elgamal
(3) DSA (署名のみ)
(4) RSA (署名のみ)
(9) ECC (署名と暗号化) *デフォルト
(10) ECC (署名のみ)
(14) カードに存在する鍵
あなたの選択は? 10
# 1を入力します
ご希望の楕円曲線を選択してください:
(1) Curve 25519 *デフォルト
(4) NIST P-384
(6) Brainpool P-256
あなたの選択は? 1
# 0を入力します
# また、`1w`や`3m`のように期限を設定できます。
鍵の有効期限を指定してください。
0 = 鍵は無期限
<n> = 鍵は n 日間で期限切れ
<n>w = 鍵は n 週間で期限切れ
<n>m = 鍵は n か月間で期限切れ
<n>y = 鍵は n 年間で期限切れ
鍵の有効期間は? (0)0
鍵は無期限です
# yを入力します
これで正しいですか? (y/N) y
# Your nameはあなたの名前です。本名じゃなくても、GitHubのIDじゃなくてもいいです。
# ただし、のちに設定する
# `git config --global user.name "Your Name"`の値と一致する必要があります。
# メールアドレスも同様です
GnuPGはあなたの鍵を識別するためにユーザIDを構成する必要があります。
本名: Your name
電子メール・アドレス: 12345678+github@users.noreply.github.com
コメント:
次のユーザIDを選択しました:
"Your name <12345678+github@users.noreply.github.com>"
# 間違いやミスがあれば、修正可能です。ない場合はOを入力します。
名前(N)、コメント(C)、電子メール(E)の変更、またはOK(O)か終了(Q)? O
# ここで、文字化けしまくってるpinentryのウインドウが表示されますが、
# とりあえずEnterを入力して、前に進まなかったら左のボタンを押下します。
たくさんのランダム・バイトの生成が必要です。キーボードを打つ、マウスを動か
す、ディスクにアクセスするなどの他の操作を素数生成の間に行うことで、乱数生
成器に十分なエントロピーを供給する機会を与えることができます。
gpg: C:\\Users\\user\\AppData\\Roaming\\gnupg\\trustdb.gpg: 信用データベースができました
gpg: ディレクトリ'C:\\Users\\user\\AppData\\Roaming\\gnupg\\openpgp-revocs.d'が作成されました
gpg: 失効証明書を 'C:\\Users\\user\\AppData\\Roaming\\gnupg\\openpgp-revocs.d\\thisisREVOKE.rev' に保管しました。
公開鍵と秘密鍵を作成し、署名しました。
pub ed25519 2024-01-04 [SC]
LONGLONGLONG
uid Your name <12345678+github@users.noreply.github.com>
こちらにも同じくed25519を使用します。pinentryが文字化けしている問題はよく分かりません。もしかすると、私の環境でのみ起こる現象かもしれません。文字が読み取れる場合はその指示に従ってください。
> gpg --list-secret-keys --keyid-format=long
[keyboxd]
---------
sec ed25519/ABCDEFG 2024-01-04 [SC]
LONGLONGLONG
uid [ 究極 ] Your name <12345678+github@users.noreply.github.com>
ここで、ABCDEFGの場所に表示されている鍵の識別子をコピーしておいてください。
subkeyの作成
> gpg --edit-key ABCDEFG
gpg (GnuPG) 2.4.3; Copyright (C) 2023 g10 Code GmbH
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.
秘密鍵が利用できます。
sec ed25519/ABCDEFG
作成: 2024-01-04 有効期限: 無期限 利用法: SC
信用: 究極 有効性: 究極
[ 究極 ] (1). Your name <12345678+github@users.noreply.github.com>
# ここから対話モードになります
# addkeyを入力します
gpg> addkey
# 10を入力します
ご希望の鍵の種類を選択してください:
(3) DSA (署名のみ)
(4) RSA (署名のみ)
(5) Elgamal (暗号化のみ)
(6) RSA (暗号化のみ)
(10) ECC (署名のみ)
(12) ECC (暗号化のみ)
(14) カードに存在する鍵
あなたの選択は? 10
# 1を入力します
ご希望の楕円曲線を選択してください:
(1) Curve 25519 *デフォルト
(4) NIST P-384
(6) Brainpool P-256
あなたの選択は? 1
# 0を入力します
# 先ほどと同じで、任意の期限を設定できます
鍵の有効期限を指定してください。
0 = 鍵は無期限
<n> = 鍵は n 日間で期限切れ
<n>w = 鍵は n 週間で期限切れ
<n>m = 鍵は n か月間で期限切れ
<n>y = 鍵は n 年間で期限切れ
鍵の有効期間は? (0)0
鍵は無期限です
# yを入力します (この時はなぜか2回)
これで正しいですか? (y/N) y
本当に作成しますか? (y/N) y
# ここでもpinentryがでるかもしれませんが、先ほどと同じです
たくさんのランダム・バイトの生成が必要です。キーボードを打つ、マウスを動か
す、ディスクにアクセスするなどの他の操作を素数生成の間に行うことで、乱数生
成器に十分なエントロピーを供給する機会を与えることができます。
sec ed25519/ABCDEFG
作成: 2024-01-04 有効期限: 無期限 利用法: SC
信用: 究極 有効性: 究極
ssb ed25519/HIJKLMN
作成: 2024-01-04 有効期限: 無期限 利用法: S
[ 究極 ] (1). Your name <12345678+github@users.noreply.github.com>
# saveを入力します
gpg> save
HIJKLMNの場所にある鍵の識別子をコピーしておいてください。
Git・GPG鍵の設定
> git config --global user.signingkey HIJKLMN
> git config --global commit.gpgsign true
> git config --global user.name "Your Name"
> git config --global user.email "12345678+github@users.noreply.github.com"
# 以下はWingetでインストールした場合のパスなので、絶対とは限りません
> git config --global gpg.program "C:\Program Files (x86)\gnupg\bin\gpg.exe"
一応、subkeyを作成しなくてもHIJKLMNの部分を先ほどのABCDEFGに置き換えることで署名できます。
GPG鍵の登録
gpg --armor --export HIJKLMN
HIJKLMNの識別子はgit config --global user.signingkeyで指定した鍵と同じ鍵の識別子を指定します。出力された全文をコピーし、SSH and GPG keysの「New GPG Key」を押下し、Titleには任意の名前、Keyにはコピーした内容を貼り付けてください。最後に「Add GPG key」を押下してGPG鍵を追加できます。
鍵の追加画面
GPG鍵の登録画面
こちらもGitHub公式がドキュメントを公開しているので、こちらもご参照下さい。
お疲れ様でした
以上でセットアップは完了となります。
cd your-project
pnpm install
git pull origin idk
mainかmasterリポジトリの変更が取得できないことがあるので、pullして取得します。
pnpm run dev
あとは同じように開発できるはずです。
Discussion