2023年に調べたり構築した開発環境について

はじめに

2023年に調べたり構築した開発環境について、振り返っておこうと思います。基本的に Linux をメインに Web アプリの開発環境を構築することが多いです。

今どきの Web アプリの開発環境というと、VS Code + Docker + Git が必須となっているので、これらをベースとして環境構築をしています。2023年は、これらを使った開発環境の構築をしていました。また、構築にあたって、いろいろと調べていました。

Visual Studio Code

Visual Studio Code は、Linux、Windows、macOS に対応していて、Intel系 CPU だけでなく ARM 系 CPU にも対応している OSS ベースの高機能エディタということで、重宝しています。VS Code や、vscode と省略されることがあります。

本体だけでも十分便利なのですが、拡張機能も充実しているのが、ありがたいです。ただし、使いたい拡張機能を考えなしで追加していくと、どんどん本体の動作が重たくなっていくのと、干渉するものが出てくるので、厳選するようにしています。

プロファイル機能を使うと、使用する拡張機能をある程度管理できるようですが、設定がそこそこ面倒な印象を持っているため、この機能はあまり使っていません。

拡張機能としては下記は必ずインストールしています。拡張機能名: 拡張機能 ID で表記してあります。

• Japanese Language Package: MS-CEINTL.vscode-language-pack-ja
• Docker: ms-azuretools.vscode-docker
• Remote Development: ms-vscode-remote.vscode-remote-extensionpack

特に、Remote Development には下記が含まれているので、重宝しています。

• Dev Containers: ms-vscode-remote.remote-containers

Docker

基本は Docker Engine を Linux マシンへインストールして使っています。一応、Docker Desktop も使えるようにはしていますが、こちらは個人利用をするときに使うだけなので、あまり使っていません。

• Docker Engine
• Docker Desktop

Docker Desktop が提供する GUI も便利ですが、ほとんどの部分については、VS Code + Docker 拡張機能で対応できることなので、基本的に VS Code を使うようにしています。とはいえ、Docker Desktop の拡張機能も便利なものがあります。Docker Desktop を使う場合は、次のものをインストールしています。

• Resource usage
• Volumes Backup & Share
• Disk Usage
• Logs Explorer
• Portainer

VS Code の Dev Containers 拡張機能を使うと、開発コンテナーを使うことができるようになります。単純に VS Code をアタッチするという手軽な使い方から、devcontainer.json を用意して本格的に使うということもしています。

さらに、開発コンテナーを自分でビルドしてカスタムイメージも用意して使っています。Docker Hub と GitHub に自分でカスタマイズしたものを公開しています。いずれも https://github.com/devcontainers/images/tree/main/src/typescript-node で公開されている typescript-node 開発コンテナーをベースとしています。

Docker イメージ名	GitHub URL	説明
hiro345g/devcon-gnpr	https://github.com/hiro345g/devcon-gnpr	typescript-node 開発コンテナー(go, python, ruby, desktop-lite, docker-outside-of-docker, git, git-lfs)
hiro345g/devcon-gnr	https://github.com/hiro345g/devcon-gnr	typescript-node 開発コンテナー(go, ruby, desktop-lite, docker-outside-of-docker, git, git-lfs)
hiro345g/devnode-py-desktop	https://github.com/hiro345g/devnode-py-desktop	typescript-node 開発コンテナー (python,desktop-lite, docker-outside-of-docker, git, git-lfs)
hiro345g/devnode-desktop	https://github.com/hiro345g/devnode-desktop	typescript-node 開発コンテナー(desktop-lite, docker-outside-of-docker, git, git-lfs)
hiro345g/devcon-node	https://github.com/hiro345g/devcon-node	typescript-node 開発コンテナー(docker-outside-of-docker, git)

最初、Node.js 環境と docker-outside-of-docker が使える開発コンテナー環境を自作していたのですが、mcr.microsoft.com/devcontainers/typescript-node をベースとして feature を組み合わせた Docker イメージを作れば手軽に環境構築ができるので、そちらの方法へ変えました。

Python、Go、Ruby などを使った Web アプリ開発もあるので、それに合わせてイメージを用意してあります。Web アプリの開発なので、Web ブラウザも使えるように desktop-lite の feature も組み合わせてあります。

VS Code 開発コンテナーーのカスタム Docker イメージ

