Dockerコマンドがわからなくてもできる。WSL2 と VSCodeを利用したDocker開発環境の構築
Dockerって今ではメジャーな技術となっているのでわかりやすい書籍などはありますが、初学者の方がDockerの仕組みやコマンドを１から勉強して理解するにはそれなりの時間が掛かりますし、フロントサイドのエンジニアの方で、インフラよりのことはわかない・・・。といった方だとさらにハードルは高いかと思います。
そこで、今回は Docker をいかに楽に利用するか。という事に重点をおてい、Docker について知識がなくても簡単に Docker を利用する方法ご紹介します。
下記の様な人に対してはお勧めのやり方です。
- 自分のパソコン（ローカル環境）でとにかく簡単にDockerを利用したい方
- これから Docker の勉強を始めたい方
何が必要か
まず、Dockerの知識もほとんどなく、Dockerのコマンドもよく分からないという方でも
- WSL2 を利用した Docker Desktop のインストール
- VSCode のインストールと Docker の拡張機能の有効化
- docker-compose.yml でDocker開発環境の構築
といった流れで実施してもらえれば、Dockerを利用して開発環境を利用できますので早速とりかかってみましょう。
今回のゴール
今回は、こちらの図にある通り、Docker で WordPress の環境を作成したいと思います。
どんな環境を作成するかは「docker-compose.yml」に記載しますので、「docker-compose.yml」の内容を修正することによって好きな環境を作成できたりしますが、今回は WordPress 環境の作成したいと思います。
WSL2 を利用した Docker Desktop のインストール
WSL2 を利用した Docker Desktop for windows のインストール方法はこちらに記載がありますので、まだインストールされてない方は実施下さい。
WSL2 ってなに？ という方でも、手順にそって実施してもらえれば、インストールできるようなってます。
今回はWindows を利用してる方を対象にしていますが、MACを利用されている方は、Docker Desktop for MAC がありますのでそちらを利用ください。
VSCode のインストールと Docker の拡張機能の有効化
VSCode(Visual Studio Code)は、プログラムを作成する際に利用するエディターのイメージが強いですが、Docker を利用するための拡張機能も豊富なため、Dockerのコマンドを知らなくても Docker を利用できるので、これから Docker を始めたいという方には非常にお勧めです。
VSCodeのインストール
VSCode のインストールは特に難しいことはなく、インストーラーをダウンロードして実行して基本的にデフォルトの設定のまま次へをクリックしてインストールすればよいので、今回は割愛します。
VSCodeのダウンロード先のリンクを貼っておきますので、Googleで検索してご自分でダウンロードするか、こちらのリンクからダウンロードしてインストールしてください。
VSCodeの拡張機能の有効化
VSCode で Docker を利用する際に一番活躍する拡張機能が下記の Docker という拡張機能です。
導入方法は下記となります。
VSCode の拡張機能をクリックします。
検索ボックスに Docker と入力すると検索一覧が表示されるので、その中から Dokcer という拡張機能をクリックし、「インストール」をクリックします。
インストールが完了すると、左側のアクティビティーバーに Docker が追加されます。
Docker 拡張機能についてのサイトを確認頂けるとDocker 拡張機能についての詳細記載ありますが、Dockerfile や docker-compose.yml を作成する際に補完してくれたりする機能もあって便利なのですが、なんといっても一番便利な点として下記があります。
- docker-compose.yml を右クリックして Docker の実行と削除ができる
- Docker の起動状態、イメージ、ネットワークなどが Docker View で確認できる
Docker の起動や削除などだけであれば、コマンドで実行することもそこまで敷居は高く何のですが、起動した際に作成させるイメージやネットワークが Docker のコマンドを利用せずに VSCode 上の Docker View で視覚的にわかるのと、不要イメージなどを 右クリックで削除できたりするのが、これから勉強していく方にとっても、Docker を本格的に利用する方にとってもすごく便利だおと思います。
この、便利な点については、この後説明します。
3．docker-compose.yml でDocker開発環境の構築
VSCode の Docker という拡張機能を使ってWordpress の環境を作成するので、まずはDockerで利用するフォルダを作成したいと思います。下記手順ではデスクトップ上にフォルダの作成をしていますが、お好きな場所にお好きなフォルダ名で作成頂いて大丈夫です。
デスクトップに「Docker」フォルダを作成する。
「Docker」フォルダ内に「01_wordpress」フォルダを作成する。
「01_wordpress」フォルダ右クリックして、「Codeで開く」をクリックし、VSCodeで開く。
※もしくは、VSCodeを起動させてから、左上の［ファイル］ー［フォルダーを開く］から開いてもらっても大丈夫です。
「01_wordpress」フォルダ右クリックして、「新しいファイル」をクリックし、「docker-compose.yml」というファイル名でファイルを作成する。
作成した docker-compose.yml に下記をコピペして保存（CTL ＋ S）してください。
version: '3'
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: somewordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
wordpress:
depends_on:
- db
image: wordpress:latest
ports:
- "8000:80"
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
volumes:
db_data:これで、Docker で WordPress を作成する準備は整いました。
Docker で WordPress の起動
「docker-compose.yml」右クリックして「Compose UP」をクリックします。
色々と処理が走り、「・・・done」と表示されれば、終わりです。
初回実行時は Docker Hub からイメージをダウンロードしてくるので、その分終わるまでに時間はかかりますが、終わってからご自身のブラウザで下記にアクセスすれば、Wordpress が利用可能です。
“http://127.0.0.1:8000”
簡単ですよね。
私も、初めて利用したときはコマンド打たなくても Docker で環境構築できたので、感動しました。
さて、Docker ではどんなものが作成されたかを見ていきましょう。
VSCode の左側のアクティビティーバーにある Docker をクリックします。そうすると、下記の様に表示されるかと思います。
Docker の環境は「docker-compose.yml」に従って作成されるので、今回どのように作成されたかをひとつずつ見ていきたいと思います。
【CONTEINERS】
「docker-compose.yml」の「image」で指定したイメージを利用してコンテナを作成しています。
ここでは、下記2つのコンテナが起動しているのがわかります。
- mysql:5.7
- wordpress:latest
【IMAGES】
Docker でコンテナを起動する際は、このイメージから起動されますが、下記２つのイメージがローカルにダウンロードされたことがわかります。
- mysql:5.7
- wordpress:latest
【NETWORKS】
今回「docker-compose.yml」でネットワークの指定はしていないので、自動で下記が作成されたことがわかります。
- 01_wordpress_default
ネットワークを特に設定しない場合に作成されるネットワーク名は、【「docker-compose.yml」が置いてあるフォルダ名】_default
となります。
下記、3つはDocker Desktopをインストールした際にデフォルトで作成されるものです。
- bridge
- host
- none
【VOLUMES】
今回は下記2つのボリュームが作成されています。
- 01_wordpress_db_data
- 英数字が羅列されたボリューム
1つ目のボリュームは「docker-compose.yml」の一番下で指定したdb_dataのボリュームです。作成される際は、頭に【「docker-compose.yml」が置いてあるフォルダ名】が付きます。
2つ目のボリュームは、wordpress のコンテナが自動的に作ったものです。詳細は Docker Hub のworpdress のページに記載ありますので、気になる方はご参照下さい。
上記で確認したイメージやネットワークはボリュームの状態については、VSCode を利用しない場合は Docker のコマンドを実行して確認したりするのですが、VSCode 上で GUI で見れるというのは楽だし理解しやすいですし、いいですよね。
コンテナへのログイン
作成したコンテナにログインして操作したいこともあると思いますが、そういった際も VSCode を利用していると簡単にログインすることができます。
今回は、2つのコンテナが実行されていますが、Wordpress のコンテナにログインしてみたいと思います。
wordpress のコンテナを右クリックして、「Attach shell」をクリックする。
そうすると、右下のターミナルウィンドウが動き出し、プロンプトが変わったので、コンテナ内にログインできたことがわかります。
試しに、 id, pwd, ls -l を実行してみました。
root ユーザで /var/www/html にいて、その中のファイルに何があるのかが表示されています。
ログアウトする際も、通常のLinuxと同様に「exit」と入力してログアウトできます。
今回、ログインしてから特に設定や更新などの作業はしてませんが、パッケージを更新したり、インストールしたり設定ファイルを変更したりなど、「docker-compose.yml」でできなかった設定を自由に行うことが可能です。
WordPress の削除
続いては、作成したWordpress 環境の削除方法について紹介します。
作成と同様、削除もかなり簡単にできます。
アクティブバーのエクスプローラをクリックして、先ほど作成した「docker-compose.yml」右クリックして「Compose Down」をクリックします。
今回も色々と処理が走りますが、「・・・done」と表示されれば、終わりです。
これで、先ほど作成した、Wordpress 環境の削除が完了しました。停止ではなく、削除ですので注意下さい。
では、Docker の状態がどうなっているのかと、ゴミが残ってしまうのでその削除方法を見ていきましょう。
左側のアクティビティーバーにある Docker をクリックします。そうすると、下記の様になっているかと思います。
削除した後のコンポーネントの状態を、今回も一つずつ見ていきたいと思います。
【CONTEINERS】
削除したので、コンテナもなくなりました。
【IMAGES】
イメージは、コンテナを削除しても残るものです。次回コンテナを起動時に、ここにあるイメージを利用して起動する事が出来ます。仮にない場合は、初回起動時と同様DokerHubからイメージをダウンロードしてきます。
【NETWORKS】
削除したので、ネットワークもなくなりました。
ただ、Docker Desktop をインストール時に作成される下記3つはコンテナを削除しても残ります。
- bridge
- host
- none
【VOLUMES】
ボリュームはコンテナを削除しても残るので、もし次回同じ「docker-compose.yml」を用いてコンテナの起動をした際に、ボリュームのデータは残った状態で起動してきます。
ただ、今回はいらないので削除したいと思います。
２つのボリュームを選択して、右クリックで「Remove」をクリックします。
消しても問題ないかときかれるので、「Remove」をクリックします。
そうすると、不要なボリュームが削除されたことがわかります。
Docker の起動や削除を実施するとゴミが残ったりするので、不要なものは削除しましょう。
これで、Docker コマンドがわからなくても、VSCode と VSCode の拡張機能を利用して Docker の開発環境の構築と削除ができました。
VSCode で Docker を起動させると、視覚的に今どんなことが起こっているのかが分かり、Docker の概要がつかみやすいかと思いますので、初学者の方が Docker の環境を作成する上でも、Docker を自分のローカルで利用し管理する上でもとても分かりやすいかと思います。