WSLに置いたdevcontainer.jsonからJetBrains devcontainerを起動する

弊社ではPHPによる開発で使用するIDEはPhpStormが標準となっています。

PhpStormも今どきの流行かdevcontainer対応されており、されているからには使いたいと思うのですが、欲しい機能が無かったり期待した通り動かなかったりということが稀によくあるため、使う側が気を使って工夫してあげる必要があります。

今回はその中の1つ
「WSL上に配置したファイル(プロジェクト)からのdevcontainer起動が正常に行えない」
という問題の回避方法が分かったので共有しておこうという趣旨です。

公式に対して報告されている不具合としてはこれにあたると思われます。
https://youtrack.jetbrains.com/issue/IJPL-65925

そろそろ直りそうな気配もあり、直ったらこの記事も不要になるのですが、それならそれで喜ばしいということで。
(現時点の最新バージョン2025.1では直っていない)

結論から書きますと「devcontainer.jsonでworkspaceMountを指定する」となります。

以下は結論に至る経緯です。

Jetbrains devcontainerでは以下の2通りの方法でdevcontainerを作ることが出来ます。

  • ローカルプロジェクトから作成
    • ホスト機に置かれたファイル(devcontainer.json)を使って起動。
  • VCSプロジェクトから作成
    • VCS(Git)に置かれたファイル(devcontainer.json)を使って起動。
      • 実際の動作としては、使うファイルだけテンポラリディレクトリにcloneされてそこから起動される
    • 起動時にDocker volumeが作成され、そこにIDEが開く対象としてGit cloneされる

ただ、現状「VCSプロジェクトから作成」が以下のような点により使いにくいです。

  • Git cloneした内容がホスト機から直接見られない
    • HTMLやMicrosfot officeのドキュメントを入れてたりすると見られない
  • Git cloneした内容が複数のコンテナで共有できない
    • 専用のランダムな名前のDocker volumeが作成されるので、予めcompose.ymlで指定しておくということが出来ない
    • 静的なファイルだけWebサーバのコンテナで配布するとか、Javascriptは別コンテナのnodeで動かすといったことが出来ない
  • Dockerで使用する設定ファイルをBind mountしにくい
    • devcontainerが使用するファイルだけテンポラリディレクトリにcloneされるのでローカルで一時的に変更を試すといったことが出来ない

であれば「ローカルプロジェクトから作成」を使おうという話になりますが、この時「ローカルプロジェクト」がWSLに置いてあると正常に動作しないという問題にあたるわけです。(Windowsに置いてあれば問題なく動作するが、Dockerのディスクアクセス速度の都合でWSL上に置きたい)

状況を確認するために、以下のファイルを使用します。

\\wsl.localhost\Ubuntu\home\kurosawa\devtest.devcontainer\devtestdevcontainer.json

\\wsl.localhost\Ubuntu\home\kurosawa\devtest.devcontainer\compose.yml

このdevcontainer.jsonを使いdevcontainerを起動すると、IDEからディレクトリの中身(\\wsl.localhost\Ubuntu\home\kurosawa\devtest)が見えません。

Docker inspectでMountsを確認すると以下のようになっています。

Docker単体であればWSLに置いても特に問題なくマウント出来たはずなので確認します。

compose.ymlにvolumesを追加。

docker composeを使って直接起動します。

問題なくディレクトリ(\\wsl.localhost\Ubuntu\home\kurosawa\devtest)の中身が確認出来ます。

Docker inspectでMountsを確認すると以下のようになっています。

これらを見るに以下のような状況と思われます。

  • Dockerはスラッシュ区切りのパスがうまく認識できない
  • Dockerはバックスラッシュ区切りのパスは正常に認識できる
  • devcontainerから起動するとスラッシュ区切りのパスでマウントされる

compose.ymlを上記のまま、devcontainerから起動すればよいのでは?と思いましたが、スラッシュ区切りのパスでマウントされてしまいます。

それならばとcompose.ymlでバックスラッシュ区切りのフルパスを指定してみますが、相対パスで指定した場合と同じでスラッシュ区切りのパスでマウントされます。

では、バックスラッシュ区切りのパスにするにはどうしたらいいかというと、devcontainer.jsonのworkspaceMountで指定します。

compose.ymlのvolumesは不要なので削除します。(書いてもdevcontainer.jsonの設定で上書きされる)

workspaceMountで指定すると、バックスラッシュのパスでマウントされます。

workspaceMountは相対パスで指定しても大丈夫です。
devcontainer.jsonを共有することを考えるとこちらの方がよいでしょう。
マウント先のパスを変更することも出来ます。

devcontainerは指定したcompose.ymlをそのまま使うわけではなく、devcontainerの動作用に改変して使用します。

挙動からの推測になりますがその改変処理時に、compose.ymlのvolumesに書いたパスはdevcontainerが一旦解釈して、結果スラッシュ区切りのパスになりdevcontainer.jsonのworkspaceMountはdevcontainerが解釈せずそのまま使われる。ということなのだと思います。

