はじめに
こんにちは！普段は実務でJavaやjQueryといった、いわゆるレガシーな技術に触れているエンジニアです。
今回は、個人開発でモダンな技術に挑戦しようと思い、Go（バックエンド） + Vue.js（フロントエンド）の環境をDocker を使って構築しました。
Docker初心者の私が、複数コンテナの連携や、開発を爆速にするための「ホットリロード対応」でつまずいたポイントも含めて、設定手順をまとめました。これから個人開発を始める方の参考になれば幸いです！
1. 今回構築する環境の構成
今回は docker-compose を使い、以下の3つのコンテナを立ち上げます。
- frontendコンテナ : Vue.js (Vite) / Node.js
- backendコンテナ : Go (Airによるホットリロード)
- dbコンテナ : PostgreSQL（今回は例として用意。任意でMySQL等に変更可）
ディレクトリ構成
全体の見通しを良くするため、以下のようなディレクトリ構造にしています。
my-app/
├── docker-compose.yml
├── backend/
│ ├── Dockerfile
│ ├── main.go
│ ├── go.mod
│ └── .air.toml # Goのホットリロード用設定
└── frontend/
├── Dockerfile
├── package.json
└── (Vueのソースコード一式)
2. 各種設定ファイルの作成
① backend（Go）の設定
Goのホットリロードには、定番ツールの Air を使用します。
backend/Dockerfile
FROM golang:1.26-alpine
WORKDIR /app
# ライブリロード用のツール「Air」をインストール
RUN go install github.com/air-verse/air@latest
# go.sumがまだなくてもビルドが通る
COPY go.mod go.sum* ./
RUN go mod download
COPY . .
# Air経由でアプリを起動
CMD ["air", "-c", ".air.toml"]
💡 補足 (.air.toml について)
air init コマンドで生成されるデフォルトの設定ファイルでOKです。これにより、Goのファイルを書き換えた瞬間に自動で再ビルドが走るようになります。
② frontend（Vue.js / Vite）の設定
Vue3 + Viteの環境を想定しています。
frontend/Dockerfile
FROM node:lts-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]
3. docker-compose.yml の作成**
ここが今回の肝となる、全体を繋ぐ設定ファイルです。
services:
db:
image: postgres:18-alpine
container_name: my-postgres
environment:
POSTGRES_USER: user
POSTGRES_PASSWORD: password
POSTGRES_DB: mydata
ports:
- "5432:5432"
volumes:
- db-store:/var/lib/postgresql/data
backend:
build: ./backend
container_name: my-go-backend
ports:
- "8080:8080"
volumes:
- ./backend:/app
depends_on:
- db
frontend:
build: ./frontend
container_name: my-vue-frontend
ports:
- "5173:5173"
volumes:
- ./frontend:/app
- /app/node_modules # ホスト側のnode_modulesで上書きされるのを防ぐ
depends_on:
- backend
volumes:
db-store:
ホットリロードを実現するポイント（Volumes）
volumes でホスト（自分のPC）のディレクトリとコンテナ内の /app をマウント（同期）しています。これにより、自分がPC上でコードを書き換えると、コンテナ内のファイルも瞬時に変更され、VueのViteやGoのAirがそれを検知して自動リロードしてくれます。
初心者が複数コンテナを繋ぐときにつまずいた3つのポイント
実務でDocker環境が用意されているときは気づきませんでしたが、一から自分で作ると以下のポイントで派手にハマりました。
① Viteのホットリロードが効かない問題（解決策：Vite側の設定）
DockerにVueを閉じ込めた際、ブラウザをいくら更新してもコードの変更が反映されない現象が起きました。
原因は、Viteがファイルの変更を監視（ポーリング）できていなかったためです。vite.config.js に以下の設定を追加することで解決しました。
// frontend/vite.config.js
export default defineConfig({
// ...省略...
server: {
watch: {
usePolling: true, // Docker環境で変更を検知するために必須
},
host: true, // ホストマシンからのアクセスを許可
},
})
② フロントエンドからバックエンドへの接続先（localhostの罠）
Vueのコード内からGoのAPIを叩く際、URLを http://localhost:8080/api と指定していたのですが、これが繋がりませんでした。
「Dockerコンテナ内における localhost は、そのコンテナ自身を指す」 という基本を見落としていました。
docker-compose 内で動いているコンテナ同士は、サービス名で通信できます。
- ❌ 誤：
http://localhost:8080 - ⭕ 正：
http://backend:8080（コンテナ間通信の場合）
※ただし、フロントエンドが「ブラウザ側（クライアントサイド）」で実行されてAPIを叩く場合は、ホスト（PC）から見たhttp://localhost:8080で良いケースもあります。自分がどちらの文脈でリクエストを送っているかの整理が大切でした。
③ node_modules が消える・バグる問題
ローカル環境（ホスト側）に node_modules がない状態でボリュームマウントをすると、コンテナ内で npm install した綺麗な node_modules が空のディレクトリで上書きされて消えてしまう罠があります。
docker-compose.yml で - /app/node_modules という「匿名ボリューム」を1行足すことで、コンテナ内の node_modules を保護することができます。
4. 起動してみる
設定が完了したら、プロジェクトのルートディレクトリで以下のコマンドを実行します。
docker-compose up --build
これだけで、PostgreSQL、Go、Vue.jsのすべてのコンテナが立ち上がります。
ブラウザで http://localhost:5173 にアクセスし、Vueのコードを書き換えて一瞬で画面が変わったときは感動モノでした！
まとめ
実務のJavaやjQueryの環境では、Weblogicを再起動したり、画面をF5で手動リロードしたりするのが当たり前になっていましたが、Docker + モダン技術による「コードを書いたら即座に反映される開発体験」は本当に最高です。
環境構築でつまずくポイントさえ押さえれば、個人開発のスタートダッシュが非常にスムーズになります。ぜひ試してみてください！