Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@ystr_18(k y)

[docker/docker-compose入門]新型コロナのせいでお家時間が長くなり、switchやりたいけども転売ヤーのせいで買えなくなったのでマリオになりきれるものを作った

Last updated at Posted at 2020-05-03

この記事の目的

サークル内映像班の映像投影システムでdocker-composeを使用予定だが、非エンジニアの割合が多いため、それらの解説するため+アウトプットの練習

はじめ

よしとらです。
映像ツールをdocker-composeとraspiで作成したいなあって思ったので、docker-composeの入門を書きます…

qiita初投稿なので、読みにくいかもです…ごめんなさい…

新型コロナウイルスのせいで、新歓公演がなくなり、研究室配属されても自宅作業になってしまいました…
研究室の担当教員からは輪講でいっぱい英語文献読んで、慣れてねって言われて頑張ってますが、24時間ずっと頑張ることが不可能でした、

息抜きとしてswitchを買って、ゲームをしたいのですが…

スクリーンショット (245).png

くそたけえ…
転売ヤーとコロナは滅んでほしいですね…

なので自作したいなあって思いました。
世の中には一からswitch作ったお方がいますね、僕がやったら燃やすか爆破させそうですね

担当教員からは、いろんな技術触ってね～とslackで書いてあったので、団内の映像ツールのインフラでdocker/docker-composeを使おうと思っているので、それを触ります。

今回作成するもの

Web系で今後必ず使うであろうdocker/docker-composeの練習として、それを使って何か作ります、

docker-composeはアルバイトで使っていますが、一から設定して何か作成したことはなかったので頑張ります…

switchといえば任天堂ですね、
任天堂はいろいろゲームを作って出してますね、

その中でも一番有名なのはマリオですね、
なのでマリオになりきれるものを作ります。

実際に作るものの詳細

マリオといえば道端にあるブロックを破壊して、コインやアイテムをかっさらいますね、
なのでPC上にブロックを表示させて、クリックする度にコインが得られる音を発声するものを作っていきます

大雑把なdockerとdocker-composeについて

docker/docker-composeはWeb界で必ず扱いますね、
個人的に一言で表すと「環境による不具合を防ぐとても強いツール」だと思ってます(間違っていたらごめんなさい)

開発で一番大変なのは最初の環境構築で、バージョンが違うものをインストールすると動かないなんてことが日常的にありますね
でもdocker/docker-composeを使うことで一度決めた環境(バージョン等)をそのまま構築できるのでそんなことはなりません！！
あれでも、windows 10proとrailsとdocker-composeでエラーが…

docker/docker-composeの構築

docker/docker-composeを使うにしても最初はそれらの環境構築をします！これは逃げられません

今回はubuntu18.04ltsで行います
ubuntu18.04ltsのインストールの仕方
パソコン一つでインストールして元のデータを消してしまうかも、怖いって思う人はvirtual boxとか使ったほうが良いですね
(わからなかったら、解説記事書きます…)

dockerのインストール

最初にubuntuの更新とアップグレード、dockerのインストールで必要なソフトウェアのインストールを行います
これを行わないと何もできません

instal-software
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install -y \
     apt-transport-https \
     ca-certificates \
     curl \
     software-properties-common

インストールしたソフトウェアの簡単な解説は以下の感じです

ソフトウェア 解説
apt-transport-https セキュリティ関係。https通信が使えるようになるソフトかな？
ca-certificates これもセキュリティ関係。SSL接続の時の証明書関係を扱うソフトかな？
curl 通信関係。手打ちでインターネットに接続できるソフト。
software-properties-common ソフト管理関係かな？

上手くインストールできたらいっぱい文字が出てきて処理を終えます

次にdockerがインストールできるように以下のコマンドでGPG公開鍵をインストールします

install-GPGkey
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

上手く鍵がインストールできたかは以下のコマンドで確認できます

check-install-key
sudo apt-key fingerprint 0EBFCD88

コマンドを実行した結果の中から、uidの行に「Docker Release (CE deb) docker@docker.com」と書かれていれば成功です

次はapt-getでインストールできるようにaptレポジトリの設定をします
基本的にdockerのstableをインストールすれば問題ないのでそれをインストールできるようにします(他にedgeやtestがあるよ！！)

使ってCPUの派閥(?)によってコマンドが違いますので気を付けてください…

x86_64(インテルやamdのCPU)

x86_64でのやり方
sudo add-apt-repository \
     "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
      $(lsb_release -cs) stable"

armhf(ARMのCPU)

armhfでのやり方
sudo add-apt-repository \
     "deb [arch=armhf] https://download.docker.com/linux/ubuntu \
      $(lsb_release -cs) stable

インストール結果を反映させるためにapt-getを更新します

update
sudo apt-get update

ここまでくれば、docker本体のインストールができます！やったね！
docker本体は以下のコマンドでインストールできます

docker-install
sudo apt-get install -y docker-ce

インストールしたdockerは管理者権限(sudo)を付けないと扱えずとても不便です
なので管理者権限を付与しましょう

add-docker-sudo
sudo usermod -aG docker $USER

あとは再起動していきます

dockerのhello worldと簡単な解説/イメージ

dockerのhello world(インストールできたかのテスト)は以下のコマンドでできます

hello-world
docker run hello-world

このコマンドで以下のような結果が表示されたら成功です！やったね！

docker-hello-world-result
Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/

dockerはイミュータブルインストラクションの考えが基礎となっています。
イミュータブルは不変・変わらない、インストラクションは命令といった意味です
つまり、最初だけどのように動く等の命令を決めれば、次回以降それを使いまわして行こうって考えです。

