WSL2を使ってWindowsでMisskey開発をはじめよう

Misskey Advent Calender 2020 9日目の記事です。

この記事は、2020年12月(Misskey v12.62.2)時点の情報で作成されています。

WindowsでMisskey開発をするとき、環境構築はどのようにしていますか?Git for Windowsをインストールして、Nodeを何らかの方法でインストールして、Postgresをインストールして、Redisのバイナリが大昔のものしか提供されてなくて……クリックしまくらなきゃいけません。新しい環境を立ち上げるたびにこれをやりますか?さらに、Power Shellとbashのコマンドが違ったり、改行コードが違ったり……。Windowsで開発するのは大変です。

そもそもmacOSやLinuxで開発していますか?そういう方でも、この記事を読んで普通のWindowsで開発してみようかなと思っていただければと思います。

Windowsでは、WSL(Windows Subsystem for Linux)を使えば、Linuxをお使いの方が使い慣れているパッケージ管理システムやbashを使いながら、VS Codeで素直に開発することができます。WSLを使ってMisskey開発をはじめましょう!

この記事は主として、Misskeyを自分のサーバーやクラウドでLinuxに建てたことがある方やWindowsでの開発をすでに経験した方むけに書いています。そういう経験がない方でも、ローカル環境でMisskeyを立ち上げるまでGUI操作とコピペだけで進めるようになっています。現状のMisskeyで使われている言語やライブラリについては、こちらのしゅいろの記事を読むとよくわかります。ぜひMisskey開発にチャレンジしていただけると有難いです。

WSLについてのさらなる蘊蓄、バージョン1と2の違いの説明などは、ここの主題ではないため省きます。魔法の道具だと思って使い始めましょう!

WSLのセットアップ

この記事では、WSL 2をインストールし、扱うOSをUbuntuとします。

WSLのセットアップ方法は、この記事でも書きたいのですが、そうすると混乱を招きそうなので下のリンクの公式ドキュメントをご覧ください。

Windows 10 用 Windows Subsystem for Linux のインストール ガイド
https://docs.microsoft.com/ja-jp/windows/wsl/install-win10

というのも、Windowsの未来のアップデート(21H1?)でWSLのインストール方法が新しくなるはずだからです(窓の杜の記事)。古いインストール手順は、いくつかの長いコマンドの入力など少し面倒くさいものだったのですが、新しいインストール方法は、管理者権限のPowerShellで wsl --install して再起動するだけで済みます。

ぶっちゃけて言えば、古いインストール手順は面倒くさいので説明したくないです。ごめんなさい。

(私は今回は古いインストール方法でインストールしました。インストール中に再起動したときインターネットに繋がらなくなったのですが、Windowsの設定 – ネットワークとインターネット で診断を実行すると直りました。)

初回起動

スタートメニューにUbuntuが出現するので、クリックすればUbuntuが起動します。

余談ですが、私がUbuntuを初回起動したところ、ここで次のようなエラーが表示されました。

0x80370102 ????????????????????????

エラーコードを見ると、UEFI BIOSで仮想化についての設定をすればいいようです。

私が今回使っているのは組んだばかりのASUSのB550マザーでした。この場合、CPU設定のSVM Supportを有効にしたところ正常に起動しました。

Ubuntuが正常に初回起動した

WSLにlocalhostで接続できるように

ちょっとした便利機能を設定しておきます。WSLにlocalhostで接続できるようにしてみましょう。

C:\ユーザー\[ユーザー名]\.wslconfig という名前のファイルを作成し、以下の一行を追加して保存します。

[ユーザー名]は自分のユーザーディレクトリに置き換えるのですが、エクスプローラーであれば%USERPROFILE%にアクセスすることで自分のユーザーディレクトリにたどり着くことができます。

localhostForwarding=True

この設定は再起動すれば適用されるのですが、いったん次の作業をします。

パッケージのアップグレード

まずはパッケージを最新のものにアップグレードしましょう。

sudo apt update
sudo apt upgrade -y

WSL2 Ubuntuの再起動

WSLを再起動したいのですが、bash上で sudo reboot しても効きません。WSLのUbuntuを再起動するには、PowerShellを開き、次のコマンドを実行します。

wsl -t Ubuntu

各種パッケージのインストール

もう一度Ubuntuを開き、各種ソフトウェアをインストールしていきます。

# Node.js
curl -sL https://deb.nodesource.com/setup_current.x | sudo -E bash -
sudo apt install -y nodejs
node -v

# PostgreSQL
wget https://salsa.debian.org/postgresql/postgresql-common/raw/master/pgdg/apt.postgresql.org.sh
sudo sh apt.postgresql.org.sh -i -v 13
sudo /etc/init.d/postgresql restart

# Redis
sudo add-apt-repository ppa:chris-lea/redis-server
sudo apt update
sudo apt install -y redis-server
# systemctlではなくservice
sudo service redis-server start

