前提 dockerのインストール、ホスト環境へのnode.js,typescriptのインストールは完了しているものとする。エディタはvscodeを用いる。 はじめに 以下のようなディレクトリを作成 react/ 　├ front/ 　├ docker-compose.yml 　├ Dockerfile Dockerfileを編集 Dockerfile #LTSである偶数のnodeイメージを取ってくる FROM node:16.1.0-stretch-slim #ホストのfrontの中身をコンテナのフロントへコピーする。コンテナでのディレクトリも同時に作成される。 COPY ./front /front #作業ディレクトリの移動 WORKDIR /front #パッケージインストール RUN yarn install #コンテナのポートを指定 EXPOSE 3000 #コンテナスタート時に実行 ENTRYPOINT [ "yarn", "start" ] docker-compose.ymlを編集 docker-compose.yml version: "3.7" services: front: build: context: . dockerfile: Dockerfile volumes: #ホストのfrontの中をコンテナのfrontの中で共有 - ./front:/front working_dir: /front ports: #ホストの3000ポートをコンテナの3000ポートに繋ぐ - 3000:3000 create-react-appの実行 frontディレクトリの中に入り下記を実行 npx create-react-app . --template typescript frontの中にファイルが作られるので 次のコマンドを実行 yarn start そしてブラウザでlocalhost:3000を入力すればよく見る画面が現れる。 docker-composeの実行 reactディレクトリで docker-compose up を実行 ターミナルをもう一つ開き下記コマンドを実行すればコンテナに入ることができる。 docker-compose exec front bash ESlint Prettierの導入 保存したときにコード整形されるようにします VS Codeの拡張機能としてESlintをインストール Prettierもインストール 次に [code] ＞ [基本設定] ＞ [設定]　の順序で設定画面を開きます。 検索ボックスに 『format』 と入力すると、 『Editor: Format On Save』 があるので、これにチェックを入れます。 そしてエディタ上で [Alt] + [Shift] + [F] を押すとフォーマッター（Prettier）を選択するように促されます。 それ以降保存でコードが整形されます。

ちょくちょくDockerのイメージを作るためのDokcerfileを書くのですが毎回書き方を忘れるためメモとして残しておきます。 FROM 使うイメージを指定します。 指定方法は 以下の通り # FROM: <イメージ名>:<タグ名> FROM node:12 なおlinux/amd64のようにプラットフォームも指定できます。 COPY localにあるファイルをイメージの中にコピーします。 自分がdocker化したいファイルやディレクトリを指定するときに使います。 # COPY: <ローカルでコピーするファイル> <コピーしたファイルの配置先> COPY . /app RUN コマンドを実行する時に使います。注意点ですが、RUNで指定されたコマンドはイメージのビルド時に実行されます。 なので、アプリケーションサーバーの起動などのコマンドを実行したら永遠にイメージビルドが終わらなくなります。 # RUN コマンド RUN apt-get update CMD コマンド実行する時に使います。CMDは完成したイメージからコンテナを作成し実行するときにコマンドが走ります。 なので、アプリケーションサーバーの起動など、コンテナが作成されてから即座に動いて欲しいコマンドを記載します。 # CMD ["<コマンド１>","<コマンド2>",...] CMD ["apt-get", "update"] WORKDIR RUN,CMDなどに記載されたコマンドを実行する際に、どのディレクトリで実行するかを指定します。 # WORKDIR 絶対パス WORLDIR /app ENV 文字通り環境変数を指定します # ENV <key>=<value> ENV NODE_VERSION=12 EXPOSE 指定したポートを開けます。プロトコルを指定することもできます。 # EXPOSE <port> [<port>/<protocol>...] EXPOSE 3333 EXPOSE 3333/udp 特定ファイルをビルド対象から外す .dockerignoreというファイルを作れば、ビルドする際にそのファイルを除外できます。 例えば、npmにあるnode_modulesなどをCOPYに含めておくと、ローカルのOSとイメージのOSが違う場合エラーになる場合があります。 このような場合に、特定のファイルやディレクトリを除外するときに使います。 # comment */temp* */*/temp* temp? docker-composeのイメージ指定 本筋からそれますが、docker-composeでイメージを指定する際に、dockerfileを指定できて便利なので記載しておきます version: "2.4" services: webapp: build: context: ./dir dockerfile: Dockerfile-alternate args: buildno: 1 contextでディレクトリを指定し、dockerfileでdockerfileのファイル名を指定します。

Dockerのおすすめコマンドの紹介をします。 以下の4つはよく使うので覚えておくと便利です！ 全コンテナの停止 ターミナル docker stop $(docker ps -q) 全コンテナの削除 ターミナル docker rm $(docker ps -q -a) 全イメージの削除 ターミナル docker rmi $(docker images -q) ディスク容量の圧縮 こんな感じのエラーが出ました。 ERROR: Service 'test' failed to build: failed to copy files: failed to copy directory: Error processing tar file(exit status 1): write test/..... no space left on device デバイス内のディスク容量不足とエラーが出ますが、「容量不足じゃないぞ」となることがあります。 溜まったボリュームをすべて消してくれる以下のコマンドで解決します。 ターミナル docker volume rm `docker volume ls -q -f dangling=true`

