1. はじめに
VPS上のUbuntuにホームページを構築したあと、Windows側のVS Codeなどで編集したい場合、よく迷うのが次の点である。
VPS上のホームページをWindowsに持ってきて編集したい。
このとき、Dockerを使うべきか？
それとも、そのままGitで持ってくればよいのか？結論から言うと、ホームページの種類によって判断が変わる。
- HTML / CSS / JavaScript中心の静的サイト：基本的にはDocker不要
- React、Next.js、Node.js、FastAPI、Pythonアプリなど、実行環境に依存するWebアプリ：Dockerを使う価値あり
2. 結論
まず、最初に結論を示す。
静的ホームページなら、DockerなしでGit管理するのが簡単。
Webアプリやビルド環境が必要な場合は、Dockerを使う価値がある。ここで重要なのは、Dockerはファイルを持ってくる道具ではないということである。
Dockerは、以下のために使う。
同じ実行環境をWindows、Linux、VPS、本番環境で再現するための仕組みしたがって、「Dockerでホームページを持ってくる」というより、正しくは、
ホームページのソースコードはGitで管理する。
Dockerは、そのソースコードを動かす環境を固定するために使う。という理解が正しい。
3. Dockerを使わない方がよいケース
以下のようなホームページであれば、Dockerは必須ではない。
index.html
style.css
script.js
画像ファイル
静的LP
単純な会社ホームページ
WordPressとは別に置いた静的ページこの場合、Windowsで編集したいなら、Gitを使って以下の流れにするのが最も簡単である。
VPS上のホームページをGit管理
↓
GitHubへpush
↓
Windowsでgit clone
↓
VS Codeで編集
↓
GitHubへpush
↓
VPSでgit pullこの運用であれば、Dockerは不要である。
4. Dockerを使うべきケース
一方、以下のような構成の場合は、Dockerを使う価値が高い。
React / Vite / Next.js を使っている
Node.jsで動作するアプリである
FastAPIなどPythonのバックエンドがある
npm install や npm run build が必要
Pythonの仮想環境やuvを使っている
WindowsとLinuxで動作が変わる可能性がある
本番VPSと同じ環境で動作確認したいこのような場合、Windowsで直接動かすと、以下のような問題が起きやすい。
Node.jsのバージョンが違う
Pythonのバージョンが違う
依存ライブラリが違う
Windowsでは動くがUbuntuでは動かない
パスの区切り文字が違う
ポート設定が違う
環境変数が違うこのような環境差分を減らすために、Dockerを使う。
5. 基本方針
ホームページやWebアプリをWindowsで編集し、VPSに反映する場合の基本方針は以下である。
ソースコードの移動・共有 → Git
実行環境の再現 → Docker
本番反映 → VPSでgit pull、またはDockerコンテナ再起動つまり、役割分担はこうなる。
| 目的 | 使うもの |
|---|---|
| ソースコードを管理する | Git / GitHub |
| Windowsで編集する | VS Code |
| 環境を再現する | Docker |
| VPS上で公開する | Nginx / Node.js / Docker |
| 本番反映する | git pull / docker compose up |
6. Dockerなしの運用手順
静的サイトや単純なホームページであれば、まずはこの方法がよい。
6.1 VPS側でGit管理されているか確認する
VPSにSSH接続して、ホームページのディレクトリに移動する。
cd /srv/ono-piano.com/OnoPiano.Com2026
git status以下のように表示されれば、Git管理されている。
On branch main
Your branch is up to date with 'origin/main'.
nothing to commit, working tree cleanこの状態なら、Windows側にcloneして編集できる。
6.2 Windows側でcloneする
WindowsのPowerShellまたはGit Bashで以下を実行する。
git clone git@github.com:ユーザー名/リポジトリ名.gitcloneしたディレクトリに入る。
cd リポジトリ名
code .これでVS Codeが開く。
6.3 Windowsで編集してGitHubへpushする
Windows側でファイルを編集したら、以下を実行する。
git add .
git commit -m "Update homepage"
git push6.4 VPS側で反映する
VPS側で以下を実行する。
cd /srv/ono-piano.com/OnoPiano.Com2026
git pullこれで、Windowsで編集した内容がVPS側に反映される。
7. Dockerを使う場合の基本構成
Dockerを使う場合でも、ソースコードはGitで管理する。
Dockerを使う場合のディレクトリ構成例は以下である。
OnoPiano.Com2026/
├─ index.html
├─ src/
├─ package.json
├─ Dockerfile
├─ docker-compose.yml
└─ README.mdこのうち、Dockerに関係する重要ファイルは以下である。
Dockerfile
docker-compose.yml8. 静的HTMLサイトをDockerで動かす例
単純なHTMLサイトをDockerで確認する場合、Nginxを使うのが簡単である。
8.1 Dockerfile
FROM nginx:alpine
COPY . /usr/share/nginx/htmlこのDockerfileは、現在のディレクトリのファイルをNginxの公開ディレクトリにコピーする。
8.2 docker-compose.yml
services:
web:
build: .
ports:
- "8080:80"この設定では、コンテナ内の80番ポートを、Windows側の8080番ポートに接続する。
8.3 Windowsで起動する
docker compose up --buildブラウザで以下を開く。
http://localhost:8080これで、Windows上でNginxを使ってホームページを確認できる。
9. React / Vite系サイトの場合
ReactやViteで作られたホームページの場合、通常は以下のような構成になる。
package.json
src/
public/
index.htmlこの場合、まずWindows上で以下を実行する。
npm install
npm run dev開発用サーバーが起動し、ブラウザで確認できる。
本番用ファイルを作る場合は以下を実行する。
npm run build多くの場合、以下のような dist フォルダが作成される。
dist/
├─ index.html
├─ assets/VPSに公開するのは、基本的にはこの dist の中身である。
10. ReactサイトをDockerで動かす例
ReactやViteのようにビルドが必要な場合、Dockerfileは2段階構成にするとよい。
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/htmlこのDockerfileでは、前半でReactアプリをビルドし、後半でNginxにより静的ファイルを配信する。
11. docker-compose.ymlの例
services:
web:
build: .
ports:
- "8080:80"起動コマンドは以下である。
docker compose up --buildブラウザでは以下にアクセスする。
http://localhost:808012. 「Dockerで持ってくる」という表現について
実務的には、「Dockerで持ってくる」という表現は少し不正確である。
正しくは、以下のように考える。
ソースコードはGitで持ってくる。
Dockerfileとdocker-compose.ymlもリポジトリに含める。
Windows側でdocker compose upする。つまり、Dockerそのものをダウンロードしてホームページを移すのではなく、Dockerで動かせる形にプロジェクトを整備するという意味になる。
英語では、この作業をよく次のように言う。
Dockerize the project.意味は、
プロジェクトをDocker対応にするである。
13. 推奨する実務フロー
現実的には、以下の順番で進めるのがよい。
Step 1: まずGitでWindowsに持ってくる
Step 2: WindowsのVS Codeで編集する
Step 3: ローカルで動作確認する
Step 4: GitHubへpushする
Step 5: VPSでgit pullする
Step 6: 必要になったらDocker化する最初からDockerを使う必要はない。
特に、単純なホームページやLPであれば、Dockerを導入すると、かえって管理が複雑になる場合がある。
14. Dockerを導入する判断基準
Dockerを入れるべきかどうかは、以下で判断するとよい。
| 状況 | Dockerの必要性 |
|---|---|
| HTML / CSSだけ | 低い |
| 静的LP | 低い |
| WordPress配下に置く静的ページ | 低い |
| React / Viteでビルドが必要 | 中 |
| Node.jsアプリとして動作 | 高い |
| FastAPIなどバックエンドあり | 高い |
| WindowsとUbuntuで動作差がある | 高い |
| 本番と同じ環境で検証したい | 高い |
15. 最終結論
VPS上のUbuntuで作ったホームページをWindowsで編集する場合、まず考えるべきことは、DockerではなくGitである。
ソースコード管理はGit
環境再現はDockerこの役割分担を明確にすると混乱しにくい。
単純なホームページなら、以下で十分である。
Git clone
VS Codeで編集
Git push
VPSでgit pull一方、React、Node.js、FastAPIなどを使ったWebアプリであれば、Dockerを使うことで、WindowsとVPSの環境差を小さくできる。
したがって、今回のようなケースでは、まずは以下の方針がよい。
最初はDockerなしでGit運用する。
環境差やビルドの複雑さが出てきたらDocker化する。Dockerは「ファイルを持ってくる道具」ではなく、「同じ環境で動かすための道具」である。
この理解が、VPS、Windows、Git、Dockerを正しく使い分ける上で重要である。
コメント