# build-essential
sudo apt install build-essential -y

PostgreSQLのセットアップ

psqlの操作も通常通りです。

psqlを起動し…

sudo -u postgres psql

パスワードの設定(hogeとしていますが自分で設定しましょう)とMisskey用データベース(mk1としています)の作成をして、psqlから抜けます。

alter role postgres with password 'hoge';
create database mk1;
exit

Misskeyリポジトリのclone

あらかたセットアップが終わったので、gitでMisskeyをcloneしましょう。

git clone https://github.com/syuilo/misskey.git

gitやGitHubをよく知らない方は、こちらのサイトなどで頑張って学習してください。学習して損になることは全くないはずです。

VS Codeに拡張機能をインストールする

VS CodeにWSL拡張機能をインストールします。VS Codeをさも当たり前のように使っていますが、使ったことのない方はダウンロードしてください。

「Remote – WSL」拡張機能をインストールします。拡張機能検索でwslと入力すると最初に出てくると思います。初めてVS Codeを使う方は日本語化拡張機能「Japanese Language Pack」もついでに入れておきましょう。

VS Codeでワークスペースを開く

サイドメニューに赤矢印で示した「リモート エクスプローラー」タブが現れるので、クリックします。そしてさらに緑矢印で示したアイコンをクリックします。

すると、新たにVS Codeのウィンドウが出現します。前のウィンドウは閉じて構いません。

フォルダーを開く… misskeyOK の順にクリックします。

そうすると、Misskey開発者にとってはおなじみの画面が出てきます。

Misskey開発を経験したことのある方は、もうこの記事を読み終えていただいてかまいません。しかし、一点だけ注意点がありますので、次の注意点の項だけは読んでおいてください。

Misskey開発をしたことのない方は、次回起動時に下のコマンドを実行することを覚えておいて、引き続きMisskeyをローカルで建てるまでやっていきます。

注意点: 起動時のコマンド

WSLでは、systemdなどのデーモン管理ソフトはおろか起動スクリプト等も効きません。そのため、システムやWSLを(再)起動した後には、いちいち以下のコマンドを入力して手動でRedisとPostgresを起動してやる必要があります。

sudo /etc/init.d/postgresql restart; sudo service redis-server start

もっとも起動後にsudo apt update/upgradeをするのはLinux的には常識ですので、手間としてはそこまで変わらない気もします。

自動保存を有効にする

VS Codeでファイルを編集した後にいちいちCtrl + Sをするのが面倒なので、ファイル – 自動保存 をクリックし、自動保存を有効にします。

ローカルでMisskeyを起動するまで

ここまでで、公式のMisskey構築の手引きの3の4番までを済ませました。続きをやっていきましょう。

npmパッケージをインストール

npx yarn install

.config/default.ymlを作成

Misskeyの基本的な設定ファイル「.config/default.yml」を作成します。

.configを右クリックし、[新しいファイル]をクリック。枠が出てくるので、default.ymlと入力しEnter。

次の内容を貼り付けます。PostgreSQLのパスワードなどの設定は自分のものに置き換えます。

#   アクセスするURL
url: http://localhost:3000

#   ポートを3000とする。
port: 3000

# ● PostgreSQLの設定。
db:
  host: localhost
  port: 5432
  db  : mk1      # 〇 PostgreSQLのデータベース名
  user: postgres #   PostgreSQLのユーザー名
  pass: hoge     # ● PostgreSQLのパスワード

#   Redisの設定。
redis:
  host: localhost
  port: 6379

#   IDタイプの設定。
id: 'aid'

Misskeyをビルド

npm run build

データベースを準備

npm run init

起動してみる

npm start

ファイヤーウォールのウィンドウが出てくるので、チェックマークを入れ替えて [アクセスを許可する] をクリックします。

http://localhost:3000 にブラウザでアクセスし、Misskeyが表示されたら成功です!

v12.62.2の初期画面

管理者アカウントの情報を入力して[完了]をクリックするとまっさらなタイムラインが現れます。

v12.62.2の新規登録時のタイムライン

いかがでしたか?

とりあえずMisskeyを起動できたので、今回の記事はここで終わりとさせていただきます。

諸々のソフトウェアをaptで管理でき、PowerShellの使い方をいちいち調べる必要がないことなどにとても感動したので、Adventの記事とさせていただきましたが、いかがでしたでしょうか。WSLをすでに使っている開発者の方にとっては当たり前だったのかもしれませんね。ほかの仮想環境のほうがいいよという方もいるかもしれませんが、Windowsでオプション機能として手軽に導入でき、VS Codeとの連携がしっかりしているのはとても魅力に思います。

Windowsの次回アプデまではセットアップが面倒なこと、systemdが使えないことの2点以外は特に欠点が見当たらないので、まだ使ったことのない方はぜひ導入してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP