20200925のdockerに関する記事は13件です。

投稿日：2020-09-25T23:05:17+09:00

【Rails6.0】突然CSSが読み込まれなくなった、、【怪奇現象？】

現在個人開発でRailsアプリを作っているのですが、正常に動いていたRailsアプリのCSSが突然読み込まれなくなり(画像ファイルも）無駄に時間を食ってしまいました。
結局はっきりとした原因はわかりませんが、解決するまでの過程をここに書いていこうと思います。

開発環境

windows10 Pro

Rails: 6.0.3.2

ruby: 2.7.1p83 (2020-03-31 revision a0c7c23c9c) [x86_64-linux]

Docker for windows

MySQL 5.7

nginx:1.15.8

エラーが発生した経緯

rspecのシステムスペックでテストを書いて実行、失敗を10回ほど繰り返してlocalhost（root_path)にアクセスしたら
CSSが反映されなくなっていた。
そのときのConsoleのエラー内容↓
Failed to load resource: the server responded with a status of 500 (Internal Server Error) 
このエラー自体はよく見るやつで、タイトル通りCSSファイルが読み込まれていないというものでした。

解決手順（？）

この解決策が正しいのか正直微妙ですが、治るまでの経緯をここに書かせて頂きます。
結論から言いますと、nignx.confの内容を適当に書き換えて、dockerコンテナをビルドし直して起動しなおしてエラーを起こしてもう一度ビルドし直してコンテナ起動したら治ったという感じです。普通に再ビルドしただけでは治りませんでした。これのせいで時間がかかりましたね、、たまたまエラー起こせたんで治せましたが、、
これだとわかる人にしかわからないでの以下で詳しく説明します。

1．nginx.confの内容を書き換える

私の開発環境ではなるべく本番環境に近づけるためにWEBサーバーとしてnginxコンテナを起動させています。
そのnginx.confはその設定ファイルです↓
# プロキシ先の指定
# Nginxが受け取ったリクエストをバックエンドのpumaに送信
upstream webapp {
  # ソケット通信したいのでpuma.sockを指定
  server unix:///webapp/tmp/sockets/puma.sock;
}

server {
  listen 80;
  # ドメインもしくはIPを指定
  server_name webapp ;

  access_log /var/log/nginx/access.log;
  error_log  /var/log/nginx/error.log;

  # ドキュメントルートの指定
  root /webapp/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 @webapp;
  keepalive_timeout 5;

  # リバースプロキシ関連の設定
  location @webapp {
    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://webapp;
  }
}
この設定ファイルのproxy_passを適当に書き換えてわざとエラーをおこします。（場所はどこでもいいかも）

2.dockerを再ビルドして起動する。
$ docker-compose down
$ docker-compose up -d --build
-dオプションはバックグランドで実行してくれます。
--buildオプションをつけるとビルドから起動まで一気にやってくれます。

そうすると、
$ docker-compose ps
    Name                  Command               State           Ports
----------------------------------------------------------------------------
webapp_app_1   bundle exec puma -C config ...   Up
webapp_db_1    docker-entrypoint.sh mysqld      Up       3306/tcp, 33060/tcp
webapp_web_1   /bin/sh -c /usr/sbin/nginx ...   Exit 1
エラーが起きて webapp_web_1コンテナがExitするはずです。（コンテナ名は、docker-compose.ymlの設定で変わるので各自置き換えてください。）

3.書き換えたnginx.confを元に戻して再ビルド

ここで適当に書き換えてわざとエラーを起こしたnginx.confのファイルを元に戻します。
そして2を再び実行します。
そしたらなぜか反映されるようになりました！嬉しい！！

最後まで読んでいただきありがとうございます！

正直今回の方法がどういうロジックで治ったのか？そもそも正しいのか？というのはわかりません。もし、わかるかたがいましたらコメントいただけると幸いです。

とりあえず、これをやったら治ったというのは事実です。production環境でプリコンパイル時にCSS読み込みがうまくいかないとかならまだわかるんですが、今回は突然のエラーだったので治すのに時間がかかってしまいました。同じエラーに遭遇している方に、こちらが役に立てばうれしいです！

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-25T22:31:19+09:00

VSCodeでDocker管理

Dockerで開発環境を管理してVSCodeでコーディングしたい
その為に調べた一連の流れとVSCode上でDockerの操作を記述しました。

環境:

Windows 10 Home: 2004
VSCode: 1.49.2
Docker: 19.03.12

Remote Developmentインストール

VSCodeを立ち上げて拡張機能でRemote Developmentを検索してインストール

実行環境の作成

Remote Developmentを用いた開発でのファイル構造はこんな感じです。
プロジェクト
├ .devcontainer
　├ devcontainer.json
　└ Dockerfile
└ 内容
プロジェクト直下にある.devcontainerフォルダ内にある
devcontainer.jsonとDockerfileにコンテナに関する設定を記述する感じです。
例ではPythonの環境をここを参考に書いておきます。
DockerPython
├.devcontainer
  ├ devcontainer.json
  └ Dockerfile
├ requirements.txt
└ test.py
Dockerfile
#-------------------------------------------------------------------------------------------------------------
# Copyright (c) Microsoft Corporation. All rights reserved.
# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information.
#-------------------------------------------------------------------------------------------------------------

FROM python:3
devcontainer.json
{
    "name": "Python 3",
    "context": "..",
    "dockerFile": "Dockerfile",

    "settings": { 
        "terminal.integrated.shell.linux": "/bin/bash",
        "python.pythonPath": "/usr/local/bin/python",
        "python.linting.enabled": true,
        "python.linting.pylintEnabled": true,
        "python.linting.pylintPath": "/usr/local/bin/pylint"
    },

    "appPort": [ 9000 ],

    "postCreateCommand": "pip install -r requirements.txt",

    "extensions": ["ms-python.python"]
}
equirements.txt
scikit-learn
test.py
print("haloworld")
コンテナの作成・起動

左下にある[><]をクリック、その後Remote-Containers: Open Folder in Container…を選択、そして
先ほど説明したプロジェクト(例ではDockerPython)を選択でコンテナが立ち上がります。(少し時間がかかります)
無事立ち上がりプロジェクトが表示されるされたら、試しにターミナルでpython test.pyとpip freezeを実行してみましょう。
/workspaces/DockerPython# python test.py
haloworld
/workspaces/DockerPython# pip freeze
joblib==0.16.0
numpy==1.19.2
scikit-learn==0.23.2
scipy==1.5.2
threadpoolctl==2.1.0
以上の通りになればちゃんと出来ています。

コンテナから抜ける

再び左下にある[><]をクリック、その後リモート接続を終了するを選択
するとコンテナから抜けることが出来ます。またコンテナも停止する。

コンテナに再び入る

Remote Developmentをインストール際に出来たバーのリモートエクスプローラーをクリック
その後出てきたリスト内から先ほどのプロジェクトをクリックその後出てきたファイル端のOpen Contanerを
クリック、そうすればコンテナが再起動して再び入ることが出来ます。

コンテナの削除

コンテナから抜けた後リモートエクスプローラーをクリック
消したいプロジェクトを右クリックで出てくるメニューでRemoveContanerをクリック
するとコンテナは削除される

Docker拡張機能

VSCodeの拡張機能としてDockerがあります。
実行環境を作る上ではRemote Developmentで十分ですが
Dockerはレスポンスが良くイメージも表示してくれるのでコンテナの管理の為に
一緒に入れとくのも良いと思います。

感想

Remote Developmentを使えばVSCodeでDocker環境での開発ができる上
コマンドを打たずにDockerの操作出来ていい感じでした。

参考

https://qiita.com/Yuki_Oshima/items/d3b52c553387685460b0

https://paiza.hatenablog.com/entry/2019/07/08/VSCode%E3%81%A8Docker%E3%81%A7%E7%B0%A1%E5%8D%98%E3%81%AB%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%82%92%E6%A7%8B%E7%AF%89%EF%BC%86%E5%85%B1%E6%9C%89%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-25T21:32:44+09:00

