Zenn
🚢

VSCodeのRemoteContainersで、1コンテナ複数コマンドを実行する

2021/06/01に公開
Docker
#
remotecontainer
tech

What I want to do

  • モックサーバ (Prism) とNuxt.jsをまとめて1コマンドで、VS CodeのRemote - Containerで実行したい

Why

  • 開発が捗りそうだから

How

フォルダ構成
.
├── .devcontainer
│   ├── devcontainer.json
│   └── start.sh
└── Dockerfile
devcontainer.json
{
	"name": "Node.js",
	"build": {
		"dockerfile": "../Dockerfile",
	},
	"settings": {
		"terminal.integrated.shell.linux": "/bin/bash"
	},
	"forwardPorts": [8080, 3000],
	"postCreateCommand": "/workspace/.devcontainer/start.sh",
	"remoteUser": "node"
}
start.sh
#/bin/sh

yarn dev & prism mock -d -p 8080 https://raw.githubusercontent.com/OAI/OpenAPI-Specification/main/examples/v3.0/petstore.yaml
Dockerfile
FROM node:16

RUN npm install -g @stoplight/prism-cli

COPY ./package.json /workspace/
WORKDIR /workspace
RUN yarn install

COPY . /workspace/

Code

https://github.com/t29mato/remote-container-nuxtjs-prism

Result

  1. Press "Remote Container: reopen in container" in VS Code

  1. Starting Dev Container

  1. Start Container
logs
[16418 ms] Start: Run in container: /bin/sh -c /workspace/.devcontainer/start.sh
yarn run v1.22.5
$ nuxt
[2:20:10 PM] › [CLI] …  awaiting  Starting Prism…
[2:20:11 PM] › [CLI] ℹ  info      GET        http://127.0.0.1:8080/pets?limit=287935491
[2:20:11 PM] › [CLI] ℹ  info      POST       http://127.0.0.1:8080/pets
[2:20:11 PM] › [CLI] ℹ  info      GET        http://127.0.0.1:8080/pets/et
[2:20:11 PM] › [CLI] ▶  start     Prism is listening on http://127.0.0.1:8080

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.6                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development                                   14:20:23
ℹ Initial build may take a while                                      14:20:23
ℹ Discovered Components: .nuxt/components/readme.md                   14:20:24
✔ Builder initialized                                                 14:20:24
✔ Nuxt files generated                                                14:20:24

✔ Client
  Compiled successfully in 7.60s

✔ Server
  Compiled successfully in 6.80s

ℹ Waiting for file changes                                            14:20:37
ℹ Memory usage: 136 MB (RSS: 223 MB)                                  14:20:37
ℹ Listening on: http://localhost:3000/                                14:20:37

  1. Open in browser

Point

なんてことなかったのですが、Dockerで複数コマンド実行したい時に利用するtipsと同じで、シェルスクリプトをRemote Container起動時に実行してあげればOKでした。

今回はstart.shになります。

Supplement. 1

今回の記事みたく、1コンテナ複数コマンドではなくて、複数コンテナを同時に実行したい場合は、公式のConnecting to multiple containers at onceが参考になると思います。

Supplement. 2

1コンテナ複数コマンドは、1コンテナの責任増やしてしまっているので基本アンチパターンだと思われるが、Remote Containerに限っては、開発環境で利用する場合のみなので、今回の方法はありかなと感じています。

Editor's note

Software Design 2021年6月号にRemote - Containerの特集があり、今回試してみたのですが、

  • 開発環境がローカルに依存しない
  • ローカル環境が汚れない
  • チーム開発のセットアップが非常に簡単

とメリット多く、今後も活用していきたいなと思いました。

ここおかしいなど、ありましたら、ご指摘いただけると幸いです :bowbow:

Discussion