皆さん初めまして。
株式会社ライフマップ エンジニアの大城です。
私は現在、弊社サービス『コレカラ進路.JP』のリニューアルの開発を進めています。
まだ詳細はお伝えできませんが、いずれこちらで進捗の報告等できればと思いますので、どうぞよろしくお願いいたします。
本日は、Webサイトの開発ってどうやるの？と興味を持っている方向けに、ローカル開発環境の立ち上げ方についてお話ししたいと思います。
ちなみに私はMacbookを使っているので、Macbook前提でお話しさせていただきます。
Windowsの方ごめんなさい。
今回ご紹介するのは、
- ウェブサーバーの仕組み
- Dockerとは？
- Dockerの使い方
- Dockerを使ったWEBサーバーの構築手順
の四つになります。
難しいと感じるかもしれませんが、大丈夫です。やってみれば意外と簡単です。
# ウェブサーバーの仕組み
まず最初はウェブサーバーの仕組みからご説明いたします。
知ってるよ！という方はスキップしてください。
ウェブサーバーは下記の図のような仕組みになっています。
簡単に流れを説明すると、
ウェブサイトのURLを開くとインターネット経由でルーターにリクエストが飛んで、
ウェブサーバーソフトウェアがURL毎の決まったファイルを実行し、実行した結果がブラウザに表示されます。
# Dockerとは？
Dockerとは仮想環境を構築するツールです。
パソコンの中にパソコンを作るようなイメージですね。
先程のウェブサーバーの仕組みをDockerに置き換えると下記の図のようになります。
Docker Engineがルーターの役割をします。
Docker コンテナというのが先程ご紹介した仮想環境で、この中にソフトウェアをインストールしたり、ウェブサイトのファイルを設置したりします。
Dockerのイメージは掴めたでしょうか？
もし難しくて理解できなくても、今はそういうものがあるんだな程度で問題ありません。
Dockerの使い方を学びつつ理解も深めてもらえればと思います。
# Dockerの使い方
## アカウント作成
まず初めにDocker Hubのアカウントを作成します。
下記サイトのDocker Hubの『Signup』からアカウントを作成してください。
https://www.docker.com/get-started
## インストール
次にDocker Desktopをインストールします。
下記サイトのDocker Desktopの『Download for XXX』からインストーラーをダウンロードしてください。
https://www.docker.com/get-started
ダウンロードが完了したらインストーラーを起動し、ガイドに従ってインストールします。
途中ログインを求められたら、先ほど作成したDocker Hubのアカウントとパスワードを入力してください。
## 起動
インストールが完了したら、ターミナルで下記コマンドを実行しましょう。
現在のバージョンが表示されればインストール完了です。
docker -v
#=> Docker version 20.10.5, build 55c4c88
# Dockerを使ったウェブサーバー構築手順
いよいよ本番です。
自前のパソコンにウェブサーバーの開発環境を構築しましょう。
今回作成するコンテナは次の二つになります。
- ウェブサーバー
- データベース
ディレクトリ構成は下記になります。
~/Development/docker/webapp
┣docker-compose.yml
┣php.ini
┗html/
┗index.html
## 開発準備
まずはターミナルを開きましょう。
開発ではターミナルのようなCLIをよく使うので、覚えておくと大変便利です。
（いつかCLIについても記事書きます！）
ターミナルはLaunchpadのその他にあります。
## コンテナ作成
次に作業用のディレクトリを作成します。
mkdirコマンドにpオプションを付けると、途中にあるディレクトリがなくても一緒に作成します。
mkdir -p ~/Development/docker/webapp
※ mkdir ・・・ ディレクトリを作成するコマンド
ディレクトリを作成したらcdコマンドで移動しましょう。
cd ~/Development/docker/webapp
※ cd ・・・ ディレクトリを移動するコマンド
次にコンテナの設定ファイルをviコマンドで作成します。
Dockerはこのファイルを見てコンテナを構築します。
vi docker-compose.yml
※ vi・・・テキストベースのファイルの編集コマンド
┣iキー: 編集モードに移行
┗ESCキー: 編集モードから抜ける
version: '3'
services:
web:
image: php:7.2-apache
volumes:
- ./php.ini:/usr/local/etc/php/php.ini
- ./html:/var/www/html
ports:
- 8080:80
db:
image: mysql:5.7
volumes:
- ./mysql:/var/lib/mysql
environment:
- MYSQL_ROOT_PASSWORD=root
- MYSQL_DATABASE=test
- MYSQL_USER=test
- MYSQL_PASSWORD=test※[7/5更新]シングルクォーテーションが別の記号になっていたので修正しました。
- version:
- 設定ファイルの書き方のバージョンです。
バージョンによって書き方が変わります。 - services:
- 各コンテナ毎の設定です。
- image:
- コンテナに必要なイメージデータです。
アプリのインストールに必要なディスクと同じです。
DockerHubに格納されています。 - volumes:
- 共有ストレージです。
:(コロン)の左がPC、右がコンテナになります。
ファイルが指定された場合はファイルが、ディレクトリが指定された場合はディレクトリ以下が共有物として設定されます。 - ports:
- ポートの接続設定です。
PC（左）のポートとコンテナ（右）のポートを繋げることを意味します。
ポートを繋げることでhttp://xxx.com:8080のようにブラウザからアクセスすることができます。 - environment
- イメージデータをインストールする際に使用する設定です。
mysqlの場合、MYSQL_ROOT_PASSWORDは管理者のパスワードを設定するといったことが可能です。
記入が完了したらESCキーで編集モードを抜け、:wqを入力し、エンターキーを押して保存します。
※ :(コロン): コマンド入力開始、w: 保存、q: 終了
これでコンテナの設定ファイルは完成しました！
残りのファイルも続けて作成しましょう。
## PHP設定
次はphpの設定ファイルを作成するのですが、とりあえず最初は空のままでOKです。
touchコマンドで空ファイルを作成しましょう。
touch php.ini
※touch・・・空ファイルを作成するコマンド
## ウェブサイト作成
最後にhtmlファイルを作成します。
mkdir html
vi html/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
</head>
<body>
<p>Hello world!</p>
</body>
</html>これで開発環境の準備は完了しました！
さっそくコンテナを立ち上げてみましょう！
## コンテナ起動
コンテナをまとめて管理するにはdocker-compose upコマンドを使います。
docker-compose up
※docker-compose・・・コンテナをまとめて管理するコマンド
起動が完了したらブラウザからアクセスしてみましょう。
http://localhost:8080/
作成したHTMLファイルが表示されました！
## 番外編 - PHPでウェブサイト作成
今回作成したコンテナにはPHPファイルの動作環境もあります。
試しに作ってみましょう。
HTMLファイルを作成する手順と同じように、PHPファイルを作成します。
vi html/test.php
<?php
$text = “Hello world from PHP!”;
?>
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
</head>
<body>
<p><?= $text ?></p>
</body>
</html>
ファイルを作成したらブラウザからアクセスしてみましょう。
http://localhost:8080/test.php
PHPファイルも表示されましたね！
ウェブサーバーのローカル開発環境が完成しました。
これで思う存分ウェブサイトの開発ができますね！
素敵なウェブサイトをどんどん生み出していってください！
ちなみに開発環境を停止する場合はdocker-compose downコマンドを使用します。
docker-compose down
開発を終わる場合は忘れずに実行してください。
Dockerを使った開発環境の構築はどうだったでしょうか。
もしできなかった場合は、時間を置いて再挑戦してみてくださいね。
間違いやわかりにくい箇所等あればお問い合わせからご連絡いただけますと幸いです。
また次回もよろしくお願いいたします。