docker build --help 日本語訳

docker build --help 実行時に表示されるドキュメントの日本語訳。

使用法:
docker build [OPTIONS] PATH | URL | -
Dockerfile からイメージをビルドする

オプション:

--add-host list カスタムのホストから IP へのマッピングを追加します( host:ip )

--build-arg list ビルド時変数を設定する

--cache-from string キャッシュソースとして使用するイメージ

--cgroup-parent string コンテナーのオプションの親 cgroup

--compress gzip を使用してビルドコンテキストを圧縮する

--cpu-period int CPU CFS(Completely Fair Scheduler)期間を制限する

--cpu-quota int CPU CFS(Completely Fair Scheduler)の割り当てを制限する

-c, -cpu-shares int CPU シェア(相対ウェイト)

--cpuset-cpus string 実行を許可する CPU(0-3, 0, 1)

--cpuset-mems string 実行を許可する MEM(0-3, 0, 1)

--disable-content-trust イメージ検証をスキップ(デフォルトは true)

-f, -file string Dockerfile の名前(デフォルトは PATH/Dockerfile )

--force-rm 常に中間コンテナを削除する

--iidfile string イメージ ID をファイルに書き込みます

--isolation string コンテナ隔離技術

--label list イメージのメタデータを設定する

-m, --memory bytes メモリ制限

--memory-swap bytes スワップ制限はメモリ + スワップに等しい: -1 は無制限のスワップを有効にします

--network string ビルド中に RUN 命令のネットワークモードを設定します(デフォルトは default )。

--no-cache イメージのビルド時にキャッシュを使用しない

-o, -output stringArray 出力先(形式: type=local,dest=path )

--platform string サーバーがマルチプラットフォーム対応の場合はプラットフォームを設定する

--progress string 進行状況出力のタイプを設定しますコンテナの出力を表示する場合は plain を指定してください(デフォルトは auto )

auto

plain

tty

--pull 常にイメージの新しいバージョンのプルを試行します

-q, --quiet ビルド出力を抑制し、成功したらイメージ ID を表示する

--rm ビルドが成功した後、中間コンテナを削除します(デフォルトは true)

--secret stringArray ビルド時に公開する秘密ファイル(BuildKit が有効な場合のみ): id=mysecret,src=/local/secret

--security-opt string セキュリティオプション

--shm-size bytes /dev/shm のサイズ

--squash 新しく構築されたレイヤーを単一の新しいレイヤーにまとめる

--ssh stringArray ビルド時に公開する SSH エージェントソケットまたはキー(BuildKit が有効な場合のみ)(形式: default|<id>[=<socket>|<key>[,<key>]] )

--stream ストリームはサーバーに接続してビルドコンテキストを交信します

-t, -tag list 名前を指定する。 name:tag の形式で指定する。

--target string ビルドするターゲットビルドステージを設定します。

--ulimit ulimit Ulimit オプション(デフォルト [] )

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-25T20:26:20+09:00

毎回「docker-compose」を入力するのが面倒なのでエイリアスを設定する

docker-composeを使用する際、毎回
docker-compose up
docker-compose down
docker-compose run web~~~
を入力しなければならず、非常に面倒ですよね。
.zshrcにちょこっと記述を追加するだけで入力がとても簡単になるので、まだ設定していなければぜひ今すぐ設定してみてください。

環境

・mac OS
・zsh

やり方

どこでも良いので、.zshrc内に
alias dc='docker-compose'
の記述を追加するだけです。
早速やっていきましょう。

まずはターミナルを起動し、ルートディレクトリ上で
ls -a
のコマンドを打ってフォルダ一覧を表示、.zshrcが存在するか一応確認します。
zshを使用されている方であれば基本的に存在するはずです。

.zshrcの存在を確認したら、
code .zshrc
などの、ビジュアルエディタを開くコマンドを使って、.zshrcの編集画面を開きます。
code ~~はVScodeを開くためのコマンドなので、別のエディタをお使いの場合はそのエディタに適したコマンドを入力してください。

例）Sublimeをお使いであれば、subl .zshrc

エディタを開いたら、どこでもOKですが、とりあえず一番下あたりに
alias dc='docker-compose'
の記述を追記します。

これはエイリアスと言って代替可能なコマンドを指定する記述ですので、必ずしも「dc」である必要はなく、以下を参考にご自身のお好きなエイリアスを指定していただいてOKです。
alias 好きなエイリアス='docker-compose'
この記述を追記し終えたら、ターミナルに戻って
source ~/.zshrc
を実行しましょう。
これで先ほどの設定が反映されます。

cd ~~でdocker-composeファイルが存在するディレクトリに移動し、先ほど指定したエイリアスでdocker-composeを起動してみてください。
alias dc='docker-compose'
上記の設定をした場合は、
dc up
dc down
dc run web ~~
でdocker-composeを実行できます。

おしまい

以上です。
docker-composeに限らず、他にも省略したいコマンドがある場合は、上記と同じ方法でエイリアスを指定していけばOKです。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-25T16:22:02+09:00

Dcoker for windows起動時にNot enough memoryが出た時の対処法

状況

docker for windows 起動時にNot enough memory to start dockerと表示される。
再起動しても直らない。

対処法

①タスクバーのdockerアイコンを右クリックしsettingsを開く
②Resources内にあるADVANCEDを開く
③Memoryを最小の1.00GBに変更
④Apply&Restartをクリック

無事にDocker Desktop is runningになったら成功です。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-25T15:41:27+09:00

Rails (API) x MySQL x Nuxt.js環境をDockerで構築

はじめに

あるプロジェクトで、Rails (APIサーバー) MySQL (DBサーバー) x Nuxt (webサーバー)を使うことになったので、Docker を使って環境構築することにしました。
ログを残すと同時に、なるべく汎用的に再利用可能な形で、環境構築をしようと思います。

「再利用可能な形」というのも、以前他のプロジェクトでLaravel を使用した際にlaradock で環境構築をしたのですが、環境変数にアプリケーション名や、ポート番号を指定するだけで、よしなにコンテナ等をビルドしてくれます。今回はRails版のそれを作っていきます。（ちなみにlaradockには nuxt用のコンテナを立ち上げるDockerfileは用意されていません。）

今回やってることとしては、環境変数から値を読み取って、Dockerfile 及び docker-compose.ymlを設定していくだけです。
作成した環境はこちらにありますので、細かいところは随時ご確認ください。

ディレクトリ構成
.
|- mysql
|   |- Dockerfile
|   └ my.cnf
|- nuxt
|   |- src
|   |   └ nuxtアプリケーション
|   └ Dockerfile
|- rails
|   |- src
|   |   |- Gemfile
|   |   |- Gemfile.lock
|   |   └ railsアプリケーション
|   └ Dockerfile
|- docker-compose.yml
└ .env
MySQLサーバー

まずはDBサーバーを構築していきます。

Dockerfile
mysql/Dockerfile
ARG MYSQL_VERSION
FROM mysql:${MYSQL_VERSION}

ENV TZ ${TIMEZONE}
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone && chown -R mysql:root /var/lib/mysql/

COPY my.cnf /etc/mysql/conf.d/my.cnf

RUN chmod 0444 /etc/mysql/conf.d/my.cnf

CMD ["mysqld"]

EXPOSE 3306
docker-compose.yml
docker-compose.yml
version: "3.7"

services:
  mysql:
    build:
      context: ./mysql
      args:
        - MYSQL_VERSION=${MYSQL_VERSION}
    image: ${PROJECT_NAME}-mysql-img
    container_name: "${PROJECT_NAME}_mysql"
    environment:
      - MYSQL_DATABASE=${MYSQL_DATABASE}
      - MYSQL_USER=${MYSQL_USER}
      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
      - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
      - TZ=${TIMEZONE}
    volumes:
      - ${DATA_PATH_HOST}/mysql:/var/lib/mysql
    ports:
      - "${MYSQL_PORT}:3306"
    user: "1000:50"
    command: --innodb-use-native-aio=0
