Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ishikawamasahito3150

# WindowsでDockerを使ってWebサーバーを作り、Koyebにデプロイするまで

Posted at

なんとなく理解を深めることが出来たこと

  • WSL2（Windows上でLinuxを動かす仕組み）の基本設定
  • Nginx（エンジンエックス）というWebサーバーの使い方
  • Dockerでアプリを「箱詰め」して持ち運びやすくする方法
  • 作ったものをDocker Hub（Dockerの共有サイト）にアップロードする方法

WSL2って何？なぜ必要？

WSL2（Windows Subsystem for Linux 2） は、Windows上でLinuxというOSを動かせる仕組みです。

なぜ必要？

  • Dockerは元々Linux向けに作られたツール
  • Windowsで直接使うより、Linux環境で使った方がスムーズ
  • 本番環境（実際にサービスを動かす場所）の多くがLinuxなので、開発環境も合わせる

1. WSL2の初期設定

  • Windows のユーザーディレクトリが WSL2 内のこのパスに自動でつながり（マウント）それがデフォルトの作業場所になっていた
PS C:\Users\81808> wsl
docker-desktop:/tmp/docker-desktop-root/run/desktop/mnt/host/c/Users/81808# exit
PS C:\Users\81808> wsl --list
Linux 用 Windows サブシステム ディストリビューション:
docker-desktop (既定値)
Ubuntu
PS C:\Users\81808> wsl --set-default Ubuntu

まずはWindowsのPowerShell（青い画面）を開いて、以下を実行します。

# 今どのLinuxが入っているか確認
wsl --list

実行結果：

docker-desktop (既定値)  ← Docker用の最小限Linux
Ubuntu                   ← 開発に便利なUbuntu

Ubuntuを使いたいので、デフォルトに設定します。

wsl --set-default Ubuntu

用語解説：

  • ディストリビューション: Linuxの種類のこと（Ubuntu、CentOSなど）
  • デフォルト: 標準で使う設定

WSL2 Ubuntuのパスワード設定

WSL2のUbuntuで管理者権限（sudo）を使うには、ユーザーのパスワード設定が必要です。

既にユーザーがある場合（パスワードを設定・変更）

rootユーザーでログインして、既存ユーザーのパスワードを設定します。

# rootでログイン
wsl -u root

# 自分のユーザー(例: myuser)のパスワードを設定
passwd myuser

ポイント:

  • passwdコマンドで新しいパスワードを設定できます
  • sudo実行時にこのパスワードが必要になります

トラブルシューティング
入力時に全角になっていると失敗するので注意してください。3回間違えるとエラーになりますが、落ち着いて再入力すれば大丈夫です。

私は3回とも全角になっていたことに気付いていませんでした。

まだユーザーを作っていない場合

1. 新しいユーザーを作成

# rootでログイン
wsl -u root

# ユーザー作成(myuserは任意の名前でOK)
adduser myuser

この時点でパスワード入力を求められるので設定します。

2. sudo権限を付与

usermod -aG sudo myuser
  • -aG sudoは「sudoグループに追加する」という意味
  • これでmyuserが管理者権限を使えるようになります

3. 作成したユーザーでログイン

wsl -d Ubuntu -u myuser
  • -d Ubuntu → ディストリビューションを指定(Ubuntuを使う)
  • -u myuser → ユーザーを指定してログイン

デフォルトユーザーに設定(オプション)

毎回-u myuserを書くのが面倒な場合は、デフォルトユーザーに設定できます。

ubuntu config --default-user myuser

これで次回から自動的にmyuserとしてログインできます。

3. システムの更新

Linuxを最新の状態にします（Windowsの更新と同じ）。

# 利用可能な更新を確認
sudo apt update

# 実際に更新を実行
sudo apt upgrade

用語解説：

  • apt: Ubuntu用のアプリ管理ツール（App Storeみたいなもの）
  • update: 「何が更新できるか」のリストを取得
  • upgrade: 実際に更新を実行

ログでは53個のパッケージが更新されました。これには：

  • systemd: Linuxのサービス管理システム
  • Python: プログラミング言語
  • OpenSSL: 通信を暗号化するツール

などが含まれています。

自分の気付いていない更新できるパッケージが多く、驚きました。