Docker Desktopを用いてLinux(Ubuntu)環境を作成しました。

こんにちは、2024年4月に入社した吉岡です。

Linuxの勉強のためVirtualBoxを用いた環境の構築を行ったことがありましたので、今回はDocker Desktopを用いてLinux(Ubuntu)環境構築を行いました。自分で実際に行った手順をブログにまとめました。

・使用したもの

Windows 11 Pro : 23H2
Docker Desktop 4.37.1 (178610)
Ubuntu 24.04.01 LTS

Docker Desktopインストール手順

1. 仮想化を有効にするために「Windowsの機能の有効化または無効化」を開き、「Linux用Windowsサブシステム」と「仮想化マシンプラットフォーム」を選択し、「ok」を押下する

2. 「Docker Desktop for Windows-86_64」をダウンロードする

Windows | Docker Docs

3. Docker DesktopInstaller.exeを起動する

4. デスクトップにショートカットを作成するか選択し、「OK」を押下する

5. インストールに成功したら「close」を押下する

6. Docker Desktopを起動する

7. サブスクリプションサービス同意画面で「accept」を押下する

8. DockerアカウントでサインインまたはDockerアカウントを作成する

9. Docker desktopにサインインすると、アンケート調査が表示されるので回答するまたは「skip」を押下する

10. Docker Desktopのホーム画面が表示されていることを確認する。

11. Windows Power Shellを開き、「docker version」と入力しEnterキーを押すとDockerのバージョン情報が表示されることを確認する。

12. Windows Power Shellを開き、「wsl -l -v」と入力しPCのEnterキーを押すとdocker-desktopが起動している。

仮想化コンテナの作成および実行手順

1. Windows Power Shellを開き、任意のディレクトリに移動する。

2. 任意のUbuntuのDocker imageを取得するために、「Copy」を押下しコマンドを取得する。

*以下の例では、Ubuntu 24.04 LTSを使用する。

ubuntu – Official Image | Docker Hub

3. Windows Power Shellでコピーしたコマンドを入力し、PCのEnterキーを押下し、UbuntuのDocker Imageをダウンロードする。

4. Windows Power shellで「docker images」と入力し、Enterキーを押下してでDocker Imageを取得できたことを確認する。

*Docker Desktopでも確認可能

5. コンテナを作成および実行するために「docker run -it -d –name 任意のコンテナ名 任意のDocker image名」を入力し、PCのEnterキーを押下する。

*以下の例では、コンテナ名「MyUbuntuContainer」、基となるDocker Image「ubuntu:24.04」

6. 「docker ps -a」と入力し、コンテナ作成および実行後を確認する。

*Docker Desktopでも確認可能

7. 実行したコンテナ内に入るために「docker exec -itコンテナ名 bash」と入力し、PCのEnterを押下する。

8. 動いているUbuntuのバージョンを確認するために「cat /etc/issue」と入力し、PCのEnterを押下する

9. コンテナ内部から抜け出すため、「exit」と入力し、PCのEnterキーを押下する。

10. 実行したコンテナの「docker stop コンテナ名」を入力し、コンテナを停止させる。

11. 「docker ps -a」と入力し、コンテナが停止していることを確認する。

*Docker Desktopでも確認可能

参考:

Windows | Docker Docs

ubuntu – Official Image | Docker Hub

すてきなLaradock

福岡拠点の宮里です。
Dockerを勉強し始めました!
DockerでLaravel開発環境を構築する場合に便利なLaradockというパッケージがあり、併せて勉強中です。

Laradockとは

PHP開発環境を構築できるDockerイメージのパッケージです。
DockerでLaravelプロジェクトを実行することに焦点を当てて開発されています。
Laravel以外にもSymfony、CodeIgniter、WordPress、Drupalなどの他のPHPプロジェクトもサポートしています。
officialのDockerイメージをベースに拡張したパッケージなので信頼性があるとのことです。

Laradockが魅力的なのは、なんといってもその豊富なソフトウェア群です。
build→upで必要なライブラリを都度追加・更新が行えます。

備忘録としてそのパッケージをリストアップしました。(2018年11月時点)

サポートしているソフトウェア(一部)

Portainer

Docker管理WebGUIツール
公式サイト: https://portainer.io/

Docker Registry

Dockerプライベートレジストリサーバ
Dockerドキュメント: https://docs.docker.com/registry/

Docker Web UI

DockerプライベートレジストリWebUI管理ツール
Github: https://github.com/kwk/docker-registry-frontend

MySQL

データベースサーバ
公式サイト: https://www.mysql.com/jp/

MariaDB

MySQL派生のオープンソースデータベースサーバ。
公式サイト: https://mariadb.org/

phpMyAdmin