Docker Imangeをリポジトリに登録する方法をメモしておきます。 前提条件 docker.com にアカウントが作成済みであること Docker Desktop for windowsがインストール済みであること 1. docker imageを作成 docker-compose、もしくはDockerfileを利用し、docker imageを作成します。 docker image build -t my-node [参考] Dockerfile (nodeのDockerファイル) dockerfile FROM node:14-alpine WORKDIR /opt/app # apk setup RUN apk update && \ apk --no-cache add bash curl && \ apk --no-cache add nmap && \ apk --no-cache add make gcc g++ python2 && \ apk --no-cache add git # Copy package.json to container and install COPY package.json /opt/app RUN npm install # Copy current source to the image COPY . /opt/app CMD ["npm", "start"] 2. 作成されたDocker Imageに名前、タグをつける Dockerリポジトリにアップするには、docker.comのアカウント名をImage名に付ける必要があります。 docker tag node:my-node [docker.comのアカウント名]/node:my-node 3. ローカルPCより、docker.comにログインする > docker login Authenticating with existing credentials... Login Succeeded 4. DockerHubへリポジトリ登録 > docker push [docker.comのアカウント名]/node:my-node The push refers to repository [docker.io/[docker.comのアカウント名]/node:my-node] 7: digest: sha256:285bc***************************** size: ooo 5. Docker Desktop for Windowsで登録を確認 無事に登録されていれば、REMOTE REPOSITORYにイメージが表示されるはずです。 　 　

機械学習、やってみた～い 機械学習を使って色々やってみたいことはあるけれど、何から手を付けていいかわからないところに 【Python】たった10行のコードで動かせる、物体検出のAIプログラムをマネして作ってみた。 ちょうど良い教材が。 簡単そうだしとりあえず手を動かして遊んでみた。 こんな画像も車やら人やら検出してくれるらしい… ほぉ… ちょこちょこ躓いたのでとりあえず動かすための手引として参考にしてもらえれば幸いです。 ちなみに私はwindows10 homeで動かしました。 環境構築 上記記事では仮想環境としてAnacondaを使っていますが今回はDockerを使ってみます。 使ったことなかったのでついでに触ってみようという算段です。 Dockerインストール Dockerのインストールまではこちらを参考にしました。 Windows 10 HomeへのDocker Desktop (ver 3.0.0) インストールが何事もなく簡単にできるようになっていた (2020.12時点) Dockerをインストーラーをダウンロード Docker公式-Docker Desktopからインストーラーをダウンロード。 私はwindows homeでしたのでHyper-vの設定は特にしていません。 dockerイメージの選択を迫られますが今回は最新のbusterにしました。 結局どれにすればいいの？ ・十分なテストをする余裕がなく、環境を素早く立ち上げなければいけない場合、stretch, buster, jessie, bullseyeあたりを適当に選ぶ Dockerイメージ alpine,slim,stretch,buster,jessie等の違いと使い分け 再起動 インストール完了後「Close and restart」ボタンでwindowsを再起動します。 Linuxカーネルのアップデート 「WSL2 installation is incomplete」というダイアログが出てLinuxカーネルのアップデートを求められます。 ここではまだRestartボタンを押さずにダイアログ内のリンクに飛んでLinuxカーネル更新パッケージをダウンロードして実行します。 なにやらディストリビューションを選べなどと言われますが無視。実行が終わったら「WSL2 installation is incomplete」のRestartを押します。 無事インストール完了。 dockerコマンドの確認 下記コマンドで怒られなければok $ docker version $ docker-compose -version Windowsがproの場合Hyper-Vを有効にしなければならないそうです。 ここまででdocker導入完了。次はPython環境を整える。 Python3.7用のコンテナ作成 python環境構築はこちらの記事を参考にしました。 Docker for WindowsでPython3環境を簡単構築 docker-compose.ymlを作成 まずコンテナの定義を書くファイルdocker-compose.ymlを作成する。 複数のdockerコンテナを組み合わせる場合に作成するため、作らないでもよいのですが とりあえず手引通りにすすめる。 まずは作業フォルダを作成し、docker-compose.ymlファイルを作成します。 作業フォルダ→ C:\develop\docker\python\ このフォルダにdocker-compose.ymlファイルを作成します。 手作業で作る。 $ touch C:\develop\docker\python\docker-compose.yml docker-compose.ymlの中は下記を記述。 version: '3' services: python: image: python:3.7 container_name: python_dev tty: true コンテナ起動！ $ cd C:\develop\docker\python\ //イメージの作成・起動 $ docker-compose up -d docker-compose up コマンドは個々のコンテナの出力をまとめます。 Docker Compose コマンドリファレンス だそうです。 docker execでコンテナに接続してみます。 //python_devというコンテナ内に新しいbashセッションを作成 $ docker exec -it python_dev bash リンク先ではbin/bash とありましたがno such file or directoryと言われるので上記で実行。 これでコンテナ側のLinuxに入れました。 Docker Engine リファレンス Vimを入れとく 任意ですが、あると便利なのでVimを入れておきます。 $ apt-get update $ apt-get install -y vim PythonでHello Worldしとく $ touch hello.py $ vim hello.py hello.py print("Hello World!") $ python hello.py Hello World! やったね！ 10行AIを作る ようやく本題です。 2. 必要なライブラリをインストールするから再開します。 ライブラリ・機械学習モデルをインストール pipでインストール。 $ pip install tensorflow==1.13.1 $ pip install numpy==1.16.1 $ pip install scipy $ pip install opencv-python $ pip install pillow $ pip install matplotlib $ pip install keras==2.2.4 $ pip install h5py==2.10.0 keras2.2.4を入れるとh5py3.1.0がインストールされてしまうのでh5pyは2.10.0を指定。 更に… 元になるPythonのバージョンによっては、OpenCVの前提パッケージをインストールしていなくて、以下のようなエラーが生じます。 そんな時は、エラー内容に示されているように必要パッケージをインストールしましょう。 DockerでOpenCVの環境を作る とのこと。入れる。 $ apt-get install -y libgl1-mesa-dev そしてimageAiというライブラリも入れる。 pip install https://github.com/OlafenwaMoses/ImageAI/releases/download/2.0.2/imageai-2.0.2-py3-none-any.whl おーけ。 最後に機械学習モデルも入れる。 //モデルを入れるディレクトリ。今後画像データやpythonデータもここに入れる。 $ mkdir modelDir $ cd modelDir $ curl -OL https://github.com/OlafenwaMoses/ImageAI/releases/download/1.0/resnet50_coco_best_v2.0.1.h5 マウスでぽちぽちやりたい人はこちらから。 pythonファイルを作る まずはファイルを作る。 $ touch FirstDetection.py 10行コピペ。何行だろうとかわらないのですがね。 私はここで生まれて初めてpython構文を（なんとなく）見た。見ただけ。 お好きなエディタでどうぞ。 Vimで開けばすぐですね。 FirstDetection.py from imageai.Detection import ObjectDetection import os execution_path = os.getcwd() detector = ObjectDetection() detector.setModelTypeAsRetinaNet() detector.setModelPath( os.path.join(execution_path , "resnet50_coco_best_v2.0.1.h5")) detector.loadModel() detections = detector.detectObjectsFromImage(input_image=os.path.join(execution_path , "image.jpg"), output_image_path=os.path.join(execution_path , "imagenew.jpg")) for eachObject in detections: print(eachObject["name"] , " : " , eachObject["percentage_probability"] ) 画像データの保存 Google画像検索で「横断歩道　車」と検索し、右クリックメニューから「画像アドレスをコピー」 画像データのファイル名は必ず「image.jpg」とする。 // -o(小文字)で名前を付けて保存できる。 curl -L -o image.jpg <コピーした画像アドレス> さあ準備は整った！ 実行！ $ python FirstDetection.py lsコマンドで見るとディレクトリ内にimagenew.jpgというファイルが生成される。 これで完了。 ただdockerコンテナにはGUIがないので今回はローカルにコピーして確認した。 dockerを抜けた状態でdockerプロセスIDを確認。ローカルのデスクトップにコピーする。 (ZZで抜ける） //コンテナのpsIDを確認する $ docker ps $ docker cp コンテナID:/modelDir/imagenew.jpg ~/Desktop/ Dockerコンテナ上のファイルをローカルにコピーする 実行できた！検出できてる～ まとめ お手軽ハンズオンの機械学習記事は多いので遊ぶだけでも楽しいですねー。 pythonはライブラリも日本語記事も多いのでエラーが出ても比較的脳死で解決していけたのも良かったです。 私は今まで機械学習はおろかpythonすら触ったことなく、なんとなくハードルがあったのですが取り払えてよかったです。 それでは。

