VSCode DevContainerを利用する

VSCodeのDevContainerについては、windowsの開発環境をおおむねWSL2に寄せたので特に必要だと思っていなかったけれど、少し話題になったので セットアップしてみた記録。

事前

  • WSL2がセットアップされている。
  • WSL2上でdocker daemon自動起動している。(私はsystemdで自動起動させています)
  • WSL2上にdocker buildxがインストールされている。

install

VSCodeでDevContainer拡張をインストールする

setting

VSCodeの設定で Dev>Containers: Execute in WSL にチェックを入れる。

使ってみる

手元にtauriのプロジェクトがあったのでそこで利用してみた。

.devcontainer.json

{
  "name": "Node.js",
  "build": { "dockerfile": "Dockerfile" },

  "remoteUser": "node",
  "mounts": [
    "source=try-node-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume",
    "source=try-node-pnpm-store,target=${containerWorkspaceFolder}/.pnpm-store,type=volume",
    "source=try-node-tauri-target,target=${containerWorkspaceFolder}/src-tauri/target,type=volume"
  ],
  "customizations": {
    "vscode": {
      "settings": {},
      "extensions": [
        "streetsidesoftware.code-spell-checker",
        "tauri-apps.tauri-vscode",
        "svelte.svelte-vscode",
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "rust-lang.rust-analyzer"
      ]
    }
  },

  "portsAttributes": {
    "3000": {
      "label": "Hello Remote World",
      "onAutoForward": "notify"
    }
  },

  "postCreateCommand": "sudo chown -R node:node /${containerWorkspaceFolder}/.pnpm-store && sudo chown -R node:node /${containerWorkspaceFolder}/node_modules && sudo corepack enable && pnpm install"
}

Dockerfile

FROM node:20

RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
RUN apt update && apt install -yqq sudo && apt clean && rm -rf /var/cache/apt
RUN echo 'node ALL=(ALL:ALL) NOPASSWD: ALL' >> /etc/sudoers

工夫したポイント

  • devcontainer.jsonで .pnpm-store node_modulesを volumeにした
  • Dockerfileでsudoコマンドをいれ、nodeユーザでsudoできるようにしたところ

volume にしたところ、所有者が root:rootになってしまったため、postCreateCommandで所有者を変更するためにsudoコマンドが必要になってしまった。

というあたり。

通常はあらかじめディレクトリを作って所有者を変えておけばいいのだけれど、今回のものは /workspaces/directory_name/volume_path にマウントされるため、ディレクトリ名が動的に変更されるため、事前にディレクトリを作成できないので対応不可能。という状況です。

Dev>Containers: Execute in WSL のおかげで、 windowsVSCodeを開いていても、DevContainer起動しようとすると、windows上のpathでwsl上のdockerコマンドを打ってくれるので、 c:\xxx みたいなpathが /mnt/c/xxx になっており、c:\xxx をbind mountしようとしてマウントできない。と言われずに済むようになり、事前にwsl2で開く手間が省けるのがいいところですかね。

新しいライブラリに触れる。

graphql+RoR がメインの会社でコードを書く仕事を始めてみた。

front側はrelayを利用していて、rubyではgraphqlを利用していた。

graphqlを全然触ったことなかったので新鮮さを感じつつコード読んだりしている。

やはり新しい環境で新しい技術に触れるのは刺激になっていいな。

misskeyでnewrelicを有効にする

misskey(サーバ側)で分散トレーシングを利用するためのメモ

前提として、newrelicにアカウントを作成して、newrelic keyを取得しておくこと。

docker composeを例にする。

1 公式の手順

を参考に設定まで済ませる。

2 newrelicを追加する。

nodejsがインストールされており、pnpmが利用できることが前提。

cd packages/backend/
pnpm add newrelic

3 src/boot/index.tsを書き換え

packages/backend/src/boot/index.ts の import が並んでいるあたりに

import "newrelic";

の1行を追加する。

4 docker-compose.override.ymlを作成

misskeyのトップディレクトリに戻り、 docker-compose.yml が存在することを確認して docker-compose.override.ymlを作成する。中身は

services:
  web:
    environment:
      - NEW_RELIC_ENABLED=false
      - NEW_RELIC_APP_NAME=misskey
      - NEW_RELIC_RECORD_SQL=raw
      - NEW_RELIC_SLOW_SQL_ENABLED=true
      - ENV NEW_RELIC_NO_CONFIG_FILE=true
      - NEW_RELIC_DISTRIBUTED_TRACING_ENABLED=true
      - NEW_RELIC_LOG=stdout
      - NEW_RELIC_LICENSE_KEY=<your newrelic key"
      - NEW_RELIC_ENFORCE_BACKSTOP=false

こんな感じ。

5 公式の手順に戻る。

ここまでできれば、あとは 公式の手順の ビルドと初期化から再開すればOK。

結果

うまくいってれば、しばらくアクセスしてみると

newrelic-sample

こんな感じに何かが表示されます。