本記事に Like を結構いただいたので、VS Code 開発コンテナー用カスタム Docker イメージの開発方法 という記事を公開しました。どういった方法で、これらのカスタム Docker イメージを作成しているのかを解説しています。よろしかったら、こちらもご覧ください。

Git

Git 関連については VS Code から使うことが多いので、下記拡張機能をインストールしています。

• GitLens
• Git Graph
• Git History

GitLab

Git リモートリポジトリについては、専用の Linux KVM 仮想マシンを用意して、GitLab Community Edition を動かしています。

• GitLab Community Edition

GitLab は、それなりに高いリソースを要求するので、手軽に Git リモートリポジトリを用意したい場合には適していません。ある程度 Git について理解していて、十分な性能を持つマシンがあって、Git システムを構築したいと考えている人向けになります。高性能でビジネスユースにも対応できるため、本格的に自宅で開発環境を構築したい人は興味を持つはずです。

ちなみに Linux KVM（Kernel-based Virtual Machine）というのは、Linux カーネルに組み込まれているオープンソースの仮想化技術です。Linux をハイパーバイザーとして動作させ、複数の独立した仮想マシンを稼働させることができます。https://git.kernel.org/pub/scm/virt/kvm/kvm.git で開発されています。Docker Desktop for Linux でも、Linux KVM が必要で、これを使って Docker ホストを動作させるための仮想マシンが用意されます。

hiro345g/gblan

ここで、大学生の知り合いにプライベートな Git システムの環境を推奨する機会があったのですが、自分が使う GitLab の環境は推奨できませんでした。大学生に、高性能マシンを普段使うマシンとは別に用意するように言うのは、なかなか難しいところです。自分はかなりハードに Git システムを使っていますが、大学生ぐらいだと分散バージョン管理システムの必要性について、あまり理解できていないことが多いはずです。必要性はわかったとしても、別マシンを用意するほどまではいかないのです。

ということで、Git システムも含めた Web アプリ用の開発環境を1台のマシンで構築できるように、Docker で動作する gblan というシステムを開発してみました。

• hiro345g/gblan

これは、CoreDNS, NGINX, GitBucket, PostgreSQL, Adminer, OpenSSH Server を LAN 環境で使えるようにするもので、DNS も含めてあることからわかるように、FQDN の HTTPS 対応 Web アプリを実行する環境を Docker ネットワーク内に閉じて用意することができます。それで、作ってみたのですが、仕事でも使えるようにと凝りすぎたために、これも大学生の知り合いにプライベートな Git システムの環境構築として使うように推奨できないものとなってしまいました。

例えば https://www.hiro345.net/ という URL で動作させる Node.js の Web アプリ開発をしたいとします。その場合は、hiro345g/gblan と hiro345g/devnode-desktop を組み合わせて Docker コンテナーを用意します。https://www.hiro345.net/ 用の設定をしてから、Docker コンテナーを起動します。そうすると、それなりの数のサービスが起動しますが、これらのサービスでは、Nginx の Docker コンテナーが提供する https://www.hiro345.net/ を使うという環境になります。

Docker 環境内の https://www.hiro345.net/ へアクセスするには、hiro345g/devnode-desktop イメージを使った Docker 開発コンテナーに含まれる noVNC を使います。これは、開発コンテナーの desktop-lite フィーチャー機能により提供されるもので、Docker ホストマシンの Web ブラウザから http://localhost:6080 を開くと、Docker 開発コンテナーのデスクトップ環境を使えるようになります。

そこで Firefox か Chromium を起動して https://www.hiro345.net/ を開くと、Nginx の Docker コンテナーが提供する https://www.hiro345.net/ へアクセスすることができます。

軽量の Git システム

ということで、軽量の Git システムを探していました。候補としては、次の3つのどれかが良さそうだと考えていました。

• GitBucket
• Forgejo
• Gitness

ここで、Forgejo については、Gitea からフォークされたものです。Gitea の中心的な開発メンバーと方針が異なるメンバーが Gitea プロジェクトから分離して Forgejo プロジェクトを起ち上げて開発しています。

ちなみに、Gitea は個人開発されていた Gogs をフォークしてチーム開発ができるようにしたものです。Gogs は MIT ライセンスというオープンソースのライセンスで公開されていて、Gitea も MIT ライセンスで公開されています。MIT ライセンスなので、Gitea のライセンスには、Gogs も表記されています。