最近副業でRailsを始めたので勉強がてらRailsやろうとなったので、Dockerで環境構築してみました。 作ったものはこちら 構成 下記構成で作成します。 Ruby Nginx MySQL ディレクトリ構造はこんな感じです。 Railsの動作環境の作成 Rails用のDockerfileの作成 まずはDockerfileを作成します。 srcディレクトリを作成し、中にDockerfileを作成。 内容は下記の様にします。 src/Dockerfile # マルチステージビルドでNode入れる FROM node:14-alpine as node FROM ruby:2.7 # nodeとyarnコピー COPY --from=node /opt/yarn-* /opt/yarn # シンボリックリンクはる RUN ln -fs /opt/yarn/bin/yarn /usr/local/bin/yarn RUN apt-get update && \ apt-get install -y git vim less build-essential graphviz cron bash g++ nodejs && \ apt-get clean #Railsアプリのルートディレクトリ作成 ENV RAILS_ROOT /var/www/src RUN mkdir -p $RAILS_ROOT WORKDIR $RAILS_ROOT RUN mkdir -p $RAILS_ROOT/tmp/sockets && mkdir -p $RAILS_ROOT/tmp/pids RUN node -v && yarn -v # ホストのGemfileのコピー COPY Gemfile Gemfile COPY Gemfile.lock Gemfile.lock RUN bundle install --jobs 20 --retry 5 解説はコメントにある通りですが、ベースイメージにruby:2.7を使用します。 なにが使えるかや、どんなイメージが有るかはDockerHubを見ます。 Railsは使用するのにNode.jsが必要です。 そのため、マルチステージビルドというのを利用します。 簡単に言うと、フォルダ内部のファイル移動と似たようなイメージです。 FROM node:14-alpine as nodeでnodeの環境ビルドされるので、そこからnodeを使うためのものを全部移動しましょう的なことです。 あとは、Railsで使うもの入れてます。 /tmp/socketsはUnixソケットでnginxと通信したいので配置用のフォルダです。 RUN node -v && yarn -vは仮にnodeやyarnがなかったときにビルドの途中で落としたいのでいれてます。 Gemfileの作成 src内にGemfileとGemfile.lockを作成します。仮に既存のプロジェクトの場合はここに配置します。 Gemfileは下記の様にしておきます。Gemfile.lockは空で大丈夫です。 source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.7.3' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 6.1.0' docker-compseを作成しnginxとMySQLと連携する 作業ディレクトリ(srcの1つ上)内にdocker-compose.ymlを作成します。 内容はこんな感じです。 docker-compose.yml version: '3' networks: rails: volumes: db-volume: bundle-data: tmp-data: services: nginx: image: nginx:stable-alpine container_name: nginx ports: - ${APP_PORT:-80}:80 volumes: - ./nginx/default.conf:/etc/nginx/conf.d/default.conf - ./nginx/logs:/var/log/nginx - tmp-data:/var/www/src/tmp depends_on: - rails networks: - rails rails_db: image: mysql:8.0 container_name: rails_db command: --default-authentication-plugin=mysql_native_password ports: - ${DB_PORT:-3360}:3306 volumes: - db-volume:/var/lib/mysql environment: MYSQL_DATABASE: ${DB_DATABASE} MYSQL_USER: ${DB_USERNAME} MYSQL_PASSWORD: ${DB_PASSWORD} MYSQL_RANDOM_ROOT_PASSWORD: 'yes' networks: - rails rails: container_name: rails build: context: ./src dockerfile: Dockerfile depends_on: - rails_db volumes: - .:/var/www - bundle-data:/usr/local/bundle #ソケット通信用ファイルをnginxコンテナと共有 - tmp-data:/var/www/src/tmp command: puma -b unix:/var/www/src/tmp/sockets/puma.sock environment: TZ: 'Asia/Tokyo' DB_HOST: rails_db DB_DATABASE: ${DB_DATABASE} DB_USERNAME: ${DB_USERNAME} DB_PASSWORD: ${DB_PASSWORD} networks: - rails まずはnginxから nginxのイメージをそのまま利用します。 設定ファイルをバインドマウントしてます。UnixソケットはRailsコンテナのが必要なので、名前付きボリュームで共有しています。 その他エラー時に対応したいのでlogもバインドしてます。 設定ファイルは後述します。 次にMySQLです。 MySQLのイメージをそのまま利用します。 commandで認証方式を変更しています。 あとは環境変数の設定しています。 次にRailsです。 buildに先程作成したDockerfileを指定します。 tmp-dataにはpumaのソケット場所をしています。 そして、commandでUnixソケットで接続するように指定します。 railsのpuma.rbを指定してもいいのですが、記載不要で対応したいのでcommandで行います。 環境変数 環境変数を設定していきます。 ${DB_PASSWORD}のようになってる箇所ですね。 作業ディレクトリ内に.envを作成します。 DBの接続情報を記載します。DB_HOSTはrailsにわたすようにMySQLのコンテナ名を記載します。 .env DB_PORT=3360 DB_DATABASE=rails DB_USERNAME=homestead DB_PASSWORD=secret DB_HOST=rails_db nginx設定 作業ディレクトリにnginxディレクトを作成します。 default.confを作成します。 default.confの内容は下記です。 default.conf upstream rails_app { # ソケット通信したいのでpuma.sockを指定 server unix:/var/www/src/tmp/sockets/puma.sock; } server { listen 80; # ドメインもしくはIPを指定 server_name localhost; access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; # ドキュメントルートの指定 root /var/www/src/public; client_max_body_size 100m; error_page 404 /404.html; error_page 505 502 503 504 /500.html; try_files $uri/index.html $uri @rails; keepalive_timeout 5; location ~ /\. { deny all; } location ~* ^.+\.(rb|log)$ { deny all; } # リバースプロキシ関連の設定 location @rails { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_pass http://rails_app; } } ソケット通信の設定とログの出力先を設定しています。 RailsでMySQLの接続情報 src/config/database.ymlからDBの接続情報を変更します。 default: &default adapter: mysql2 encoding: utf8mb4 pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> database: <%= ENV.fetch('DB_DATABASE', 'rails') %> username: <%= ENV.fetch('DB_USERNAME', 'homestead') %> password: <%= ENV.fetch('DB_PASSWORD', 'secret') %> host: <%= ENV.fetch('DB_HOST', 'rails_db') %> 起動する あとは起動しましょう！ Railsの新規プロジェクトの場合は下記の様にプロジェクトを作成しましょう。 オプションは自分がイラないもの省いているのと、データベースをMySQLで作成してます。 docker-compose run --rm rails rails new . --force --database=mysql --skip-test --skip-turbolinks プロジェクトができたら、docker-compose up -d --buildでコンテナを全部立ち上げます。 http:localhostでアクセスできたらOK! 502が出たらnginxのエラーログを見てみましょう

