Misskey開発環境構築のすすめ
こんにちは
ほぐれつです
みなさんMisskeyというSNSはご存知でしょうか？
簡単に言うとDiscordとTwitterが合わさったようなSNSです。
Discordのようにサーバーが複数存在し、投稿に対するリアクションがTwitterのように「いいね」だけではなく、多数のスタンプから選べる、そんなSNSですね。
どんなSNSかは実際に使ってみたほうがわかりやすいので興味がある方はぜひ始めてみてください。
3月から私もMisskeyを使い始めたんですが、Misskeyはオープンソースのプロジェクトで開発に参加することができるんですよね。
仕事では触れない技術もたくさんあるし、力になれるかはともかく自分も参加してみようかなと思って、今回開発できる環境を構築してみました。
ネット上でもいくつか情報はありますが、それほど数もなかったのでここに私のやった手順も残しておきたいと思います。
ただ、Misskeyのようなwebサービスの開発は経験がなく、果たして自分のやった手順が正しいかは判断ができなかったので、初心者がやってみた記録として参考にしてもらえれば幸いです。
Misskeyの技術情報に関しては
こちらに書いてあったので共有しておきます。
あと、用語等は私より詳しい人がたくさんいるので適宜ググってもらえればと思います。
事前準備として、VSCodeとDocker Desktopを使用するのでインストールを済ませておいてください。
使用OSは手元ではMacとWindows両方確認していますが、おそらくどのOSでもだいたい一緒だと思われます。（それがDockerのいいところのはず）
一点注意が必要なのが、ホストOSがWindowsの場合、WSL2というWindows上でLinuxを実行できるシステムを使わないと正常にMisskeyを実行できないということなので、もしお使いのOSがWindowsの場合はWSL2も併せてインストールしてもらう必要があります。
WSL2で使用するLinuxディストリビューションですが、私はUbuntuを使用しました。
MacOS : Montrey 12.6.4 (Apple Silicon M1を使用)
Windows : Windows10 Home 22H2
手順
流れとしてはこうです。
- Misskeyリポジトリから自分のリポジトリへforkする。
- フォークした自分のリポジトリからローカルへcloneする。
- vscodeでプロジェクトフォルダを開き、Devcontainerへ接続する。
- コマンドをたたいて、ローカルでMisskeyを実行する。
ゴールはlocalhostでMisskeyの実行ができるまでです。
Devcontainerというのは、ざっくりいうと開発で必要なものをすべて入れたコンテナを作成する便利な機能ですね。
その必要なものを記述したファイルさえあれば誰がやっても同じ環境を作れるので、こうした不特定多数のメンバーで開発をするときは役立ちます。
上記の手順のうち、２までの手順は調べてもらったらわかると思うので、今回は割愛します。
ちなみに公式リポジトリは
ここです。
さて、手順について、「開発環境構築のすすめ」とか言っておいてなんですが、実はプロジェクトフォルダ内のCONTRIBUTING.mdというファイルに書いてあることを実施すれば構築は完了です。
ちょっと小さいですが、「Dev Container」と書いてある欄ですね。
VSCodeでDevcontainerに接続できたら、VSCode内のターミナルから128行目以降のコマンドをたたいていけば完了できるはずです。
pnpmというコマンドを使用するのですが、もし使えない場合は
「npm install」というコマンドを使用してインストールすればいいと思います。
その他、パッケージの依存関係でエラーがでるかもしれませんが、パッケージのバージョンを更新すると解決するかもしれません。
私はweb開発がまったくの初心者かつ、業務でVSCodeやDocker、GitHubを使用することもないのでローカルにcloneしたもののそこからどうすればいいのかまったくわからず1週間くらいあれやこれやしてました。
ですが、このファイルに書いてあったんですね。
Deccontainerも最初なんのことかわからなかったのですが、使ってみると少ない手順で環境構築ができたので、とても便利でした。
環境構築以外の情報もこのファイルに書いてあるので一読しておくとよいです。
最終的に「pnpm dev」とコマンドをたたくとlocalhost:3000でMisskeyが立ち上がるはずです。
一度実行に成功したら、次回以降はdevコマンドをたたいてしばらく待てばMisskeyを起動できます。
やってみて
最初Devcontainerを使わずにそれぞれ必要なコンテナを立てて環境構築しようと思っていたのですが、パッケージの依存関係まわりにはだいぶ苦戦させられましたね。
そのあとDevcontainerの存在に気付いてからあっさり解決して、Devcontainerすげぇ...ってなりました（小並感）
また、WindowsでWSL2を使用しながらMisskeyを実行すると、かなりメモリを食いますので、.wslconfigというファイルを使用してメモリ使用上限を制限すると負担を抑えられるかもしれません。こちらもググってもらえれば情報があります。
CPUもビルド時にかなり負荷がかかっているので、古めのPCだとちょっときついかもですね。
終わりに
この記事が困っている人の力になれたらうれしいです。
Typescriptはまったく未経験なので、勉強しつついつかはContributeできたらなぁと思います。
それでは