コンテナのビルド & 起動
$ docker-compose up -d mysql
ちなみにenvファイルはこんな感じです。
ここは個別にお好きな設定にしてください。
###########################################################
###################### General Setup ######################
###########################################################
# PROJECT NAME
PROJECT_NAME=railsdock

# TIMEZONE
TIMEZONE=Asia/Tokyo

# Choose storage path on your machine. For all storage systems
DATA_PATH_HOST=./.storage

### MYSQL #################################################
MYSQL_VERSION=8.0.21
MYSQL_DATABASE=default
MYSQL_USER=default
MYSQL_PASSWORD=secret
MYSQL_PORT=3306
MYSQL_ROOT_PASSWORD=root
MYSQL_ENTRYPOINT_INITDB=./mysql/docker-entrypoint-initdb.d

### Rails #################################################
RAILS_PORT=23450

### NUXT #################################################
NUXT_PORT=8080
APIサーバー(Rails)構築

今回はNuxt（フロント）から呼び出すAPIサーバーとして、Rails環境を構築します。

Dockerfile
rails/Dockerfile
FROM ruby:2.7.1

RUN apt-get update -qq \
  && apt-get install -y build-essential default-libmysqlclient-dev \
  && rm -rf /var/lib/apt/lists/* \
  && gem update

WORKDIR /rails/src
COPY ./src/Gemfile /rails/src/
COPY ./src/Gemfile.lock /rails/src/

RUN bundle install

EXPOSE 23450

CMD ["bundle", "exec", "rails", "server", "-p", "23450", "-b", "0.0.0.0"]
CMDを指定することで、コンテナを立ち上げるだけでrailsサーバーを起動するようにしてます。

docker-compose.yml
docker-compose.yml
version: "3.7"

services:
  mysql:
    # 省略

  rails:
    container_name: ${PROJECT_NAME}-rails
    build: rails/
    image: ${PROJECT_NAME}-rails-img
    volumes:
      - ./rails:/rails
    ports:
      - "${RAILS_PORT}:23450"
    depends_on: 
      - mysql
    stdin_open: true
    tty: true
depends_onでmysqlを指定することで、mysqlサーバーコンテナが立ち上がってからrailsサーバーが立ち上がるようになります。

Railsの起動
rails/src/Gemfile
source 'https://rubygems.org'
gem 'rails', '6.0.3'
また、Gemfile.lockを作っておいてください。
touch rails/src/Gemfile.lock
$ docker-compose run rails rails new . --database=mysql --api
database.ymlにpasswordとhostを設定
rails/src/config/database.yml
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: root # <= .envに設定したMYSQL_ROOT_PASSWORD
  host: mysql # <= docker-compose.ymlのserviceに設定したservice名
$ docker-compose run rails rails db:create
$ docker-compose up -d rails
これでRailsアプリケーションが立ち上がっているはずです。
localhost:23450（port番号はご自身のenvファイルに従う）にアクセスして、起動を確認してください。

Nuxt （フロントの環境構築）

最後はNuxtでアプリケーションサーバーを構築していきます。

Dockerfile
nuxt/Dockerfile
FROM node:14.5.0

ENV LNAG=C.UTF-8 \
    TZ=Asia/Tokyo

WORKDIR /nuxt/src

RUN apt-get update && \
    yarn global add \
                create-nuxt-app \
                nuxt \
                @vue/cli \
                pug \
                pug-plain-loader \
                node-sass \
                sass-loader

ENV HOST 0.0.0.0

EXPOSE 8080

CMD [ "yarn", "dev" ]
docker-compose.yml
docker-compose.yml
version: "3.7"

services:
  mysql:
    # 省略

  rails:
    # 省略

  nuxt:
    build:
      context: ./nuxt
      dockerfile: Dockerfile
    image: ${PROJECT_NAME}-nuxt-img
    container_name: "${PROJECT_NAME}_nuxt_app"
    environment:
      - HOST=0.0.0.0
    volumes:
      - ./nuxt:/nuxt:cached
    ports:
      - ${NUXT_PORT}:8080
    stdin_open: true
    tty: true
Nuxtアプリケーション作成
$ docker-compose run nuxt npx create-nuxt-app .


create-nuxt-app v3.1.0
✨  Generating Nuxt.js project in .
? Project name: src
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code)
Nuxt.js modulesはaxiosを選ぶことをお勧めします。
また、今回は導入していませんが、UI frameworkには、Vuetifyを導入しておくと、いい感じのコンポーネントを簡単に利用することができるので、フロントが苦手な方には、もってこいなフレームワークだと思います。あとからでも導入可能なので、必要な時に入れてください。

nuxtサーバーの設定
nxut/src/nuxt.config.js
server: {
  port: 8080, //デフォルト: 3000
  host: '0.0.0.0' //デフォルト: localhost
},
nuxtはデフォルトで3000番ポート, localhostでサーバーを起動するように設定されています。
もし、ポート番号を任意で変えているなら、nuxt.config.jsに末行に上記のserver設定を追記してください。

nuxtサーバー起動
$ docker-compose up -d nuxt
最初のnuxtアプリケーションのビルドには少し時間がかかります。長くても1分ほどだと思うので、少し待って、localhost:8080にアクセスしてください。
nuxtのトップページが見れていれば、開発環境は完成です。

ちなみに

現在僕は、Docker on Vagrant で実装しています。こうすることでコンテナのビルドやホットリロードが早くなりました。（なった気がします。）
こちらもそのうちログを残そうと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-25T14:16:19+09:00

PyCharmでDocker上のPythonを使ってプロジェクトを作成しようとしたらダメだったけど、Docker Composeでうまくいった

やりたいこと

PyCharmでPythonプログラムを実行する際、ローカルPCにインストールしたPythonではなく、Docker内のコンテナで実行したい。具体的には、FlaskによるWebアプリをPyCharmからDockerで実行したい。

環境はこちら。

macOS Catalina 10.15.6

PyCharm 2020.2.2 Professional Edition

Docker for Mac 2.3.0.5

この機能は、PyCharm Community Editionでは利用できません。

3行で書くと

PyCharmから[New Project]で新規プロジェクトを作成するとうまくできません

フォルダやファイルを作成してから、PyCharmで[Open]しましょう

DockerではなくDocker Composeを使いましょう

うまく行かなかった方法

まずPyCharmに設定してみた

PyCharmを起動して[Configure]-[Preference]

[Python Interpreter]を選択して、画面右端にある歯車アイコンをクリック→[Add...]

[Docker]を選択→[Server]の[New]をクリック

[Docker for Mac]を選択→画面下部に[Connection Successful]と表示されていることを確認してから[OK]

[Image name]に python:3.8 、[Python interpreter path]に python と入力→[OK]

[Python interpreter]が下記のようになっていることを確認→[OK]

いざ新規プロジェクトを作成・・・できない。

[New Project]を選択

[Existing interpreter]を選択→[Interpreter]で作成したDocker内Pythonを選択

[Remote path not provided]と言われるので、適当なパスを入力。すると「This interpreter type does not support remote project creation」などと言われてしまう。[Create]が押せない。

原因を探る

とりあえずさっき出たエラーメッセージでググると、公式サポートページやYouTrack（JetBrainsのイシュートラッキングシステム）が出てくるので、見てみます。

まずはサポートページから見てみると、どうやら同じ現象のようです。

回答には「システム上のPythonでプロジェクトを作って、設定からDocker上のインタープリターを追加してや！」と書いてあります。

しかしこのページ、2017年10月のものがそのままになってますね・・・。

次にYouTrack。これも2017年ですね・・・。

この回答にも「Openでフォルダを開いてからインタープリターを設定したらできたよ！」と書いてあります。

うまく行った方法

JetBrainsサポートページやYouTrackに書いてあった、フォルダやファイルなどを作成してからそれをPyCharmで開く作戦にします。

参考にしたURL

JetBrains公式ブログを参考にしました。（「Flask PyCharm Docker」で検索したらヒットした）

Docker-Compose: Getting Flask up and running

フォルダやファイルなどの作成
flask-docker
├── Dockerfile
├── docker-compose.yml
├── main.py
└── requirements.txt
Dockerfile
FROM python:3.8-alpine3.12

RUN mkdir /app
WORKDIR /app

COPY main.py main.py
COPY requirements.txt requirements.txt
RUN pip install -r requirements.txt

EXPOSE 5000

CMD python main.py
docker-compose.yml
version: '2'
services:
  web:
    build: .
    ports:
    - "5000:5000"
requirements.txt
Flask==1.1.1
main.pyは後ほど作成します。

PyCharmでOpen + Docker Composeの設定

PyCharm起動画面で[Open]→作成したフォルダを選択します。

Preference→[Project: (プロジェクト名)]-[Python interpreter]→画面右側の歯車アイコンをクリック

[Docker Compose]を選択→[Server]で[Docker]（前の手順で作成したもの）、[Configuration file(s)]でプロジェクト内のdocker-compose.yml、[Service]で[web]を選択→[OK]

Flaskなど、requirements.txtに書いたライブラリが含まれていることを確認して[OK]

ソースコードの作成
main.py
from flask import *

app = Flask(__name__)


@app.route('/')
def hello():
    return "Hello!"


if __name__ == '__main__':
    app.run(host='0.0.0.0', port='5000')
Flask関連のものも、PyCharm上で補完が効きます！！！

Docker ComposeではなくDockerにした場合、PyCharm上での補完が効きません。おそらく、Dockerの場合は docker run コマンドで実行しているっぽいので、Dockerfileが使われないのだと思います。

実行

main.py上で右クリック→[Run]またはCtrl+Shift+R（Macの場合）
PyCharmのコンソール
/usr/local/bin/docker-compose -f /Users/tada/IdeaProjects/flask-docker/docker-compose.yml -f /Users/tada/Library/Caches/JetBrains/PyCharm2020.2/tmp/docker-compose.override.272.yml up --exit-code-from web --abort-on-container-exit web
Recreating flask-docker_web_1 ... 
Attaching to flask-docker_web_1
web_1  |  * Serving Flask app "main" (lazy loading)
web_1  |  * Environment: production
web_1  |    WARNING: This is a development server. Do not use it in a production deployment.
web_1  |    Use a production WSGI server instead.
web_1  |  * Debug mode: off
web_1  |  * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
ターミナルでcurlからアクセス
$ curl localhost:5000
Hello!
やったね！！

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-25T13:48:21+09:00

DockerでZabbix 5.0インストール→障害時にSlack通知を設定するまで

サーバー監視、ドメイン監視を行いたい。
Zabbixの利用経験がなかったため、学習も兼ねて実装を行う。
障害時にSlackの指定チャンネルに通知が行くまでをゴールとする。

環境用意

名称バージョン

Ubuntu 20.04.01

Zabbix 5.0.3

Git 2.28.0

Docker 19.03.13

docker-compose 1.27.3, build 4092ae5d

docker-py 4.3.1

CPython 3.7.7

OpenSSL 1.1.0l 10 Sep 2019

手順

インストール手順です。

Zabbixをclone
git clone https://github.com/zabbix/zabbix-docker.git
cd zabbix-docker
今回はAlpine + PostgreSQL の構成でいきます。
Dockerを利用する際にはAlpineで十分のため、あまりサイズが大きいイメージは不必要と考えています。
MySQLではなくPostgreSQLを選ぶ理由は今後、設定が肥大化した際にMySQLではチューニングだけでは大量クエリを捌くのに向かないと判断したためです。後からMySQL→PostgreSQLに変えることも良いとは思いますが、コストを考え最初からPostgreSQLでいくことにしました。

選定には

Zabbixのデータベースベンチマークレポート PostgreSQL vs MySQL

大規模監視サーバでのPostgreSQL

を参考にしました。

YAMLをコピー
$ cp docker-compose_v3_alpine_pgsql_latest.yaml docker-compose.yml
DBのUser、Passwordの修正
#下記ファイルを必要に応じて修正
.POSTGRES_USER
.POSTGRES_PASSWORD
起動
$ sudo docker-compose up -d

$ sudo docker-compose ps
WARNING: The following deploy sub-keys are not supported and have been ignored: resources.reservations.cpus
WARNING: The following deploy sub-keys are not supported and have been ignored: resources.reservations.cpus
WARNING: The following deploy sub-keys are not supported and have been ignored: resources.reservations.cpus
WARNING: The following deploy sub-keys are not supported and have been ignored: resources.reservations.cpus
WARNING: The following deploy sub-keys are not supported and have been ignored: resources.reservations.cpus
WARNING: The following deploy sub-keys are not supported and have been ignored: resources.reservations.cpus
WARNING: The following deploy sub-keys are not supported and have been ignored: resources.reservations.cpus
WARNING: The following deploy sub-keys are not supported and have been ignored: resources.reservations.cpus
                 Name                                Command                  State                           Ports                     
----------------------------------------------------------------------------------------------------------------------------------------
zabbix-docker_db_data_mysql_1             sh                               Exit 0                                                       
zabbix-docker_db_data_pgsql_1             sh                               Exit 0                                                       
zabbix-docker_mysql-server_1              docker-entrypoint.sh mysql ...   Up                                                           
zabbix-docker_postgres-server_1           docker-entrypoint.sh postgres    Up                                                           
zabbix-docker_zabbix-agent_1              /sbin/tini -- /usr/bin/doc ...   Up                                                           
zabbix-docker_zabbix-java-gateway_1       docker-entrypoint.sh /usr/ ...   Up                                                           
zabbix-docker_zabbix-proxy-mysql_1        /sbin/tini -- /usr/bin/doc ...   Up             0.0.0.0:10071->10051/tcp                      
zabbix-docker_zabbix-proxy-sqlite3_1      /sbin/tini -- /usr/bin/doc ...   Up             0.0.0.0:10061->10051/tcp                      
zabbix-docker_zabbix-server_1             /sbin/tini -- /usr/bin/doc ...   Up             0.0.0.0:10051->10051/tcp                      
zabbix-docker_zabbix-snmptraps_1          /usr/bin/supervisord -c /e ...   Up             0.0.0.0:162->1162/udp                         
zabbix-docker_zabbix-web-apache-pgsql_1   docker-entrypoint.sh /usr/ ...   Up (healthy)   0.0.0.0:80->8080/tcp, 0.0.0.0:443->8443/tcp   
zabbix-docker_zabbix-web-nginx-pgsql_1    docker-entrypoint.sh             Up (healthy)   0.0.0.0:8081->8080/tcp, 0.0.0.0:8443->8443/tcp
Warningが出たので念の為調べます。
WARNING: The following deploy sub-keys are not supported and have been ignored: resources.reservations.cpus (次のdeployサブキーはサポートされていないため無視されました)
 deploy:
   resources:
    reservations:
      cpus: '0.5'
これらのオプションは、スウォームモードサービスのスケジュールオプションです
（つまり、実際にはリソースを予約せず、ノードでコンテナをスケジュールするときにswarmにそれらを考慮させるだけです）。

Docker Composeはスウォームモード（ローカルコンテナーをデプロイする）では機能しないため、
これらの制限を考慮に入れるオーケストレーターはありません。

参考：Compatibility mode #5684

reservationを使わなければwarningは消えそうです。
無視されているため、このエラーごと無視して問題なさそうなのですが
確認するたびに毎度Warningが出るのは心理的にも良くないため、該当行をコメントアウトしました。
      #reservations:
      #cpus: '0.5'
      #memory: 512M
それでは再度実行します。
$ sudo docker-compose up -d --build

$ sudo docker-compose ps
                 Name                                Command                       State                               Ports                     
-------------------------------------------------------------------------------------------------------------------------------------------------
zabbix-docker_db_data_mysql_1             sh                               Exit 0                                                                
zabbix-docker_db_data_pgsql_1             sh                               Exit 0                                                                
zabbix-docker_mysql-server_1              docker-entrypoint.sh mysql ...   Up                                                                    
zabbix-docker_postgres-server_1           docker-entrypoint.sh postgres    Up                                                                    
zabbix-docker_zabbix-agent_1              /sbin/tini -- /usr/bin/doc ...   Up                                                                    
zabbix-docker_zabbix-java-gateway_1       docker-entrypoint.sh /usr/ ...   Up                                                                    
zabbix-docker_zabbix-proxy-mysql_1        /sbin/tini -- /usr/bin/doc ...   Up                      0.0.0.0:10071->10051/tcp                      
zabbix-docker_zabbix-proxy-sqlite3_1      /sbin/tini -- /usr/bin/doc ...   Up                      0.0.0.0:10061->10051/tcp                      
zabbix-docker_zabbix-server_1             /sbin/tini -- /usr/bin/doc ...   Up                      0.0.0.0:10051->10051/tcp                      
zabbix-docker_zabbix-snmptraps_1          /usr/bin/supervisord -c /e ...   Up                      0.0.0.0:162->1162/udp                         
zabbix-docker_zabbix-web-apache-pgsql_1   docker-entrypoint.sh /usr/ ...   Up (health: starting)   0.0.0.0:80->8080/tcp, 0.0.0.0:443->8443/tcp   
zabbix-docker_zabbix-web-nginx-pgsql_1    docker-entrypoint.sh             Up (health: starting)   0.0.0.0:8081->8080/tcp, 0.0.0.0:8443->8443/tcp
無事、WARNINGも消えたため、次に本題に戻りたいと思います。

ホスト名について

コンテナがある本サーバーからはhttp://localhost/で確認ができます。
同一ネットワーク帯からはhttp://192.168.x.x/で接続が確認できました。

プロキシの設定

logsを確認するとエラーを確認。
zabbix-server_1            |    211:20200923:130201.825 cannot parse proxy data from active proxy at "172.16.238.4": proxy "zabbix-proxy-sqlite3" not found
zabbix-server_1            |    211:20200923:130202.452 cannot parse proxy data from active proxy at "172.16.238.6": proxy "zabbix-proxy-mysql" not found
下記のとおり対処。
Zabbix4.2 を docker で立ち上げてみた

cannot send list of active checks to "xxx": host [yyy] not found

エラーが出続ける。下記の通り対処。
【zabbix】ログに「-cannot-send-list-of-active-checks-to-127-0-0-1」が出続ける

ログイン

初期ID、PWは以下の通りです。(大文字注意)

ID PW

Admin zabbix

こちらはログイン後の初期画面です。

日本語化

左サイドバーの「User setting」→「Language」→「Japanese(ja_JP)」に変更します。
初期パスワードでは脆弱のため、パスワードも同時に変えてしまいましょう。

「Zabbix Server利用不可」を解消する

下記を参考に、修正しました。
Zabbix Server の利用不可を解消する

※「設定」→「ホスト」→「インターフェース」より。

ホスト・テンプレート・メール設定まわり

ここらへんはぐぐったら色々載ってるかと思います。
私は下記を参考にしました。

Zabbix 5.0 : 監視ホストの設定

Zabbix3 で Web 監視するための設定方法

※サーバー構築よりこっちのほうが理解が難しかった・・・。

タイムゾーン

Alpine版Zabbixは日本時間ではなかったため修正が必要。

Zabbix5.0をdocker-composeで速攻起動する

どこを変更すればいいのか詰まってましたが「.env_web」を修正しました。

グラフの文字化けの修正

ここを参考。

ARM系CPUのマシンにDockerでZabbixサーバを構築する - 日本語フォントのダウンロード
sudo apt-get install -y fonts-ipafont
こんな感じで該当フォントを直接マウントしました。
docker-compose.yml
 zabbix-web-nginx-pgsql:
  image: zabbix/zabbix-web-nginx-pgsql:alpine-5.0-latest
  ports:
   - "80:8080"
   - "443:8443"
  links:
   - postgres-server:postgres-server
   - zabbix-server:zabbix-server
  volumes:
   - /etc/localtime:/etc/localtime:ro
   - /etc/timezone:/etc/timezone:ro
   - ./zbx_env/etc/ssl/nginx:/etc/ssl/nginx:ro
   - ./zbx_env/usr/share/zabbix/modules/:/usr/share/zabbix/modules/:ro
   - /usr/share/fonts/opentype/ipafont-gothic/ipagp.ttf:/usr/share/zabbix/assets/fonts/DejaVuSans.ttf:ro
これで再度dockerを立ち上げると日本語になっていることが確認できます。

これで日本語フォント周りは完了。

Slack通知の設定

下記を参考
Zabbix 5.0でslack通知を設定する

結果

とりあえず、やりたかった監視体制を構築することが出来た。

感想

監視サービス、初見では人に聞かないと使い方無理(エージェントis何みたいな)

Zabbix4の経験者に色々聞いて使い方を理解できた

公式のドキュメント、普通に読みづらい

構築まではスムーズに行っていたが、実際の運用方法までを考えたやり方に苦戦した。

zabbix-agent、ホスト、テンプレート、アイテム、WEB、トリガー、グラフなど、最低限の機能を知らないと使えなさそう。

現場の運用者にはある程度使い方を指南、またはドキュメントを作らないと触れなさそう。

そもそもagentが使えないレン鯖運用が多いところだと管理が面倒

Zabbix検証用に動いているサーバーと障害が出ているサーバーを用意しておくと楽

参考の多さからわかるように、結構調べないと進まないので初心者は注意

参考

DockerでのZabbix 5.0の環境構築メモ
 Zabbix 5.0でslack通知を設定する
 Ubuntu で git のバージョンを最新版にする
 Zabbixのデータベースベンチマークレポート PostgreSQL vs MySQL
大規模監視サーバでのPostgreSQL
超軽量なAlpine Linuxについて調べた
 Zabbix 5.0 を Docker Compose で起動する手順
 ubuntuに最新版のdockerをインストールする
 Ubuntu20.04に最新のdocker composeをインストールする
 Docker Compose Limitsを実行する際の生産性のヒントとベストプラクティス - Docker Composeのための実践的なエクササイズその4
【備忘録】zabbixでDockerのリソース監視方法
 Zabbix 5.0 : 監視ホストの設定
 Zabbixを初めて学んだときにハマったこと（小ネタ・随時更新予定）
Zabbix 5.0 LTS Docker版起動からログインまで
 ARM系CPUのマシンにDockerでZabbixサーバを構築する
 ZabbixでWeb監視を行う（前編）
Zabbix5.0をdocker-composeで速攻起動する

名称	バージョン
Ubuntu	20.04.01
Zabbix	5.0.3
Git	2.28.0
Docker	19.03.13
docker-compose	1.27.3, build 4092ae5d
docker-py	4.3.1
CPython	3.7.7
OpenSSL	1.1.0l 10 Sep 2019

ID	PW
Admin	zabbix

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-25T12:10:14+09:00

[DockerToolbox] コンテナのポートに接続できない

本記事は Docker Toolbox を対象としています。Docker for Windows は対象外

コンテナに接続できない

Python + Flask でAPIサーバを開発するため、Dockerコンテナ上で4000番ポートに開いた開発サーバに接続したい。Dockerの設定は以下の通り。
docker-compose.yml
version: "3"
services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    container_name: "backend"
    ports:
      - "4000:4000"
    volumes:
      - "./backend/:/app"
  ...他のサービス...
Dockerコンテナ：ポート4000 <=> Dockerホスト：ポート40000　と繋がっています。

環境

Windows 10 Home 64bit

Docker version 19.03.1

Windows 10 Home では Hyper-V が使用できないため DockerToolbox 経由でインストール

[公式] Install Docker Toolbox on Windows

[Qiita] Windows環境にDocker Toolboxをインストールする

原因

Linuxカーネルを提供する仮想環境（VirtualBox）が間に挟まっているため、DockerホストはVirtualBoxでありWindows（ホストOS）とは別物。
Dockerコンテナ：4000 <=> Dockerホスト：40000 <=未接続=> Windows：4000　とホストOSまで繋がっていない。

詳しくは [Qiita] Dockerを活用するためのネットワーク関連操作のおさらいが参考になりました。

解決手法

VirtualBox と Windows 間に適切なポートフォワーディングを設定します。

VirtualBox マネージャーを開き、仮想マシンを選択して設定を開く

ネットワーク＞高度＞ポートフォワーディングを選択

ポートフォワーディングを設定

これでDockerコンテナ：4000 <=> Dockerホスト：40000 <=> Windows：4000と無事に接続できました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-25T11:21:50+09:00

SSH 接続可能な Docker コンテナを載せた VM に繋がらなくなった

(2020/09/25)
本記事は、下記記事からトラブルシュート部分を抜き出し、追記修正したものです。
最小構成の CentOS 8 に SSH 接続可能な Docker コンテナを作ってみる

概要

SSH 接続できる Docker コンテナでしばらく遊んでいると、コンテナを載せている VM に SSH 接続ができなくなるという問題が発生したため、その調査と解決策についてまとめる。

環境

Windows10 Home (1909)　（ホスト）

VirtualBox 6.1.4

CentOS 8.1.1911　（ゲスト）

Docker 19.03.8

Docker Compose 1.25.4

問題と対処

本記事では、どこからのコマンド実行かを明示するため、コマンド行の先頭に装置情報を付加する。
先頭が[centos@dockertest ~]$ となっているものはゲスト VM 上、test~:$ となっているものはコンテナ上でのコマンド実行を表すものとする。

問題発生

立てたコンテナに対して SSH アクセスするスクリプトを組んだりしてしばらく遊んでいると、あるとき突然ホストからゲスト VM への SSH 接続ができなくなってしまった。
具体的には、 TeraTerm でアクセスしようとすると、画面が真っ黒のまま応答が無い。
また、他のゲスト VM からコンテナを載せたゲスト VM へsshでアクセスしてみると、下記のメッセージが出て接続が弾かれてしまう。
[centos@othervm ~]$ ssh -p 2222 centos@192.168.11.4
shell request failed on channel 0
調査

上記メッセージ（shell request failed on channel 0）をもとにググってみると、下記のような記事がヒット。

参考：ssh ログインができない「shell request failed on channel 0」の対応方法

環境等異なるところはあるものの、プロセス周りが怪しいと当たりをつけて、動いているプロセスを調べてみる。
[centos@dockertest ~]$ ps aux | grep ssh
USER       PID %CPU %MEM    VSZ   RSS TTY      STAT START   TIME COMMAND
（～中略～）
22        7762  0.0  0.0      0     0 ?        Z    02:27   0:00 [sshd] <defunct>
22        7764  0.0  0.0      0     0 ?        Z    02:27   0:00 [sshd] <defunct>
22        7766  0.0  0.0      0     0 ?        Z    02:27   0:00 [sshd] <defunct>
22        7768  0.0  0.0      0     0 ?        Z    02:27   0:00 [sshd] <defunct>
22        7770  0.0  0.0      0     0 ?        Z    02:27   0:00 [sshd] <defunct>
22        7772  0.0  0.0      0     0 ?        Z    02:27   0:00 [sshd] <defunct>
22        7774  0.0  0.0      0     0 ?        Z    02:27   0:00 [sshd] <defunct>
22        7776  0.0  0.0      0     0 ?        Z    02:27   0:00 [sshd] <defunct>
22        7778  0.0  0.0      0     0 ?        Z    02:27   0:00 [sshd] <defunct>
22        7780  0.0  0.0      0     0 ?        Z    02:27   0:00 [sshd] <defunct>
22        7782  0.0  0.0      0     0 ?        Z    02:27   0:00 [sshd] <defunct>
22        7784  0.0  0.0      0     0 ?        Z    02:27   0:00 [sshd] <defunct>
22        7786  0.0  0.0      0     0 ?        Z    02:27   0:00 [sshd] <defunct>
22        7788  0.0  0.0      0     0 ?        Z    02:27   0:00 [sshd] <defunct>
（～中略～）
お、おおう……。

「Z」や「defunct」という表記から、どうも大量のsshプロセスがゾンビ化して、使用可能なプロセスIDを食いつぶしているらしいということがわかる。
ゲスト VM やコンテナを再起動すると一旦は再接続できるようになるものの、SSH 接続する度にゾンビプロセスが増えていくため、恒久対処にはならず、時限爆弾を抱えることになる。
[centos@dockertest ~]$ ps aux | grep Z | wc -l
2
（この間にホストから TeraTerm でコンテナに SSH 接続 ⇒ 切断を実行）
[centos@dockertest ~]$ ps aux | grep Z | wc -l
3
※「2」はpsコマンド出力のヘッダと実行コマンド自身（grep Z）がヒットしているだけなので、結果が「3」以上であればゾンビプロセスが発生していることがわかる。

原因

調べてみると、一般的に Linux ではinitというプロセスがすべてのプロセスの祖先になっていて、これがうまい具合にプロセス管理をしてくれ、通常はゾンビプロセスが発生しないようになっているらしい。
ところが、今回作成したDocker コンテナにはinitプロセスが存在しないので、プロセス管理の恩恵を受けられない。その結果、一度接続したsshプロセスが、その役目を終えたあとに行き場を失ってゾンビ化し、それが積み重なっていっていずれ新たなsshプロセスが起動できなくなる、ということのようだ。

ちなみに、initはプロセスIDとして1番（PID 1）が割り当てられるようだが、コンテナの PID 1 にはDockerfileでCMD命令に記述しているtailが割り当てられている。
test:~$ ps
PID   USER     TIME  COMMAND
    1 root      0:00 tail -f /dev/null
  ...
なお、ゾンビプロセスに関する詳しい原理については下記記事が参考になった。

参考：Unix プロセスと Docker の罠

解決策

方法はいろいろありそうだが、調査過程でinitについて学んだので、これを活かす方向で解決してみたい。
Docker Compose が version 3.7 以上であれば、docker-compose.ymlにinit: trueを追加すれば、コンテナでinitが動くようになるとのこと。

参考：Dockerの--initフラグについて
docker-compose.yml(修正後)
version: '3.8'

services:
  test:
    build: .
    container_name: test
    hostname: test
    ports:
      - "2222:22"
    tty: true
    init: true # この行を追加
実際に上記の通りファイルを書き換えて、再度コンテナを立ち上げてみる。
[centos@dockertest ~]$ docker-compose down
[centos@dockertest ~]$ docker-compose build
[centos@dockertest ~]$ docker-compose up -d
コンテナが立ち上がったら、再度ホストから TeraTerm でコンテナに SSH 接続し、プロセスを確認してみる。
test:~$ ps
PID   USER     TIME  COMMAND
    1 root      0:00 /sbin/docker-init -- /bin/sh -c /etc/init.d/sshd start && tail -f /dev/null
  ...
おお、COMMAND部分がちゃんと変わっている。
念の為、SSH 接続してゾンビプロセスが増えないことも確かめる。
[centos@dockertest ~]$ ps aux | grep Z | wc -l
2
（この間にホストから TeraTerm でコンテナに SSH 接続 ⇒ 切断を実行）
[centos@dockertest ~]$ ps aux | grep Z | wc -l
2
よきかな。

まとめ

SSH できる Docker コンテナを作るときはinitを動かすようにしよう

Docker コンテナを動かすときはゾンビプロセスの増殖に気をつけよう

プロセス管理絡みの話はこれまで特に気にしていなかったところだったので、いろいろ勉強になった。
そもそも Docker の思想として SSH 接続できるコンテナが是とされているのか、という問題はあるが、その辺りは追々勉強していきたい。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-25T00:43:44+09:00

独自のdocker-compose.ymlをコマンドラインで使う

独自のdocker-compose.yml

プロジェクトのdocker-compose.ymlを独自に書き変えたい場合
docker-compose -f docker-compose.myenv.yml
と-fオプションにカスタマイズしたYAMLファイルを指定することで、独自のCompose設定ファイルをもとにコマンドが実行されます。

しかし、毎回指定するのは面倒ですよね。

シェルの設定ファイル

.bashrcなどに以下を追記することで、ディレクトリ直下に独自の設定ファイルがある場合、dcを実行するとdocker-compose.myenv.ymlが適用されます。
.bashrc
function dc() {
    if [[ -f docker-compose.myenv.yml ]]; then
        echo 'Using docker-compose.myenv.yml'
        docker-compose -f docker-compose.myenv.yml $@
    else
        docker-compose $@
    fi;
}
alias dc=dc
例
.docker-compose.myenv.ymlがあるとき
$ dc
Using docker-compose.myenv.yml
Define and run multi-container applications with Docker.
...

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-25T00:32:26+09:00

DockerでRuby on Rails + Vue + MySQLの環境構築をする方法【2020/09最新版】

はじめに

フロントにVue、APIサーバにRailsという組み合わせは日本ではメジャーな構成の一つです。今回はこの構成をDockerを使って構築していきます。

この記事を読むことで、以下の構成をDocker作成出来るようになります！
API： Rails ６系
フロント：Vue(TypeScript) 2系
DB： MySQL 5.7

環境構築の流れ

Rails、VueのDockerfile作成

docker-compose.yaml作成

Rails、Vueのプロジェクト作成

最終的なディレクトリ構成は以下のようになります。
[project_name]
├── api // Rails
│   ├── Dockerfile
│   ├── ...
├── docker-compose.yaml
└── front // Vue
    ├── Dockerfile
    ├── ...
では環境構築に入っていきましょう！

1. ディレクトリ作成

プロジェクトディレクトリとその配下にAPI、フロントのディレクトリを作成します
$ mkdir project_name
$ cd project_name
$ mkdir api front
以降のコマンドはカレントディレクトリがプロジェクトディレクトリ想定で記載しています。

2. Dockerfile作成

RailsとVueそれぞれのDockerfileを作成します。

2-1. Rails

指定しているバージョン
- Ruby 2.7.1
- Rails 6.0.x
api/Dockerfile
FROM ruby:2.7.1

RUN apt-get update -qq && \
    apt-get install -y build-essential \ 
                       libpq-dev \        
                       nodejs \
   && rm -rf /var/lib/apt/lists/* 

RUN mkdir /app
ENV APP_ROOT /app
WORKDIR $APP_ROOT

ADD ./Gemfile $APP_ROOT/Gemfile
ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock

RUN bundle install
rm -rf /var/lib/apt/lists/*はaptのキャッシュを削除しています。これはDockerのイメージファイルサイズを軽量化するためです。

このDockerfileではRailsを含むGemfileを必要とするので、以下のファイルをapi/に作成します。
api/Gemfile
source 'https://rubygems.org'
gem 'rails', '~> 6.0.3'
空のGemfile.lockも作成します。
$ touch api/Gemfile.lock
この時点でのディレクトリ構成
[project_name]
├── api 
│   ├── Dockerfile   <- New!
│   ├── Gemfile      <- New!
│   └── Gemfile.lock <- New!
└── front
2-2. Vue

指定しているバージョン
- node 12.18.3
- Vue 2系 <- これは後述のコンテナ内でVueプロジェクトを作成する際に指定します
front/Dockerfile
FROM node:12.18.3-alpine

ENV APP_HOME /app
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME

RUN apk update && npm install -g @vue/cli
この時点でのディレクトリ構成
[project_name]
├── api 
│   ├── Dockerfile
│   ├── Gemfile
│   └── Gemfile.lock
└── front 
    └── Dockerfile <- New!
3. docker-compose.yaml作成

以下のdocker-compose.yamlをプロジェクトディレクトリに作成します
docker-compose.yaml
version: '3'

services:
  web:
    build: ./api
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    ports:
      - '3000:3000'
    depends_on:
      - db
    volumes:
      - ./api:/app
      - bundle:/usr/local/bundle
    tty: true
    stdin_open: true
  db:
    image: mysql:5.7
    volumes:
      - mysql_data:/var/lib/mysql/
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - '3306:3306'
  front:
    build: ./front
    volumes:
      - ./front:/app
    ports:
      - '8080:8080'
    tty: true
    stdin_open: true
    command: npm run serve

volumes:
  mysql_data:
  bundle:
MySQLとbundleのデータはボリュームにマウントし永続化しています。これによってコンテナを削除しても、データは消えません。
bundleはマウントしなくても、Gemを追加するたびにイメージのビルドすれば良いのですが時間がかかります。bundleをマウントすることでGemの追加がdocker-compose run api bundle installで済むようにです。

この時点でのディレクトリ構成
[project_name]
├── api 
│   ├── Dockerfile
│   ├── Gemfile
│   └── Gemfile.lock
├── docker-compose.yaml <- New!
└── front 
    └── Dockerfile
4. プロジェクトの作成

4-1. Rails

Railsプロジェクトの作成
rails newでRailsプロジェクトを作成します
$ docker-compose run web rails new . --force --database=mysql --api --skip-bundle
rails newの引数について
--force：Gemfileを強制的に上書き更新する
--database:使用するデータベースをMySQLにする
--api：APIモードでプロジェクトを作成。APIモードではUIに関係するファイルが省略されます。
--skip-bundle：bundle installを省略します。次のdockerイメージのビルドでbundle installをするためです。

dockerイメージ更新
Gemfileが更新されたので、buildしてdocker imageを更新します。
$ docker-compose build
DBの設定ファイルを修正

RailsのDB設定ファイルapi/config/database.ymlを修正します。
api/config/database.yml
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
- password:
+ password: password
- host: localhost
+ host: db
passwordはdocker-compose.yamlの環境変数MYSQL_ROOT_PASSWORDで指定したもの

hostはDBのサービス名に対応しています。

DBの作成
$ docker-compose run web rails db:create 
これでRailsの環境構築は完了です！

4-2. Vue

vue-cliでVueプロジェクトを作成
コンテナ内に入り、vue-cliを使ってVueプロジェクトの作成を対話的にします。

以下の設定項目はvue-cli v4.5.6のものです。設定内容は一例なのでお好みでどうぞ。

Vueコンテナでシェルを実行
$ docker-compose run front sh
以下フロントコンテナ内で対話的に設定していきます。
$ vue create .
# 現在のディレクトリ(/app)に作成するかの確認
? Generate project in current directory? (Y/n) Yes

# プリセットを使用するかどうか
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features # TypeScriptをインストールするためこちらを選択

# プロジェクトにインストールするライブラリの選択
? Check the features needed for your project:
 ◉ Choose Vue version #
 ◉ Babel
❯◉ TypeScript # TypeScriptをインストールする場合はこれを選択
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

# Vueバージョンの選択
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 2.x
  3.x (Preview)

# Class styleを使用するかどうか。私はObject styleを使うため No
? Use class-style component syntax? (Y/n) No

# TypeScriptと一緒にbabelを使うか
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Yes

# LintとFormatterの設定に何を使うか
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
❯ ESLint + Prettier
  TSLint (deprecated)

# Lintの実行タイミング
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save # 保存時にLintを実行
 ◯ Lint and fix on commit (requires Git)

# Babel, ESLintなどの設定をどこに記述するか
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files # 各設定ファイルにする
  In package.json

# 今回設定した内容をプリセットで保存するか。基本的にはプロジェクトを以降作成することはないため No
? Save this as a preset for future projects? No

# パッケージマネージャーに何を使うか
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
  Use NPM
インストール完了後、Ctrl+Dでコンテナを停止します。

5. 動作確認

コンテナを立ち上げる
$ docker-compose up -d
-d: バックグラウンドでプロセスを実行する

5-1. Rails

localhost:3000にアクセスし以下のページが表示されることを確認

5-2. Vue

localhost:8080にアクセスし以下のページが表示されることを確認

おわりに

お疲れさまでした。
今回はDockerでRuby on Rails + Vue + MySQLの環境構築する方法について書きました。

VueとRailsはそこまで学習コストが高くないため、初心者にもオススメ出来る構成です。ぜひお試しください！

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-25T00:32:26+09:00

DockerでRails + Vue + MySQLの環境構築をする方法【2020/09最新版】

はじめに

フロントにVue、APIサーバにRailsという組み合わせは日本ではメジャーな構成の一つです。今回はこの構成をDockerを使って構築していきます。

この記事を読むことで、以下の構成をDocker作成出来るようになります！
API： Rails ６系
フロント：Vue(TypeScript) 2系
DB： MySQL 5.7

環境構築の流れ

Rails、VueのDockerfile作成

docker-compose.yaml作成

Rails、Vueのプロジェクト作成

最終的なディレクトリ構成は以下のようになります。
[project_name]
├── api // Rails
│   ├── Dockerfile
│   ├── ...
├── docker-compose.yaml
└── front // Vue
    ├── Dockerfile
    ├── ...
では環境構築に入っていきましょう！

1. ディレクトリ作成

プロジェクトディレクトリとその配下にAPI、フロントのディレクトリを作成します
$ mkdir project_name
$ cd project_name
$ mkdir api front
以降のコマンドはカレントディレクトリがプロジェクトディレクトリ想定で記載しています。

2. Dockerfile作成

RailsとVueそれぞれのDockerfileを作成します。

2-1. Rails

指定しているバージョン
- Ruby 2.7.1
- Rails 6.0.x
api/Dockerfile
FROM ruby:2.7.1

RUN apt-get update -qq && \
    apt-get install -y build-essential \ 
                       libpq-dev \        
                       nodejs \
   && rm -rf /var/lib/apt/lists/* 

RUN mkdir /app
ENV APP_ROOT /app
WORKDIR $APP_ROOT

ADD ./Gemfile $APP_ROOT/Gemfile
ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock

RUN bundle install
rm -rf /var/lib/apt/lists/*はaptのキャッシュを削除しています。これはDockerのイメージファイルサイズを軽量化するためです。

このDockerfileではRailsを含むGemfileを必要とするので、以下のファイルをapi/に作成します。
api/Gemfile
source 'https://rubygems.org'
gem 'rails', '~> 6.0.3'
空のGemfile.lockも作成します。
$ touch api/Gemfile.lock
この時点でのディレクトリ構成
[project_name]
├── api 
│   ├── Dockerfile   <- New!
│   ├── Gemfile      <- New!
│   └── Gemfile.lock <- New!
└── front
2-2. Vue

指定しているバージョン
- node 12.18.3
- Vue 2系 <- これは後述のコンテナ内でVueプロジェクトを作成する際に指定します
front/Dockerfile
FROM node:12.18.3-alpine

ENV APP_HOME /app
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME

RUN apk update && npm install -g @vue/cli
この時点でのディレクトリ構成
[project_name]
├── api 
│   ├── Dockerfile
│   ├── Gemfile
│   └── Gemfile.lock
└── front 
    └── Dockerfile <- New!
3. docker-compose.yaml作成

以下のdocker-compose.yamlをプロジェクトディレクトリに作成します
docker-compose.yaml
version: '3'

services:
  web:
    build: ./api
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    ports:
      - '3000:3000'
    depends_on:
      - db
    volumes:
      - ./api:/app
      - bundle:/usr/local/bundle
    tty: true
    stdin_open: true
  db:
    image: mysql:5.7
    volumes:
      - mysql_data:/var/lib/mysql/
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - '3306:3306'
  front:
    build: ./front
    volumes:
      - ./front:/app
    ports:
      - '8080:8080'
    tty: true
    stdin_open: true
    command: npm run serve

volumes:
  mysql_data:
  bundle:
Railsの開発サーバ起動時に-bでホストを指定します。省略するとホストからコンテナにアクセスできません。0.0.0.0を指定することで、コンテナが持つ全てのインターフェースでlistenできるようになるため、ホスト側からコンテナにアクセスできるようになります。

MySQLとbundleのデータはボリュームにマウントし永続化しています。これによってコンテナを削除しても、データは消えません。
bundleはマウントしなくても、Gemを追加するたびにイメージのビルドすれば良いのですが時間がかかります。bundleをマウントすることでGemの追加がdocker-compose run api bundle installで済むようにです。

この時点でのディレクトリ構成
[project_name]
├── api 
│   ├── Dockerfile
│   ├── Gemfile
│   └── Gemfile.lock
├── docker-compose.yaml <- New!
└── front 
    └── Dockerfile
4. プロジェクトの作成

4-1. Rails

Railsプロジェクトの作成
rails newでRailsプロジェクトを作成します
$ docker-compose run web rails new . --force --database=mysql --api --skip-bundle
rails newの引数について
--force：Gemfileを強制的に上書き更新する
--database:使用するデータベースをMySQLにする
--api：APIモードでプロジェクトを作成。APIモードではUIに関係するファイルが省略されます。
--skip-bundle：bundle installを省略します。次のdockerイメージのビルドでbundle installをするためです。

dockerイメージ更新
Gemfileが更新されたので、buildしてdocker imageを更新します。
$ docker-compose build
DBの設定ファイルを修正

RailsのDB設定ファイルapi/config/database.ymlを修正します。
api/config/database.yml
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
- password:
+ password: password
- host: localhost
+ host: db
passwordはdocker-compose.yamlの環境変数MYSQL_ROOT_PASSWORDで指定したもの

hostはDBのサービス名に対応しています。

DBの作成
$ docker-compose run web rails db:create 
これでRailsの環境構築は完了です！

4-2. Vue

vue-cliでVueプロジェクトを作成
コンテナ内に入り、vue-cliを使ってVueプロジェクトの作成を対話的にします。

以下の設定項目はvue-cli v4.5.6のものです。設定内容は一例なのでお好みでどうぞ。

Vueコンテナでシェルを実行
$ docker-compose run front sh
以下フロントコンテナ内で対話的に設定していきます。
$ vue create .
# 現在のディレクトリ(/app)に作成するかの確認
? Generate project in current directory? (Y/n) Yes

# プリセットを使用するかどうか
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features # TypeScriptをインストールするためこちらを選択

# プロジェクトにインストールするライブラリの選択
? Check the features needed for your project:
 ◉ Choose Vue version #
 ◉ Babel
❯◉ TypeScript # TypeScriptをインストールする場合はこれを選択
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

# Vueバージョンの選択
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 2.x
  3.x (Preview)

# Class styleを使用するかどうか。私はObject styleを使うため No
? Use class-style component syntax? (Y/n) No

# TypeScriptと一緒にbabelを使うか
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Yes

# LintとFormatterの設定に何を使うか
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
❯ ESLint + Prettier
  TSLint (deprecated)

# Lintの実行タイミング
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save # 保存時にLintを実行
 ◯ Lint and fix on commit (requires Git)

# Babel, ESLintなどの設定をどこに記述するか
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files # 各設定ファイルにする
  In package.json

# 今回設定した内容をプリセットで保存するか。基本的にはプロジェクトを以降作成することはないため No
? Save this as a preset for future projects? No

# パッケージマネージャーに何を使うか
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
  Use NPM
インストール完了後、Ctrl+Dでコンテナを停止します。

5. 動作確認

コンテナを立ち上げる
$ docker-compose up -d
-d: バックグラウンドでプロセスを実行する

5-1. Rails

localhost:3000にアクセスし以下のページが表示されることを確認

5-2. Vue

localhost:8080にアクセスし以下のページが表示されることを確認

おわりに

お疲れさまでした。
今回はDockerでRuby on Rails + Vue + MySQLの環境構築する方法について書きました。

VueとRailsはそこまで学習コストが高くないため、初心者にもオススメ出来る構成です。ぜひお試しください！

　 Tweet
Qiitaで続きを読む