環境構築できなくね？ 皆さん環境構築で詰まったことありませんか？プログラミングを始めたての駆け出しエンジニアの皆さんなら必ず一度はぶち当たる壁です。私自身もプログラミングを始めたてのころRuby on Railsの環境構築が全くできずに挫折しました。そこでDockerを使うと開発環境が一発で構築できるのです！すごいですよね。私も初めてこの話を聞いた時「そんなバカな」と思いました。 Dockerがないと大変 通常はlinux OSにライブラリをインストールして環境構築をしていきます。この際のエラーがとても厄介でしたよね。サイトを調べて記事を見つけ「これなら行ける！」と確信するができず... そう、他人と同じように環境構築できない場合もありますし、MacユーザだとしたらWindowの記事は参考になりませんしね。 そこでDockerがあれば、ひとまとめのパッケージとして配布してくれるのです。しかもみんな同じように動いてくれるのです。最高！ 　Dockerのインストール（Mac編） こちらを開いて 「 Get Started 」 をクリック。 「 Docker Desktop 」 の 「 Download for Mac -Intel Chip 」 をクリックしてダウンロードします。 ダウンロードできたらドラッグアンドドロップしてDockerを起動させましょう。 ターミナルでDockerがインストールされているか確認します。 docker --version 以下のように返って来ればDockerのインストール完了です！お疲れ様でした！ Docker version 20.10.6, build 370c289