MySQLサーバー管理ツール
公式サイト: https://www.phpmyadmin.net/

PostgreSQL

オープンソースデータベースサーバ。
公式サイト: https://www.postgresql.org/

pgAdmin

PostgreSQLサーバー管理ツール
公式サイト: https://www.pgadmin.org/

Microsoft SQL Server

データベースサーバ
公式サイト: https://www.microsoft.com/en-us/sql-server/sql-server-2017

Redis

オープンソースのメモリ内データ構造ストアで、データベース、キャッシュ、メッセージブローカーとして使用。NoSQLデータベースサーバ。
公式サイト: https://redis.io/

Aerospike

KVS。フラッシュ(SSD)に最適化したNoSQLデータベースサーバ。
公式サイト: https://www.aerospike.com/

Minio

Go言語製Amazon S3クラウドストレージサービスと互換性を持ったオブジェクトストレージサーバ。
公式サイト: https://docs.minio.io/

Apache2

世界中でもっとも多く使われているWebサーバ
公式サイト: https://httpd.apache.org/

Nginx

Webサーバ
公式サイト: https://nginx.org/en/

Caddy

Go言語で実装されたwebサーバ
公式サイト: https://caddyserver.com/

Varnish

HTTPアクセラレータ
公式サイト: https://varnish-cache.org/

Certbot

Let’s Encryptのクライアント
公式サイト: https://certbot.eff.org/

Laravel Echo Server

LaravelのSocket.IOサーバライブラリ
Laravel公式ドキュメント: https://laravel.com/docs/5.7/broadcasting
GitHub: https://github.com/tlaverdure/laravel-echo-server

Swoole

PHPネットワークフレームワーク。
公式サイト: https://www.swoole.co.uk/

Solr

オープンソースの全文検索エンジン
公式サイト: http://lucene.apache.org/solr/

Elasticsearch

Lucene基盤の分散処理マルチテナント対応オープンソースの検索エンジン。分散型RESTful検索/分析エンジン。
公式サイト: https://www.elastic.co/jp/products/elasticsearch

Kibana

Elasticsearch用ビジュアライズ/データ可視化ツール
公式サイト: https://www.elastic.co/jp/products/kibana

Grafana

データ可視化ツール。
対応ツール:Graphite、Prometheus、Elasticsearch、InfluxDB、OpenTSDB、MySQL、AWS Cloudwatch
公式サイト: https://grafana.com/

Metabase

オープンソースのデータ可視化ツール
対応:MySQL, Postgres, Mongo, SQL Server, AWS Redshift, Google BigQuery, Druid, H2, SQLite, Oracle, Crate, Google Analytics, Vertica
公式サイト: https://www.metabase.com/

NetData

サーバのリアルタイムパフォーマンスと健全性モニタリングツール
Github: https://github.com/netdata/netdata

Thumbor

画像のクロッピング、リサイズ、フィルタリング等の画像変換サーバー
公式サイト: http://thumbor.org/

Beanstalkd

オープンソースのメッセージキューイング。Laravelがサポート。
公式サイト: https://beanstalkd.github.io/

Beanstalk Console

PHP製Beanstalkd管理ツール
Github: https://github.com/ptrofimov/beanstalk_console

RabbitMQ

メッセージキューイング
公式サイト: https://www.rabbitmq.com/

HHVM

PHP実行環境
公式サイト: https://hhvm.com/

PHP-FPM

PHP FastCGI実装
公式サイト: https://php-fpm.org/
PHPドキュメント: http://php.net/manual/ja/install.fpm.php

JupyterHub

Jupyter Notebook用のマルチユーザーサーバ
公式サイト: https://jupyterhub.readthedocs.io/en/stable/

ICEcoder

PHP製のWebブラウザIDE。
公式サイト: https://icecoder.net/

Coding WebIDE

クラウドベースのWebIDE
公式サイト: https://ide.coding.net/

Codiad

PHP製のWebブラウザIDE。
公式サイト: http://codiad.com/

Theia

クラウド版Visual Studio Code
公式サイト: https://www.theia-ide.org/

Mailu

DockerベースのWebUI付きメールサーバ
公式サイト: https://mailu.io/

MailDev

Eメールテストツール。
SMTP Server + Web Interface for viewing and testing emails during development.
Github: https://github.com/djfarrelly/MailDev

MailHog

Go言語製Eメールテストツール。
Web and API based SMTP testing
Github: https://github.com/mailhog/MailHog

Selenium

ブラウザ自動化ツール
公式サイト: https://www.seleniumhq.org/

Blackfire

PHPプロファイリングツール。パフォーマンステストツール。結果をWebUIで確認できる。
公式サイト: https://blackfire.io/

Jenkins

Java製オープンソース継続的インテグレーションツール
公式サイト: https://jenkins.io/

GitLab

Gitリポジトリ管理
公式サイト: https://about.gitlab.com/

積極的に活用していきたいですね。