🐧

VSCode の Remote Container でフロントエンドとバックエンドを別々のコンテナで開発する方法

2022/09/30に公開

Docker

VS Code

tech

こんにちは。地図パズル製作所の都島です。皆様、VSCode の Remote Container 使ってらっしゃるでしょうか？私は数年前に友人に教えてもらって以降、これなしでは開発できないくらいになってしまっています(笑)

そんな Remote Container ですが、以前から、フロントエンドとバックエンドでコンテナを別々に立てて、それぞれのコンテナで開発するにはどうするのか？という疑問があったのですが、どうやればいいのか分かったので、解説します。といっても、私はこの方法を実際に仕事で使ったことはまだありません。なので、どこか間違っていたりしたらすみません！その時は、ぜひコメントで教えてください～

フロントエンドとバックエンドを別々のコンテナで開発する方法

まず、ディレクトリ構成はこんな感じです。フロントエンド、バックエンド、ともに node.js とします。

project-root
├─ .git/
├─ backend/
│  ├─ .devcontainer.json
│  ├─ Dockerfile
│  └─ main.js など
├─ frontend/
│  ├─ .devcontainer.json
│  ├─ Dockerfile
│  └─ main.js など
└─ docker-compose.yml

では、それぞれのファイルを紹介します。

docker-compose.yml

version: '3'
services:
  backend:
    build: 
      context: backend
      dockerfile: Dockerfile
    volumes:
      - .:/workspace:cached
    command: /bin/sh -c "while sleep 1000; do :; done"

  frontend:
    build:
      context: frontend
      dockerfile: Dockerfile
    volumes:
      - .:/workspace:cached
    command: /bin/sh -c "while sleep 1000; do :; done"
    links:
      - backend

どちらのコンテナでもルートフォルダからホストとソースコードを共有するのが重要なようです。そうすることで、コンテナ内からも Git 操作ができるようになります。必要に応じて、DB を追加したり、コマンドを変更したりしてくださいね。

backend/.devcontainer.json

{
    "name": "backend node",
    "dockerComposeFile": ["../docker-compose.yml"],
    "service": "backend",
    "shutdownAction": "none",
    "extensions": [], // ここはご自由に追加してください。
    "workspaceFolder": "/workspace/backend"
}

backend/Dockerfile

FROM node:latest

frontend/.devcontainer.json

{
    "name": "frontend node",
    "dockerComposeFile": ["../docker-compose.yml"],
    "service": "frontend",
    "shutdownAction": "none",
    "extensions": [], // ここはご自由に追加してください。
    "workspaceFolder": "/workspace/frontend"
}

frontend/Dockerfile

FROM node:latest

このようなソースコードを準備したら、Remote Container でアクセスしたいコンテナに対応するディレクトリを VSCode で開いて、通常通り Reopen Container をします。そうすると、コンテナが二つとも立ち上がるようです。

こんな感じで、frontend、backend のコンテナを分けて開発することができそうです。あと、.devcontainer.json で ”shutdownAction”: “none” を指定していますので、VSCode を閉じてもコンテナは停止しません。なので、別のコンテナに入って開発したい場合は、時間をおかずに開発できます。でも、コンテナを停止したい場合は、VSCode を閉じただけではだめなので、自分で停止する必要があるようです。

最後に

今日は VSCode の Remote Container でフロントエンドとバックエンドを別々のコンテナで開発する方法を紹介しました～

最後に宣伝ですが、地図パズル製作所では無料の楽しい地図パズルを開発しています。ぜひ一度試してみてください！こちらも、もちろん Remote Container を使って開発しています。

https://chizu-puzzle.com

参考

こちらの記事は以下のドキュメントを参考にしました。（2022/09/29 13:00閲覧）

フロントエンドとバックエンドを別々のコンテナで開発する方法

最後に

参考

Discussion