環境構築できなくね？ 皆さん環境構築で詰まったことありませんか？プログラミングを始めたての駆け出しエンジニアの皆さんなら必ず一度はぶち当たる壁です。私自身もプログラミングを始めたてのころRuby on Railsの環境構築が全くできずに挫折しました。そこでDockerを使うと開発環境が一発で構築できるのです！すごいですよね。私も初めてこの話を聞いた時「そんなバカな」と思いました。 Dockerがないと大変 通常はlinux OSにライブラリをインストールして環境構築をしていきます。この際のエラーがとても厄介でしたよね。サイトを調べて記事を見つけ「これなら行ける！」と確信するができず... そう、他人と同じように環境構築できない場合もありますし、MacユーザだとしたらWindowの記事は参考になりませんしね。 そこでDockerがあれば、ひとまとめのパッケージとして配布してくれるのです。しかもみんな同じように動いてくれるのです。最高！ 　Dockerのインストール（Mac編） こちらを開いて 「 Get Started 」 をクリック。 「 Docker Desktop 」 の 「 Download for Mac -Intel Chip 」 をクリックしてダウンロードします。 ダウンロードできたらドラッグアンドドロップしてDockerを起動させましょう。 ターミナルでDockerがインストールされているか確認します。 docker --version 以下のように返って来ればDockerのインストール完了です！お疲れ様でした！ Docker version 20.10.6, build 370c289

shields.io でバッジ作るの楽しいよね はじめに React + TypeScript の開発及び実行環境を Docker (docker-compose) で構築するテンプレートリポジトリを GitHub で公開 動作確認環境 macOS Catalina : 10.15.7 docker desktop : 3.3.1(63152) Engine: 20.10.5 Compose: 1.29.0 Visual Studio Code : 1.56.0 GitHub テンプレートリポジトリ これまでは、GitHub で公開されている開発テンプレートを使うには、fork もしくはダウンロードしか方法がなかった (以下、公式の説明) 既存のリポジトリをテンプレートにして、自分や他のユーザが同じディレクトリ構造、ブランチ、およびファイルで新しいリポジトリを生成できるようにすることができます。 (中略) リポジトリをテンプレートにすると、リポジトリにアクセスできるユーザは誰でも、デフォルトブランチと同じディレクトリ構造とファイルで新しいリポジトリを生成できます。 (fork と比較すると)テンプレートリポジトリを利用することで、fork 元のコミットのログも残らず、テンプレートをベースに新しくリポジトリを作ることが可能になった (ダウンロードと比較すると)ダウンロード → git 初期化 → 再コミットの一連の手間を省略できる テンプレートリポジトリは下記の図のように Use this template に変更されている react-ts-dev 使い方 初回起動時は Docker Image のビルドが必要 コンテナを起動し、node_modules をセットアップ $ docker compose build $ docker compose run --rm frontend sh -c 'cd frontend && yarn install' 上記セットアップ完了後、実行環境を立ち上げる $ docker compose up 終了するときは $ docker compose down ブランチ内容 公開したテンプレートリポジトリのブランチは main, feature/material-ui-v4.11.1, feature/material-ui-v5.0.0-alpha.32 の 3 つ 【注意】node_modules/は git 管理の対象外のため、 git switchでブランチを切り替えると正しく動作しない場合があります main ブランチ React+TypeScript の開発及び実行環境 Visual Studio Code 上で開発を行うことを想定 下記のリポジトリをベースとした linter, formatter の機能付き 実行結果 feature/material-ui-v4.11.1 main ブランチに加えて material-ui ライブラリを追加 実行結果 下記の図のように material-ui の Button が表示されていれば成功 feature/material-ui-v5.0.0-alpha.32 main ブランチに加えて material-ui のプレビュー版(ver.5) ライブラリを追加 実行結果 下記の図のように material-ui の Button が表示されていれば成功 おわりに backend 何か作るか・・・