Nginxでローカルサーバーを立てる

Nginxって何？

Nginx（エンジンエックス） は、Webサーバーソフトウェアです。

何ができる？

  • HTMLファイルをブラウザに表示する
  • 大量のアクセスを高速に処理できる
  • 多くの企業で使われている（Netflix、Airbnbなど）

インストール

sudo apt install nginx

動作確認

systemctl status nginx

用語解説：

  • systemctl: Linuxのサービス（常時動くプログラム）を管理
  • status: 状態を確認

実行結果を見ると：

Active: active (running)  ← 動いている！
Tasks: 13                 ← 13個のプロセス（作業員）が働いている

12個のworkerプロセスが動いているのは、CPUのコア数に応じて効率よく処理するためです。

HTMLをカスタマイズ

デフォルトのページを自分好みに変更します。

# HTMLファイルを編集（nanoはシンプルなエディタ）
sudo nano /var/www/html/index.html

# デフォルトファイルは削除
sudo rm /var/www/html/index.nginx-debian.html

パスの説明：

  • /var/www/html/: Nginxが公開するファイルを置く場所
  • Webブラウザで http://localhost にアクセスすると、ここのファイルが表示される

Dockerでコンテナ化する

なぜDockerを使う？

Dockerは「アプリを箱詰めして、どこでも同じように動かせる」技術です。

メリット：

  1. 「私のPCでは動くのに...」問題を解決
  2. 環境構築が簡単（Dockerfileという設計図で自動化）
  3. 他の人と簡単に共有できる

1. プロジェクトフォルダを作る

mkdir ~/my-nginx-project
cd ~/my-nginx-project

用語解説：

  • mkdir: make directory（フォルダ作成）
  • cd: change directory（フォルダ移動）
  • ~: ホームディレクトリ（自分専用の場所）

2. HTMLファイルを用意

nano index.html

ここで自分のWebページを作ります。例：

<!DOCTYPE html>
<html>
<head>
    <title>My First Docker App</title>
</head>
<body>
    <h1>Hello, Docker!</h1>
    <p>これは私の最初のDockerコンテナです</p>
</body>
</html>

3. Dockerfileを作る

Dockerfileは、Dockerコンテナを作るための設計図です。

nano Dockerfile

内容：

FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html

1行ずつ解説：

  1. FROM nginx:alpine

    • FROM: ベースとなるイメージ（土台）を指定
    • nginx:alpine: Nginxが入った軽量Linux（Alpine Linux）
    • alpine: 通常5MB程度の超軽量Linux

  2. COPY index.html /usr/share/nginx/html/index.html

    • COPY: ファイルをコンテナ内にコピー
    • 自分のHTMLファイルをNginxの公開フォルダに配置

4. イメージをビルドする

docker build -t my-nginx:1.0 .

用語解説：

  • build: イメージ（コンテナの元になる型）を作る
  • -t: タグ（名前とバージョン）を付ける
  • my-nginx:1.0: 名前「my-nginx」、バージョン「1.0」
  • .: 現在のディレクトリにあるDockerfileを使う

エラー対処：
ログで最初に docker build -t my-nginx:1.0. と末尾に余計な.があってエラーになっています。スペースの後の.は「このディレクトリ」という意味なので、タグ名の一部にしないよう注意！

5. コンテナを起動する

docker run -d -p 8080:80 my-nginx:1.0

オプション解説：

  • -d: デタッチドモード（バックグラウンドで動かす）
  • -p 8080:80: ポートフォワーディング
    • 8080: 自分のPC側のポート番号
    • 80: コンテナ内のポート番号
    • 「localhost:8080にアクセスしたら、コンテナの80番に転送」という意味

6. 動作確認

docker ps

実行結果：

CONTAINER ID   IMAGE          PORTS
f4173ed58046   my-nginx:1.0   0.0.0.0:8080->80/tcp

見方：

  • コンテナIDが表示されれば成功
  • ブラウザで http://localhost:8080 にアクセスすると自分のページが見える

Docker Hubに公開する

Docker Hubって何？

Docker Hubは、Dockerイメージを共有するサイトです（GitHubのDocker版）。

何ができる？

  • 自分のイメージを世界中に公開
  • 他の人のイメージを使える
  • チームでイメージを共有