dockerは以下のようなイメージで動いてます。

image.png

  • dockerエンジン(docker本体のこと)上にdockerコンテナを乗っけて動かす
  • dockerコンテナはdockerエンジン内で動かす仮想環境のこと
  • つまりdockerエンジンの上に新しく環境を作ってその上で実行しているということ

dockerコンテナは以下のようなイメージで動いてます。

image.png

  • dockerイメージは環境構築の手続き(何入れるよ！とかのこと)
  • レイヤは環境構築メインのこと
  • ベースイメージは仮想環境のOS等についてのこと(windows、os x、ubuntu etc..)

docker-composeのインストール

こんどはdocker-composeをインストールします！！
docker-composeのインストールは、CURLで本体を直接インストールしますが、インストール先が管理者権限の必要な場所なので管理者権限(sudo)付きCURLでインストールします

以下のコマンドがインストールのためのコマンドですが、コマンド内の1.25.5はdocker-composeのバージョンなのでdocker-composeのgithubからインストールしたいバージョンを見つけてそのバージョンにコマンドを書き換えます(latest releaseが最新版だよ)

install-docker-compose
sudo curl -L https://github.com/docker/compose/releases/download/1.25.5/docker-compose-$(uname -s)-$(uname -m) -o /usr/local/bin/docker-compose

docker-composeもdocker同様に管理者権限を付与したほうが楽なので付与します

add-docker-compose-sudo
sudo chmod +x /usr/local/bin/docker-compose

これでdocker-composeのインストールが終わりました！やったね！

docker-composeのhello worldと簡単な解説/イメージ

ではではdocker-composeのhello worldを行います
以下のdocker-compose.ymlファイルを作成していきます

docker-compose.yml
version: '3.8'
services:
  hello:
    image: hello-world:latest

作成できたらそのファイルがある階層で以下のコマンドを実行してdocker-composeを立ち上げます

docker-compose-run
docker-compose up

実行結果はdockerのhello worldとほぼほぼ同じです
似すぎているのはバグではありません

dockerで扱えるコンテナが一つに対してdocker-composeは複数のコンテナが扱えます
なのでdocker-compose.ymlを以下のように書き換えると、docker-composeを使って一度に複数のdockerのhello worldを行えます(普通やらないが)

docker-compose.yml
version: '3.8'
services:
  hello:
    image: hello-world:latest
  hello2:
    image: hello-world:latest

複数扱えるようになると、サイトのサーバーのほかにデータベースを立ち上げられて、できることの幅が一気に増えます、

pythonとflaskについて

pythonについて

pythonは学習コストが低い扱いやすいスクリプト言語です
pythonは2系と3系がありますが、3系が主流だと思います

pythonでは以下のことができます

  • 機械学習
  • Web開発
  • マイコンプログラミング
  • 画像処理等々…

いろいろできますね、強いですね

flaskについて

pythonのWebフレームワークです
Djangoの方が浸かってる人が多い感じしますが、Djangoは大規模な開発になります
それに対してFlaskは小・中規模な開発ができます
Flaskの方が学習コストが低くて初めてでも扱いやすいと思います
ドキュメントも軽く、読みやすいと思います

docker-compose上にflaskを動かす

フォルダ構成

folder/
       app.py
       Dockerfile
       docker-compose.yml

pythonファイルの作成

以下のファイルを作成します

app.py
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return "Hello world"

if __name__ == '__main__':
    app.run(host="0.0.0.0", port=5000)

Dockerfileの作成

Dockerfileはdocker-composeの立ち上げを行った時、最初に実行すること書いていくファイルです

FROM python:3.7-alpine
WORKDIR /code
ENV FLASK_APP app.py
ENV FLASK_RUN_HOST 0.0.0.0
RUN apk add --no-cache gcc musl-dev linux-headers
RUN pip install flask
COPY . .
CMD ["flask", "run"]

解説

docker-compose.ymlの作成

docker-compose.ymlファイルはdocker-compose上のコンテナの環境を設定するファイルです

docker-compose.yml
version: '3.8'
services:
  app:
    build: .
    ports:
      - "5000:5000"

サーバー立ち上げ

以下のコマンドで立ち上げれます

docker-compose up

立ち上げれたら、http://0.0.0.0:5000にアクセスすれば「hello world」と表示されます！やったあ！

Ctrl+Cで立ち上げをやめさせれます

解説

docker-compose upを行うことでDockerfileの内容を上から順に実行していきます
今回は「pythonイメージをインストール」して、「コンテナ上にディレクトリを作成」、「環境変数(ENV)の設定」、「必要なソフトウェアのインストール」、「実行」といった順で実行しています(かなり雑で端折っていますが…)

作成物

作成したものです　ー＞　https://github.com/KinoshitaYstr/mario
githubからダウンロードして、展開します
展開後のフォルダ内でdocker-compose upで立ち上げて、http://localhost:5000にアクセスすれば、ボックスが表示されます
ボックスをクリックすればコインがぶんどれます
(コードの解説が欲しかったら教えてください…)

おわり

これでみんなもマリオですね、やっふー

あとがき

任天堂法務部に睨まれたらこの記事非公開にするか消します
あと転売ヤーとコロナは任天堂法務部に睨まれるか一京円の罰金になってほしい
間違ってることがあったら教えてください…修正します…

Screenshot_20200501_213232_com.android.chrome.jpg
さよなら…

参考文献

使用した素材

これ書いてる途中、なにやってんだろうって思ったけども冷静に考えてなにやってるんだろう…

2
1
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
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?