Apple Silicon Macでクローラーを作った時に、DockerでPlaywrightが動かせなくてハマったので、解決策を共有しようと思います。 結論 Node.jsで動かすときはこれです。Pythonを使いたいときは読み替えればできると思います。 Dockerfile FROM ubuntu:bionic # Install node16 RUN apt-get update && apt-get install -y curl && \ curl -sL https://deb.nodesource.com/setup_16.x | bash - && \ apt-get install -y nodejs # Install chromium RUN apt update && apt install -y chromium-browser # ... index.js import { chromium } from "playwright"; chromium .launch({ executablePath: "/usr/bin/chromium-browser", }) .then((browser) => { /* Code Here */ }) 何が起こったか Playwrightは公式でDockerイメージを公開しています。 Docker | Playwright playwright/Dockerfile.bionic at master · microsoft/playwright このイメージをM1 Macで動かそうとしたら、アーキテクチャが違うと怒られました。 アーキテクチャの違いを吸収するために、--platform linux/amd64を指定して起動しても、実行時にメモリ関連のエラーが発生してしまいました。 結局、arm64ネイティブで動くイメージが必要になったので、公式イメージのDockerfileを参考に作成しました。

1. dockerとは ネイティブな環境とほとんど変わらない高速な動作が可能な仮想環境を作れる、CPUコア数やメモリ容量を指定した複数の仮想環境を同時に起動できる、imageファイルを切り替えることで即座に環境構築ができる、などの素晴らしい機能によりデファクトスタンダードとなった仮想環境ツールです。 docker公式ページ https://docs.docker.com/ 2. インストール 2-1. Windows環境でのインストール docker desktopのインストール ダウンロードしてきてインストーラーします https://www.docker.com/products/docker-desktop Windows版のdockerはWSL2を利用しますので、この時点で起動してもエラーが出ます https://docs.microsoft.com/ja-jp/windows/wsl/install-win10 上記を解決する為に以下の手順をやっていきます WSL2をdockerが使えるようにする Windows版のdockerはWSL2を利用しますのでこれを使えるようにしてやります https://docs.microsoft.com/ja-jp/windows/wsl/install-win10 WSLを有効にする Windowsの設定内になる「Windowsの機能の有効化または無効化」を開きます (設定の検索窓から探すと早いと思います) 「Linux用Windowsサブシステム」と「仮想マシンプラットフォーム」にチェックを入れます。 カーネル更新プログラムパッケージを適用する 2021年4月29日現在ではx64 マシン用 WSL2 Linux カーネル更新プログラム パッケージをダウンロードしてきて実行すれば適用されます。 Docker Desktopを起動して以下のように表示されたら正常です Windows版でCLIｋらdockerを使う場合、一度Docker Desktopを起動しておく必要があるようです。 docker: error during connect: This error may indicate that the docker daemon is not running.: Post http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.24/containers/create: open //./pipe/docker_engine: The system cannot find the file specified. See 'docker run --help'. 2-2. Linux環境でのインストール Ubuntu18.04でやってみます アップデートします sudo apt update aptがHTTPS経由でリポジトリを使用できるようにパッケージをインストールする sudo apt install \ apt-transport-https \ ca-certificates \ curl \ gnupg-agent \ software-properties-common dockerの公式GPG公開鍵を追加 curl -fsSL https://download.docker.com/linux/ubuntu/gpg | apt-key add - 公開鍵のフィンがプリントを確認 sudo apt-key fingerprint 0EBFCD88 リポジトリを設定します x86_64の場合はarch=amd64です sudo add-apt-repository \ "deb [arch=amd64] https://download.docker.com/linux/ubuntu \ $(lsb_release -cs) \ stable" もう一度アップデートしてdockerをインストールします。docker-ce=以下にバージョンを入力して指定できますが、省略した場合は最新版がインストールされます。 sudo apt update sudo apt install docker-ce docker-ce-cli containerd.io 最後にdockerのバージョンを確認しておきましょう $ sudo docker version Client: Docker Engine - Community Version: 20.10.6 API version: 1.41 Go version: go1.13.15 Git commit: 370c289 Built: Fri Apr 9 22:46:01 2021 OS/Arch: linux/amd64 Context: default Experimental: true 3. CLIで使う 3-1. コンテナの生成/起動する docker runコマンドでコンテナの生成と起動が実行されます。 localに当該dockerイメージがない場合はdocker hubから自動的にダウンロードしてきてくれます。docker pullコマンドでダウンロードのみ行うことも出来ますが、その後docker runするのは同じです。 docker run hello-world 上記を実行すると以下のようにhello-worldコンテナが実行された結果が表示されます 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 container ls --all CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES f28a2890b770 hello-world "/hello" 1 minutes ago Exited (0) 1 minutes ago frosty_keller hello-worldイメージにfrosty_kellerというNAMEをつけて生成されているのが分かります。この名前はdockerがランダムに割り当てるもので、同じコンテナが複数起動しているときに見分けが付くようにしてくれているものです。 https://docs.docker.jp/engine/reference/run.html#name 3-2. NAMEを指定する docker runする際にNAMEを指定することが出来ます docker run --name "hello-world-01" hello-world 同様にコンテナ一覧を出すと、今度はhello-world-01というNAMEでコンテナが実行されたことが分かります。 CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 8caa8b8325f9 hello-world "/hello" 5 seconds ago Exited (0) 4 seconds ago hello-world-01 f28a2890b770 hello-world "/hello" 4 minutes ago Exited (0) 31 minutes ago frosty_keller 3-3. 結果をコンソールに出力する -itオプションによりコンテナの出力をterminalに表示してみます docker run -it lukaszlach/merry-christmas -itオプションはstdinを有効にする-iオプションと擬似端末を有効にする-tオプションを同時に指示するものです。これによりdockerコンテナとCLIでやりとり出来るようになります。ctrl + c でコンテナを停止してCLIに戻れます。 3-4. デタッチドモードで実行する dockerを通常起動するとCLIがコンテナの標準出力を受け付ける為に待機状態になりますが、-dオプションでデタッチドモードにすることでCLIが待機しないままバックグラウンドで起動することが出来ます。 https://docs.docker.jp/engine/reference/run.html#detached-vs-foreground docker run -d lukaszlach/merry-christmas ここで起動中のdockerコンテナを確認してみましょう。docker container lsと--allオプションを付けなければ起動中のコンテナのみを表示します。 >docker container ls CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 17d7dedd1195 lukaszlach/merry-christmas "/tree /tree.txt" 20 seconds ago Up 19 seconds condescending_johnson 先程起動したコンテナが動いているのが分かります 3-5. コンテナを停止する NAMEまたはUUIDを指定して停止できます。 コンテナの例 > docker container ls CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 17d7dedd1195 lukaszlach/merry-christmas "/tree /tree.txt" 25 minutes ago Up 40 seconds condescending_johnson 上記のようなコンテナを停止したい場合は以下のようにして停止できます。 UUIDで停止 docker stop 17d7dedd1195 NAMEで停止 docker stop condescending_johnson 3-6. 生成済みのコンテナを起動する docker stopで停止したコンテナを再度起動することが出来ます 起動のみ > docker start condescending_johnson dockerコンテナのCLIにアクセスしたい場合は-aオプションを付けます terminal接続で起動 > docker start -a condescending_johnson 3-7. 生成済みのコンテナを削除する 要らなくなったコンテナはdocker rmコマンドで削除できます。 削除対象はUUIDまたはNAMEで指定します。 対象を指定して削除する docker rm condescending_johnson 使っていないコンテナをまとめて削除することも出来ます 起動してないコンテナをすべて削除する docker container prune 使った後にいちいち消すのが面倒な場合は実行時に-rmオプションを付けて終了時にコンテナを削除するように出来ます -rmオプションで終了時にコンテナを削除する docker run --rm (image名) 3-8. docker image一覧を表示する > docker images REPOSITORY TAG IMAGE ID CREATED SIZE alpine/git latest c99c7d810bc1 10 days ago 25.1MB hello-world latest d1165f221234 8 weeks ago 13.3kB centos latest 300e315adb2f 4 months ago 209MB lukaszlach/merry-christmas latest bd797b67c25d 16 months ago 2.65MB 3-9. docker imageを削除する docker rmiの引数にREPOSITORYまたはIMAGE IDを指定して削除します REPOSITORYを指定 docker rmi alpine/git IMAGE_IDを指定 docker rmi c99c7d810bc1 起動していないimageをまとめて削除することも出来ます docker image prune --all 3-10. CPU配分、メモリ上限を指定する デフォルトではCPUとメモリは無制限になります https://docs.docker.jp/config/container/resource_constraints.html CPU CPUコア数を1.5に指定する docker run --cpus=1.5 centos CPU配分を50%にする(1024で100%) docker run --cpu-shares=512 centos メモリ --memoryでメモリ使用量上限、--memory-swapでメモリスワップの上限＋メモリ使用量上限を指定します メモリ上限512MB、メモリスワップ上限512MB docker run --memory=512m --memory-swap=1g centos --memory-swapを省略すると-memoryの値をスワップ上限に使います。 つまり上記の場合は--memory-swapを省略しても同じになります。 メモリ上限512MB、メモリスワップ上限512MB docker run --memory=512m centos 3-11. ポートに静的サイトを待機する Nginxで静的サイトを待機してくれるimageを使ってポート操作を練習してみましょう。prakhar1989/static-site を起動すると80番ポート (html) に静的サイトが待機してくれますが、dockerを起動しただけではコンテナのポートとホストのポートが繋がらないのでサイトが開けません。なので-Pオプションまたは-pオプションでコンテナのポートをホストのポートに割り当ててやります。 ポートをランダムに割り当てる -Pオプションをつけるとランダムなポートにサイトを割り当てられます > docker run -d -P --name static-site prakhar1989/static-site > docker port static-site 443/tcp -> 0.0.0.0:49153 80/tcp -> 0.0.0.0:49154 docker portでcontainerを指定するとポートの割当が見られます。上記の場合、80/tcpがhttpポートですので上記の場合は http://localhost:49154/ を開けばサイトが見られる筈です。 ポート番号を指定して割り当てる -pオプションを使って、-p ホスト側のポート:コンテナ側のポートと指定したポートを繋げることが出来ます。以下のようにするとコンテナの80番ポートがホストの8080番ポートに繋がります。 > docker run -d -p 8080:80 --name static-site prakhar1989/static-site 以下を開くと画面が開きます http://localhost:8080/ 3-12. ホストとコンテナでファイルをやりとりする docker cpコマンド https://docs.docker.jp/engine/reference/commandline/cp.html コンテナからホストにコピーする 「docker cp コンテナPATH ホストPATH」でコンテナの指定PATHからホストの指定PATHへのコピーが実行されます。PATHで指定する対象はフォルダでもファイルでも構いません。hoge名のコンテナの/home/pictures/フォルダからホストのpictures/フォルダにコピーする場合は以下のようになります。 docker cp hoge:/home/pictures/ pictures/ ホストからコンテナにコピーする 上記の逆にしてやれば同じようにホストからコンテナにコピーしてくれます docker cp pictures/ hoge:/home/pictures/ 3-13. imageを探す dockerがimageファイルの共有用にdocker hubというページを用意してくれています。Ubuntu、centos、django、nodejsなどのdocker公式リポジトリと、各ユーザーが作った公開リポジトリを利用することが出来ます。 https://hub.docker.com/search?type=image 試しにgolang公式のimageを使ってみます https://hub.docker.com/_/golang ダウンロードのみ docker pull golang コンテナを生成して起動する docker run golang 3-14. imageを作る 既にあるimageをベースにライブラリなどを追加して自分のimageを作ることが出来ます。 Dockerfileをつくる まず、新規imageをつくる条件を書いたテキストファイルをつくりファイル名「Dockerfile」で保存します。FROMがベースとなるイメージ、RUNがimage作成時に実行するコマンド、EXPOSEがポート番号でCMDがコンテナ起動時に実行するコマンドになりますので、以下の場合はUbuntu18.04の公式imageにminicondaをインストールしてjupyter notebookを起動待機するimageをつくるDockerfileになります。 なお、&& \で繋げてるコマンドが途中で処理を失敗したときにどこまで進んだか分からないと困るので、set -xを入れて実行したコマンドそのものを標準エラー出力に出すようにしておきましょう。 miniconda/Dockerfile FROM continuumio/miniconda3 # conda create RUN conda create -n chemodel python==3.7 # install conda package SHELL ["conda", "run", "-n", "chemodel", "/bin/bash", "-c"] RUN conda install django=3.* -c conda-forge --override-channels RUN conda install pytorch==1.7.1 torchvision==0.8.2 torchaudio==0.7.2 cpuonly -c pytorch -c conda-forge -c tboyer --override-channels RUN conda install -c rdkit -c conda-forge rdkit --override-channels # install pip package RUN pip3 install --upgrade pip RUN pip3 install gunicorn 上記以外にも、Dockerfileのコマンドはいろいろあります。 Dockerfileのコマンド FROM 元になるimage名 RUN docker build時に実行するコマンド CMD docker コンテナ起動時に実行するコマンド ENTRYPOINT コンテナ起動時に実行するコマンド ONBUILD imageを再利用してbuildするときに実行するコマンド ENV 環境変数=値 WORKDIR 作業ディレクトリ USER ユーザ名 LABEL ラベル名=値 EXPOSE ポート番号 ADD ホストのパス イメージのパス COPY ホストのパス イメージのパス VOLUME イメージのマウントポイントパス 詳しくは公式ページを参照して下さい https://docs.docker.jp/engine/reference/builder.html また、Dockerfileのベストプラクティスをdocker公式が公開してくれてますので読んでおきましょう http://docs.docker.jp/engine/articles/dockerfile_best-practice.html buildする 「docker build -t 作成するimage名 DockerfileがあるフォルダPATH」を実行することでDockerfileの内容通りにimageを作ってくれます。例えば、./minicondaフォルダにDockerfileがあって、testという名前でimageを作りたい場合は以下のようになります。 terminal docker build test ./miniconda コンテナを起動する docker imagesで確認すると先程作ったimageが表示されます > docker images REPOSITORY TAG IMAGE ID CREATED SIZE test latest fc72cb7f0dd7 About 30 seconds ago 3.41GB 他のコンテナと同様、docker runで起動できます docker run -it test docker hubにアップロードする 作ったimageをdocker hubに登録することも出来ます。無料アカウントでは公開イメージしか作れませんが、有料アカウントであればイメージを非公開にすることも出来ます https://docs.docker.jp/engine/userguide/dockerrepos.html Dockerfileのデバッグ docker公式のimageは軽量化を図るためか最小限のライブラリしか入っていませんので、普段使っているOSでインストールに使ってるコマンドが走らないというのが普通に起こります。しかも、エラー停止したときにRUNコマンドのどこで止まったのかイマイチ分かりにくいし、docker buildを実行する度にRUNコマンドの最初からやり直しになって時間がかかるなどの問題があるので、docker buildでデバッグしていくのは効率がよくありません。 そこで、docker run -itでコンソールに入ってコマンドを1つずつ実行しながら必要なライブラリをインストールしていって、上手くいったコマンドをDockerfileに書き移すというやり方が良いと思います。 https://qiita.com/pottava/items/452bf80e334bc1fee69a 4. docker desktopで使う WindowsやMacではdocker desktopを使うことで、GUI上でdockerコンテナを管理することができます。 コンテナ一覧はアイコンの色でコンテナが起動中か分かるようになっていて、起動/停止の切り替え、CLI接続、再起動やコンテナの削除が出来るようになっています。image一覧から新たなコンテナを生成して起動することも出来ますし、docker hubに登録することも出来ますので複数のコンテナの起動/停止をちょこちょこ切り替えるような場合には便利だと思います。 5. まとめ dockerめちゃめちゃ便利ですね。 Dockerfileで自前のimageをつくる辺りは結構苦戦しましたがマスターして使いこなしたいです。 参考にしたページ Windows環境でvscode Remote Containers接続環境をつくる手順を解説してくれています https://qiita.com/zaki-lknr/items/db99909ba1eb27803456 チートシートを作ってくれています https://qiita.com/wMETAw/items/34ba5c980e2a38e548db