1. ログイン

docker login

ブラウザが開いて認証画面が表示されます。デバイスコード（DDGV-SDGG）を使って認証します。

2. イメージにタグを付ける

Docker Hubにプッシュするには、「ユーザー名/イメージ名」の形式が必要です。

docker tag my-nginx:1.0 ishikawamasahito/my-nginx:1.0

失敗例から学ぶ：
ログでは最初 ishikawa/my-nginx:1.0 でプッシュしようとして失敗しています。

push access denied, repository does not exist

原因： Docker Hubのユーザー名が ishikawa ではなく ishikawamasahito だった

教訓： Docker Hubのユーザー名を正確に確認しよう！

3. イメージを確認

docker images

実行結果：

REPOSITORY                  TAG       IMAGE ID       SIZE
ishikawamasahito/my-nginx   1.0       cbc1c78afe12   79.7MB
my-nginx                    1.0       cbc1c78afe12   79.7MB

同じIMAGE IDを持つイメージが複数ありますが、これはタグ（名札）が違うだけで実体は同じです。

4. Docker Hubにプッシュ

docker push ishikawamasahito/my-nginx:1.0

成功すると：

42c3d2304191: Pushed
e2d0ea5d3690: Pushed
...
1.0: digest: sha256:cbc1c78afe12... size: 856

用語解説：

  • 各行はイメージの「レイヤー」（層）
  • Dockerイメージは複数の層を重ねて作られている
  • 既に存在するレイヤーは再利用されるので効率的

5. 更新してもう一度プッシュ

HTMLを修正して、新しいバージョンを作ります。

# HTMLを編集
nano index.html

# 再ビルド（バージョンは同じ1.0でもOK）
docker build -t ishikawamasahito/my-nginx .

# プッシュ
docker push ishikawamasahito/my-nginx:1.0

ポイント：

  • 同じタグ（1.0）でもビルドし直せば内容が更新される
  • 実運用ではバージョン番号を変える（1.0 → 1.1など）のが推奨

まとめ：学んだこと

技術面

  1. WSL2の基本

    • Windowsで本格的なLinux環境が使える
    • sudoには必ずパスワード設定が必要

  2. Nginxの使い方

    • 軽量で高速なWebサーバー
    • /var/www/html/にファイルを置けばすぐ公開できる

  3. Dockerの基本

    • Dockerfileで環境を再現可能に
    • イメージ → コンテナの流れ
    • ポートフォワーディングで外部からアクセス

  4. Docker Hubの使い方

    • ログイン → タグ付け → プッシュの流れ
    • ユーザー名を正確に！

トラブルシューティングから学んだこと

  1. パスワード入力は慎重に

    • 3回間違えるとロックされる
    • 焦らず確認しながら入力
    • 次から全角で入力しないように

  2. コマンドの末尾に注意

    • docker build -t name:1.0. ← ダメ
    • docker build -t name:1.0 . ← OK

  3. Docker Hubのユーザー名を確認

    • タグ付けの前に公式サイトで確認

補足：AI活用とKoyebでの公開

この記事で解説した内容は、私がAI（AIチャットボット）に質問を繰り返しながら学習したものです。WSL2の初期設定でのトラブル、Nginxの細かい設定、Dockerfileの書き方など、つまずいた点をAIに相談しながら一つずつ解決していきました。初心者にとって、AIは24時間いつでも質問できる優秀なメンターになります。

さらに、この記事の最終目標である「世界に公開する」ステップとして、Docker Hubにプッシュしたイメージを Koyeb（コイエブ） というPaaS（Platform as a Service）を利用してデプロイしました。

公開先URL: https://tall-chrissie-ishito-6388c985.koyeb.app/

Koyebは、Docker Hubのリポジトリを指定するだけで自動的にコンテナをビルドし、世界中に公開してくれるサービスです。今回学んだ「Docker Hubへのプッシュ」の、さらに一歩先のステップとして非常に学びが多かったです。
公開したページで一部文字化けが発生しているため、今後修正を予定しています。原因は、HTML に文字コード（エンコーディング方式）をブラウザに伝える宣言が記載されていないからだと考えられます。
最後に今回の学習を通じて、少し理解を深めることが出来た気がします。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?