このことから推測ができると思いますが、Forgejo も MIT ライセンスで公開されていて、Forgejo のライセンスには Gitea と Gogs の両方が表記されています。ということで、Forgejo と Gitea と Gogs はどれも似ているのですが、微妙に実装が違っています。どれを選択するのかは、好みで決めれば良いでしょう。

これらの中で、一番手軽なのはどれかと言うと、難しいところです。日本語の情報が多いのは GitBucket です。JavaVM で実行できるので、Java のランタイム環境があるなら、これが良いです。Docker が動く環境なら、どれも公式の Docker イメージがあるので、簡単に動作させることができます。Windows や Linux のネイティブ環境で実行するということなら、Gitness が手軽です。

ちなみに Forgejo は Go で実装されているので Windows 版もあると思っていたらリリースにはなく、Linux 用のバイナリーしかありませんでした。Gitea の方は Linux、Windows、macOS 用のバイナリファイルがリリースされていました。

Gitness は CI/CD としては良さそうでしたが、イシュー管理などはなかったので、GitLab や GitHub に使い慣れていると、機能面で物足りなさを感じます。プライベート Git システムを構築するなら、Forgejo か Gitea の方が良さそうです。Windows だと Forgejo は Docker で動かすことになるので、Gitea を使うのが良さそうです。

プログラミング言語バージョン管理

プログラミング言語バージョン管理については、VS Code + Docker の開発コンテナーを使うことで解決することが多いのですが、ネイティブ環境でもプログラミング言語のバージョン切り替えがしたいときもあります。

Ubuntu を使う場合は、apt でインストールできるシステムのものを基本的に使いつつ、他のバージョンを使う必要があるときに、プログラミング言語バージョン管理用ソフトウェアで管理しているものを使うようにしています。

