Docker上でWebの技術を最速で体験するハンズオン(初心者向け, 部活資料)

まえがき

これは2019年の富山高等専門学校デジタルメディア創作部であらさんによって行われたweb技術ハンズオンの体験資料です。
部員(初心者)に向けてwebの技術の簡単な仕組みなどを知ってもらうために作ったためボロがあると思う。てかあるので怒らないで(先手)。

TL;DR

  • Docker, docker-composeを用いた。
  • MySQLとGolangでAPIサーバーを作成した。
  • Nginxに配置されたhtmlファイルにてデータの受け取りを作成した。
  • データの入力や編集(POST, PUT, DELETE)等はRestlet Client - REST API Testingを用いた。
  • バックエンドはREST APIを参考にした。

環境構築まで

Git

Windows 10, Mac, Linuxの方は既に入っていると思います。

Windows 10未満の方はGit for Windowsなどを入れてください。
URL: https://gitforwindows.org/

Docker Toolbox for Windows

Windows 10 Home, Windows 8.1, Windows 7 の場合はこちらです。

Install Docker Toolbox on Windowsに従ってDockerのインストールを進めてください。
URL: https://docs.docker.com/toolbox/toolbox_install_windows/

共有フォルダの設定をVirtualBoxで行います。以下のQiitaページに従って作業を進めてください。作業後、VirtualBoxに変更を適用するため以下のコマンドを入力してください。
URL: https://qiita.com/toomuchpopcorn/items/9c5501dd9e500ae5aaed

$ docker-machine restart

Docker for windows

Windows 10 Proの場合はこちらです。

Install Docker Desktop for Windowsに従ってDockerのインストールを進めてください。
URL: https://docs.docker.com/docker-for-windows/install/

DockerのSettingsよりShared Drivesよりドライブのチェックボックスにチェックを入れ、共有フォルダを許可する設定を有効化してください。

Docker for Mac

Install Docker Desktop for Macに従ってDockerのインストールを進めてください。
URL: https://docs.docker.com/docker-for-mac/install/

Docker for Linux

各自でインストールを進めてください。Get Docker CE for ○○○○と各ディストリビューションで検索すれば出てくると思います。

Ubuntu
URL: https://docs.docker.com/install/linux/docker-ce/ubuntu/

Arch
URL: https://wiki.archlinux.jp/index.php/Docker

Restlet Client – REST API Testing

データのやりとりを行うchrome拡張アプリケーションです。

Chrome ウェブストア
URL: https://chrome.google.com/webstore/detail/restlet-client-rest-api-t/aejoelaoggembcahagimdiliamlcdmfm

開発環境の用意

ハンズオンするためのリポジトリです。Github上でClone or downloadからClone with HTTPSよりhttps://github.com/m1zu7k1t4n/Docker_RESTFul_Go_with_MySQL.gitが得られます。こちらがダウンロード先となるURLです。
URL: https://github.com/m1zu7k1t4n/Docker_RESTFul_Go_with_MySQL


Docker Toolboxの方のみ

ディレクトリ場所をc:\Users\{{ username }}\とするので自分の環境を確認しておきましょう。
{{ username}}は自分の環境でログインしているユーザー名になっているので確認してください。


それでは端末を開いて以下のコマンドを入力していきましょう

$ git clone https://github.com/m1zu7k1t4n/Docker_RESTFul_Go_with_MySQL.git

Githubからリポジトリのデータをダウンロードしています。これが終わるとDocker_RESTFul_Go_with_MySQLという名前のフォルダが出来るので移動しましょう

$ cd ./Docker_RESTFul_Go_with_MySQL

cdコマンドはディレクトリを移動するコマンドです。

$ docker-compose up -d

docker-composeコマンドは現在のディレクトリからdocker-compose.ymlを読み込みdockerに対して命令を下す便利なラッパーのようなものです。

docker-compose upでコンテナがビルド、起動します。-dでバックグラウンドに立たせるようにします。
最初のみイメージのダウンロードがあるため時間がかかる場合があります。待ちましょう。

実践

$ docker-compose logs
. . .
. . .
. . .
mysql_host | Version: '5.7.25' socket: '/var/run/mysqld/mysqld.sock' port: 3306 MySQL Community Server (GPL)

docker-compose logsでコンテナの出力を見ることができます。以上のようにmysql_hostのsocketが待ち状態に入っていることを確認します。なっていなかったらもう少し待ちます。

$ docker-compose exec golang go run main.go
[GIN-debug] [WARNING] Creating an Engine instance with the Logger and Recovery middleware already attached.

[GIN-debug] [WARNING] Running in "debug" mode. Switch to "release" mode in production.
- using env: export GIN_MODE=release
- using code: gin.SetMode(gin.ReleaseMode)

[GIN-debug] POST /api/v1/todos/ --> main.createTodo (4 handlers)
[GIN-debug] GET /api/v1/todos/ --> main.fetchAllTodo (4 handlers)
[GIN-debug] GET /api/v1/todos/:id --> main.fetchSingleTodo (4 handlers)
[GIN-debug] PUT /api/v1/todos/:id --> main.updateTodo (4 handlers)
[GIN-debug] DELETE /api/v1/todos/:id --> main.deleteTodo (4 handlers)
[GIN-debug] Listening and serving HTTP on :8080

docker-compose exec golang go run main.goでAPIサーバーを立ち上げます。端末に状態が依存しているため閉じないようにしましょう。

ここでデータを表示するWebページを開いてみましょう。正常にDockerが働いている場合、以下のURLからページを見ることができるはずです。
URL: http://localhost:5500

データの入出力を行います。Restlet Clientを開いてください。以下の通りに設定し、Sendを押すとデータが送信されます。

またここで先程開いたWebページを更新して見てみましょう。今追加したデータが表示されるはずです。

何件か入れてみましょう。先程と同様に操作を行います。

無事、APIサーバーがデータを受信し、ページのリクエストに合わせて動いているのが分かったかと思います。

またPUT, DELETEでデータが更新、削除されることも合わせて確認してみましょう。

MySQLを用いることでデータベースの中を見ることもできます。

$ docker-compose exec db mysql -hlocalhost -utest -ptest demo

こちらからデータベースに入ることができます。また今回のデータを見るには

> SHOW TABLES;
> SHOW COLUMNS FROM todo_models;
> SELECT * FROM todo_models;

などで見ることができます。
上から

  • demoデータベース内のテーブルを参照
  • todo_modelsのフィールドを参照
  • todo_models内のデータを参照

という風になっています。

後片付け

駆け足で見てきましたが後片付けをやっていきたいと思います。

$ docker-compose down

docker-compose downではコンテナの停止とコンテナの削除を行います。

おつかれさまでした。

ここまで見てきて説明が適当過ぎかな?とも思いましたが駆け足でDockerやMySQL、Golangを触るにはちょうどよかったのでは、と思っています。

タイトルとURLをコピーしました