Zenn
Open6

[Ubuntu + VSCode + devcontainer + Docker + Electron] Human & ElectronJS の検証

Docker
Electron
VS Code
devcontainer
PINTOPINTO
  • コンテナ起動前に .devcontainer/devcontainer.json の編集(作成)
.devcontainer/devcontainer.json
{
  "name": "Node.js & TypeScript",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:0-18",
  "features": {
    "ghcr.io/devcontainers/features/git:1": {},
    "ghcr.io/devcontainers/features/github-cli:1": {}
  },
  "runArgs": [
    // "--gpus", "all",
    // "--shm-size", "64gb",
    "--device", "/dev/video0:/dev/video0:mwr",
    "--privileged",
    "-e", "DISPLAY=:1",
    "-e", "QT_X11_NO_MITSHM=1",
    "-v", "/tmp/.X11-unix/:/tmp/.X11-unix:rw"
  ]
}
  • devcontainerの起動方法は下記参照

https://zenn.dev/pinto0309/scraps/ad990fef515d86

PINTOPINTO
  • VSCode のターミナルで下記実行
npm install --save-exact esbuild
sudo apt-get update \
&& sudo apt-get install -y \
fakeroot rpm libnss3-dev \
libgdk-pixbuf2.0-dev libgtk-3-dev \
libxss-dev libasound2 yarn

yarn -D add electron
PINTOPINTO
  • 実行 - VSCode のターミナルで下記実行
sudo chmod 777 /dev/video* && npm run start