プログラミング言語バージョン管理用ソフトウェアとしては、Node.js なら nodenv、Python なら pyenv、Ruby なら rbenv などのように、プログラミング言語単位でいろいろあります。これらを個別に使うと大変なので、anyenv を使って管理しています。ただ、最近は anyenv の更新がされていないようなので、asdf-vm (`asdf`` コマンド) へ移行しつつあります。

• anyenv/anyenv
• asdf-vm
• jdx/mise

jdx/mise : 2024-01-10 追記

2024年になって知ったのですが、asdf-vm と互換性のある jdx/mise というものがあるそうです。こちらも良いそうなので一覧へ追加しました。

Java ランタイムを使うプログラミング言語系については SDKMAN! を使用しています。

• SDKMAN!

個人的には、最近は Java プログラミングをする機会が減っているので、あまりきちんとは使っていません。どちらかというと Docker を使うことが多いです。Java はいろいろと環境が変わっていて、少し目を離しているとわからなくなってしまうのですが、Oracle、OpenJDK あたりと、その周辺の動きを確認しながら使っています。

Bash のプロンプト

• b-ryan/powerline-shell
• starship/starship
• Oh My Posh

Bash のプロンプトについて、以前は、あまり凝っていなかったのですが、Docker や Git をよく使うようになってから、プロンプトに表示しておきたい項目が増えてきたので、b-ryan/powerline-shell を使うようになりました。Nerd 対応のフォントも必要なので、それもインストールして、ターミナルや VS Code で使用するように設定しています。

ここで、Docker コンテナーの中では powerline-shell を使おうとすると Python が必要となってしまいます。このためだけに Docker イメージへ Python ランタイムをインストールしたカスタマイズイメージを作るのも大変なので、他に軽量で使えるものがないか探しました。そのときに、starship/starship を見つけたので、これを使ったコンテナーの利用方法を下記に用意して公開しました。

• hiro345g/devnode-starship

その後、開発コンテナーを使うようになったのですが、Microsoft が提供する開発コンテナーでは Oh My Posh が使われているようで、それをそのまま使っていることが多いです。

VS Code をアタッチして開発コンテナーを軽く使う場合で、Nerd フォントを用意するまでもないけどデフォルトよりはリッチなプロンプトが欲しい時は、starship を使っています。

starship

startship の使い方を簡単に紹介しておきます。

startship はプログラミング言語 Rust で実装された Powerline です。starship は Nerd フォントがなくても、それなりの表示をしてくれるプリセットがあり、実行ファイルも単体で提供されているので、最初に使ってみる Powerline 実装としてお薦めです。

プリセットは Presets | Starship を見て選ぶと良いでしょう。plain-text-symbols, pastel-powerline, tokyo-night, bracketed-segments などがあります。

それぞれの設定を有効にするには、次のように starship preset コマンドを使います。

starship preset plain-text-symbols > ~/.config/starship.toml
starship preset pastel-powerline > ~/.config/starship.toml
starship preset tokyo-night > ~/.config/starship.toml
starship preset bracketed-segments > ~/.config/starship.toml

starship では、⬢ [Docker] がプロンプトに表示されるので、コンテナー内で実行していることがわかります。
とはいえ、アイコンの 🐳 マークもつけたいときは、~/.config/starship.toml ファイルを編集します。
plain-text-symbols の場合は次のように指定することで表示できます。

[character]
success_symbol = "🐳 [>](bold green)"
error_symbol = "🐳 [x](bold red)"
vimcmd_symbol = "🐳 [<](bold green)"

インストールしたら、source コマンドで ~/.bashrc の内容を反映します。

source ~/.bashrc

Nerd 対応フォント

Powerline 系のプロンプトを使う場合は Nerd 対応フォントが基本的に必要です。日本語に対応しているフォントでは HackGen、Cica などが有名です。

• 白源
• Cica

ここでは、HackGen のフォントをダウンロードしてインストールする方法について簡単に説明しておきます。

Windows では、ダウンロードした zip ファイルを展開してから、インストールする ttf ファイルを右クリックします。すると、メニューが表示されるので、「インストール」を選択します。

macOS では、Finder でフォントをダブルクリックすると、フォントのプレビューウインドウが開くので、「フォントをインストール」をクリックします。

Linux では、ダウンロードした zip ファイルを展開して ~/.local/share/fonts へ置きます。

wget https://github.com/yuru7/HackGen/releases/download/v2.9.0/HackGen_NF_v2.9.0.zip
mkdir -p ~/.local/share/fonts/
unzip HackGen_NF_v2.9.0.zip -d ~/.local/share/fonts

VS Code のターミナルでこれらのフォントを使うには、VS Code のユーザー用 settings.json のターミナル用フォントの設定で指定します。

{
  // 略
  "terminal.integrated.fontFamily": "'HackGen Console NF'"
}

Intel N100 ミニ PC

2023年の開発環境構築の調査については、基本は Linux で開発環境の構築をしていたのですが、Windows でも同じように環境構築ができるようにしたかったので、12月に Intel N100 の CPU を搭載した Windows Pro のミニ PC を購入して調査をしました。ミニ PC はメモリ 16 GBで 250 GB の SSD を搭載しているものですが、安価に手に入れることができました。

Windows Pro なので、リモートデスクトップでリモートから利用可能で、Hyper-V も動作します。Hyper-V で Windows 評価版の仮想マシンを動かすことができて、その中で WSL2、VirtualBox、Docker for Desktop、VS Code もインストールして動かすことができます。これのおかげで Windows 環境での Docker を使った開発環境の構築についての調査が捗りました。Hyper-V が使える環境はあると便利ですね。

ただ、USB デバイス周りは VirtualBox の Extension Pack の方が高機能なので、USB メモリへディスクイメージを書き込んだりするときに使うソフトウェアの調査には VirtualBox の仮想マシンの方が使いやすいです。

ちなみに、自分が入手した Intel N100 ミニ PC では、SATA 対応の内蔵 SSD を増設することもできます。USB 3.0 対応のコネクタもあるので、そちらへ USB SSD でストレージの増設をすることもできます。つまり、USB ブートの Linux を用意して、デュアルブートにできます。2023年中はできなかったのですが、2024年には対応する予定です。個人的には Linux を使っていることが多くて、調べることがあるときだけ Windows を使っています。Windows でも Hyper-V と VirtualBox と WSL2 のおかげで、Linux マシンに近い環境は用意できますが、ハードウェアの性能をしっかり使い切るなら、ネイティブで Linux を動かして使えた方がよいので、デュアルブートにします。

Intel N100 ミニ PC で構築する開発環境 : 2024-01-10 追記

Intel N100 ミニ PC で構築する開発環境について、zenn.dev で記事を書くことにしました。かなり長くなりそうですが、時間を見つけて書いていく予定です。第１弾は下記で公開しています。

よろしかったら、ご覧ください。

以上、2023年に調べたり構築した開発環境について簡単に振り返りました。細かいことを書こうとすると、たくさんあるのですが、振り返りということで、概要の説明だけにしました。2024年も使いやすい開発環境について考えていきたいです。