概要

wsl2というwindows上でLinux動作できる環境を利用してwin10Homeでも楽にdocker環境の構築を行いました。

IPアドレスなどVirtualBox+Vagrantで環境構築する場合は別途設定が必要だったのですが
wsl2はホストマシンと同じなので楽でした

• VirtualBoxとWSLを比較してWSLに乗り換えました

手順

OSのアップデート

wsl2は下記の要件を満たしていないと利用できないのでアップデートを行います。

バージョン 2004、ビルド 19041 以上に更新された Windows 10 を実行している。

バージョン確認は windowsロゴ + R でプログラム実行画面 → winver で実行

自動更新だと最新の状態とでてしまうので手動での更新が必要です！

• 公式サイトからアップデート

wslの有効化 & アップデート

いきなりwsl2を入れるということではなく

wslを有効化してwsl2にバージョンアップするということみたいです

管理者としてPowerShell起動

• Windows 10 用 Windows Subsystem for Linux のインストール ガイド

"Linux 用 Windows サブシステム" オプション機能を有効化 → wsl有効化

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

"仮想マシン プラットフォーム" オプション機能 → wsl2で使用する機能の有効化

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

ここで再起動をします

再度PowerShellを管理者で開いてwslの既定バージョンを2にする

wsl --set-default-version 2

WSL 2 を実行するには、カーネル コンポーネントの更新が必要です。詳細については https://aka.ms/wsl2kernel を参照してください

このメッセージがでる場合は https://aka.ms/wsl2kernel からダウンロードしてインストールしてください

再度上記のバージョン設定コマンド実行

WSL2との主な違いは～

と出たら大丈夫です！

wsl -l -v

でバージョン確認できます

Linuxディストリビューションのインストール

自分はubuntuにしたので以下はubuntu入れた場合です！

Microsoft Storeを開いてubuntuをインストール

Microsoftアカウントが必要です！

インストール後起動すると初回のみユーザー名とパスワード求められるので設定

これでwsl2の基本設定は完了

mkdir workspaceでworkspaceフォルダ作成しておく

pwd実行で下記のパスになってることを確認

/home/{ユーザー名}/workspace

ここの中でGitのリポジトリなど管理します！

エディタ

他のエディタは不明ですがvscodeで作業するものと想定します！

1. windowsにvscodeインストール（普段エディタがvscodeの場合はスキップ）
2. 拡張機能「Remote-WSL」を入れる
3. windowsからubuntu起動、作業ディレクトリでcode .を実行するとubuntu用のエディタが起動される

GitLab（GitHubもほぼ同様だと思います）

cd ~/.ssh

鍵発行（パスワード不要の場合は3回enter）

ssh-keygen -t rsa -b 4096 -C {ユーザー名}@example.com

クリップボードに公開鍵の内容をコピー

clip < ~/.ssh/id_rsa.pub

GitLabログイン
1. 右上のアカウント → settings → SSH Keys
2. クリップボードの内容貼り付け、タイトルはwsl2とかで大丈夫だと思います
3. Add key

ubuntuのコンソールに戻ってcd ~/.ssh

vi configで設定ファイル作成

接続情報記載する

~/.ssh/config

Host gitlab                                                                                                                                                                                                                                          
    HostName {Host名}                                                                                                                                                                                                                       
    User {ユーザー名}                                                                                                                                                                                                                              
    IdentityFile ~/.ssh/id_rsa                                                                                                                                                                                                                    
    Port 22                                                                                                                                                                                                                                       
    TCPKeepAlive yes                                                                                                                                                                                                                              
    IdentitiesOnly yes

これでGitLabのリポジトリをssh接続でcloneできると思います！

Docker

公式サイトからインストール

※インストール途中の Configuration は Enable WSL 2 Windows Features のチェックを外さないようにしてください。

これでubuntuでdockerが（docker-composeも）使えるようになりました！

紹介する内容

• ansibleをlocal(127.0.0.1)のport(55556)を指定して実行します
• sshログイン可能なdockerコンテナ(amazonlinux2)作成します

結論

デプロイ試しに活用できます

• production環境のリソース(AWSなど)を使わずにansibleを試せます
• デプロイ（Deployer、Capistranoなど）試しにも応用できると思います
• dockerイメージをAWS公式のamazonlinux2を使用したから、AWSのEC2に近い試しになれると思います
  • https://hub.docker.com/_/amazonlinux

紹介始めます

ディレクトリ構成

全体ソースコードは https://github.com/cheekykorkind/qiita-example/tree/master/ansible/to-docker で確認できます

• 全体図
  

• ansible担当デレクトリー
  

• ssh鍵担当デレクトリー
  

ansibleのport指定、localに対して実行する実装周り説明

• playbookとinventoryによってport(55556)、local（127.0.0.1）指定されます
  • playbookはansible/local_docker_book.ymlファイルです
    • playbookのhostsはinventoryファイルに書いたlocal_dockerにします
  • inventoryはansible/local_hostsファイルです
    • inventoryでlocalを意味する127.0.0.1にします
    • inventoryでansible_port=55556で使いたいpostを指定します

sshログイン実装周り説明

• 公開鍵docker-ssh-key.pubを加えたauthorized_keysファイル持って待機しているdockerコンテナに対して、ansibleが秘密鍵docker-ssh-keyを使ってsshログインします
  • 公開鍵はdocker-ssh/docker-ssh-key.pubファイルです
  • 秘密鍵はdocker-ssh/docker-ssh-keyファイルです
  • 公開鍵を加えたauthorized_keysはdocker-ssh/authorized_keysファイルです
  • docker-compose.ymlファイルで./docker-ssh:/home/ec2-user/.sshにマウントしているから、ansible実行するマシンとdockerコンテナ両方でファイルが使用可能です
    • entrypoint.shファイルで公開鍵、秘密鍵、authorized_keysの所有者をansible実行するマシンのユーザーと同じく設定し、権限を調整しています
      • dockerコンテナ中のユーザーのUIDをansible実行するマシンのユーザーのUIDと同じくすることで両方ファイル所有権を気にせずに使えます
  • docker-compose.ymlファイルでansibleが使うportを用意しますports: '55556:22'
    • dockerコンテナに開いたportにsshログイン作業処理してくれるsshdをバックグラウンドで起動しておきます
      • entrypoint.shで/usr/sbin/sshd -D部分です
    • sshdは指定された名前の秘密鍵/etc/ssh/ssh_host_rsa_keyがないと怒りますから、使用しませんがssh秘密鍵を作っておきます
      • DockerfileのRUN ssh-keygen -t rsa -f /etc/ssh/ssh_host_rsa_key -N ''部分です
  • ansible実行コマンドansible-playbook local_docker_book.yml -i local_hosts -u ec2-user --private-key ../docker-ssh/docker-ssh-keyでsshに使う秘密鍵を指定してます
    • i： カスタムinventoryファイルパスを指定
    • u：sshログインするユーザー名
    • private-key：sshログインで使う秘密鍵
    • https://docs.ansible.com/ansible/latest/cli/ansible-playbook.html

試し順番です

ansibleはファイルnginx.repoを2箇所（/etc/yum.repos.d/nginx.repo、/home/ec2-user/nginx.repo）にをコピーする内容です。
実行成功したら、dockerコンテナの/etc/yum.repos.d/nginx.repo、/home/ec2-user/nginx.repoにファイルが見えます。

1. docker composeがあるデレクトリー移動に移動します
   • cd qitta-example/ansible/to-docker
2. dockerコンテナをバックグラウンドで起動します
   • DOCKER_UID=$(id -u $USER) DOCKER_GID=$(id -g $USER) docker-compose up -d
3. Ansibleのplaybookがあるデレクトリーに移動します
   • cd qitta-example/ansible/to-docker/ansible
4. Ansible実行します(両方同じです。どっちでも実行可能です)
   • ansible-playbook local_docker_book.yml -i local_hosts -u ec2-user --private-key ../docker-ssh/docker-ssh-key
   • sh local_docker_book.sh

試します

サクッと使うにはどこぞの外部サービスを利用するのが早いですが，訳あって自製することになりました．

利用できるデータだとか，dockerを使った環境構築とかを書き留めておきたいと思います．

システムの構成

http://server/rgeocode?lat=43.063751&lon=141.358524
のような形で緯度経度をパラメータとして渡すGETリクエストにより，住所の情報が入ったjsonがレスポンスボディとして返ってくるイメージです．
WebフロントエンドとしてAPIの機能を提供するためにFlaskを利用します．
住所データベースについてはPostgres(+PostGIS）を利用します．

docker-composeを利用してサーバの環境構築を行う

docker-composeを利用してサーバ環境を構築します．
docker-compose.ymlとAPIサーバをFlaskを利用して提供するためのpython3環境を構築するためDockerfileを用意しましたので下記に示します．
※postgres-postgisコンテナのDBアクセスユーザーやパスワードについては外部公開する場合などには適宜修正してください

docker-compose.yml

version: '3'

services:
  postgres-postgis:
    container_name: postgres-postgis
    image: mdillon/postgis
    environment:
      POSTGRES_DB: postgres
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
    volumes:
      - ./docker/db/data:/var/lib/postgresql/data
      - ./docker/db/sql:/docker-entrypoint-initdb.d
      - ./opt:/root/opt
    ports:
    - 5435:5432

  python3env:
    restart: always
    build: python3
    container_name: 'python3env'
    working_dir: '/root/'
    tty: true
    volumes:
      - ./opt:/root/opt
    ports:
      - 56743:56743

python3/Dockerfile

FROM python:3
USER root

RUN apt-get update
RUN apt-get -y install locales && \
    localedef -f UTF-8 -i ja_JP ja_JP.UTF-8
ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8
ENV TZ JST-9
ENV TERM xterm

RUN apt-get install -y vim less
RUN pip install --upgrade pip
RUN pip install --upgrade setuptools
RUN pip install Flask
RUN pip install psycopg2
RUN pip install psycopg2-binary

コンテナの起動

下記のコマンドで行います．一度バックグラウンド起動させずに実行して，エラーが出なかったら一旦止めて再度バックグラウンド起動するのがスムーズ．

$ docker-compose up
(Ctrl+C)
$ docker-compose up -d

住所DBに利用する位置参照情報データの入手

住所DBについては国土交通省の位置参照情報データベースを利用して構築を行います．
（こういうすごいデータをタダで使えるんだから公共事業ってすごいよね）

https://nlftp.mlit.go.jp/isj/
にアクセスし左ペインの「位置参照情報 ダウンロード」を選択すると都道府県の選択画面が出ます．
今回は全国の街区単位のデータを集めるのでその手順について下記に示します．

• 「都道府県単位」を選択
• 遷移先の画面で「市区町村全域」にチェックを入れる
• 「全て」のラジオボタンを選択する
• データ整備年度は「平成29年」のものを選択した上で「選択」ボタンを桜花する
• ※平成30年も選択できるようだが2020年7月1日現在ではデータがない模様

• 「全ての街区レベルを選択」にチェックを入れて最下部までスクロールする
• 最下部に「選択」ボタンが有るので押下する
• 利用規約が表示されるのでよく読む

ファイルのダウンロード画面に遷移するので，47ファイルに対してを根気よく「ダウンロード」ボタンを押下してダウンロードする

住所DBの構築

そろそろ書くのが面倒になってきたのでコマンドと初期化コード載せます
postgresとpythonのコンテナを./opt（コンテナ内では/root/opt）に永続化してありますので，ここに先程ダウンロードした位置参照情報のzipファイル群を入れます．

# cd ./opt
$ chmod +x expandzip2csv.sh
$ ./download.sh
$ ./expandzip2csv.sh
$ docker-compose up -d
$ docker-compose exec postgres-postgis bash
$ mv ./opt/*-* /tmp/
$ cp ./opt/sample.sql /tmp
$ su postgres
$ psql -U postgres
$ postgres=> create database gis;
$ psql gis -U postgres
$ \i /tmp/sample.sql

位置参照情報のzipファイルを回答します．

expandzip2csv.sh

# 解凍
find ./ -name "*-16.0a.zip" -type f -print0 | xargs -0 -I {} unzip {} 

# 対象のcsvの改行コードを一括変換
find . -name '*.csv' -type f | xargs -n 10 nkf -Lu --overwrite

# 対象のCSV一覧を出力
find ./ -name "*.csv" -type f -print0 | xargs -0 -I {}  echo `pwd`/{} > list.txt

データベースを構築していきます．
※postgresのコンテナに入ってpsql実行する．

$ psql -U postgres
$ postgres=>CREATE DATABASE gis;
$ postgres=>\q
$ psql gis -U postgres

sample.sql

-- 拡張をインストール
CREATE EXTENSION IF NOT EXISTS postgis;

-- テーブル削除
DROP TABLE IF EXISTS datalocation;

create table datalocation(
   prefectures_nm       varchar(100),   -- 都道府県名
   city_nm              varchar(100),   -- 市区町村名
   oaza_nm              varchar(100),   -- 大字・丁目名
   koaza_nm             varchar(100),   -- 小字・通称名
   block_no             varchar(100),   -- 街区符号・地番
   coordinate_no        varchar(100),    -- 座標系番号
   x_coordinate         numeric(8, 1),  -- Ｘ座標
   y_coordinate         numeric(8,1 ),  -- Ｙ座標
   latitude           varchar(15),      -- 緯度
   longitude          varchar(15),      -- 経度
   displayed_address_flg         char(1),   --住居表示フラグ
   representative_flg    char(1),   -- 代表フラグ
   before_history_flg    char(1),   -- 更新前履歴フラグ
   after_history_flg char(1)    -- 更新後履歴フラグ
);

SELECT AddGeometryColumn('datalocation', 'the_geom', 4612, 'POINT', 2);

update datalocationSET the_geom = ST_SETSRID(ST_POINT(longitude::float, latitude::float), 4612);

CREATE INDEX gist_loc_ref_info ON datalocation USING GIST (the_geom);

行数の確認．1900万行くらいありました．

SELECT count(*) from datalocation;

下記は東京タワーの緯度経度ですが，下記のSQL実行して東京タワーの住所がでてきたら成功です．

SELECT *
FROM   datalocation
ORDER BY ST_SETSRID(ST_POINT(139.745433, 35.658581), 4326) <-> the_geom
LIMIT 1;

APIの構築を行う

ユーザーが逆ジオコーディングを行うために利用するAPIを構築します．
今回はpythonで動作するWebフロントエンドであるFlaskを利用します．

ソースベタ貼りします．
python3のコンテナ側からpostgresのコンテナに接続する際には，hostにコンテナ名を記載します．

api.py

from flask import Flask, request
import psycopg2
import json

app = Flask(__name__)

# SELECT *
# FROM   m_address_gaiku
# WHERE  representative_flg = 1
# ORDER BY ST_SETSRID(ST_POINT(139.745433, 35.658581), 4326) <-> the_geom
# LIMIT 1;
def getAddress(lon, lat):
    users = 'postgres' #initial user
    dbnames = 'gis'
    passwords = 'postgres'
    host = 'postgres-postgis' 
    port = '5432'
    conn = psycopg2.connect(" user=" + users +" dbname=" + dbnames +" password=" + passwords +" host=" + host +" port=" + port)
    cur = conn.cursor()
    cur.execute("SELECT * FROM m_address_gaiku WHERE  representative_flg = '1' ORDER BY ST_SETSRID(ST_POINT("+str(lon)+", "+str(lat)+"), 4612) <-> the_geom LIMIT 1;")
    results = cur.fetchall()
    #cur.fetchone()
    #conn.commit()
    cur.close()
    conn.close()

    return results

def generate_response(result):
    ret = {
        'status':200,
        'result':
        {
            'prefecture': result[0][0],
            'municipality': result[0][1],
            'local' : 
            {
                'section':result[0][2],
                'homenumber':result[0][4],
                'longitude':result[0][9],
                'latitude':result[0][8]
            }
        },
        'meta':[
            {
                'name':'thanks',
                'content':'このサービスは 国土交通省 提供 街区レベル位置参照情報および大字・町丁目レベル位置参照情報 を利用しています'
            }
        ]
    }
    return ret;

def generate_error_response(code):
    ret = {
        'status':code,
        'result':
        {
            'prefecture': '',
            'municipality': '',
            'local' : 
            {
                'section':'',
                'homenumber':'',
                'longitude':'',
                'latitude':''
            }
        },
        'meta':[
            {
                'name':'thanks',
                'content':'このサービスは 国土交通省 提供 街区レベル位置参照情報および大字・町丁目レベル位置参照情報 を利用しています'
            }
        ]
    }
    return ret;

@app.route('/')
def root():
    ret = {}
    try:
        result = getAddress(139.745433, 35.658581)
        ret = generate_response(result)
    except:
        ret = generate_error_response(201)

    return json.dumps(ret)

# http://server/rgeocode?lat=43.063751&lon=141.358524
@app.route('/rgeocode', methods=['GET'])
def rgeocode():
    lat = request.args.get('lat', '')
    lon = request.args.get('lon', '')

    ret = {}
    try:
        result = getAddress(lon, lat)
        ret = generate_response(result)
    except:
        ret = generate_error_response(201)

    return json.dumps(ret)

@app.errorhandler(400)
@app.errorhandler(404)
@app.errorhandler(500)
def error_handler(error):
    response = {
        "status":error.code, 
        "error": 
        {
            "type": error.name, 
            "message": error.description 
        }
    }
    return json.dumps(response)

## おまじない
if __name__ == "__main__":
    app.run(debug=True, host='0.0.0.0', port=56743)

参考

ソース一式はそのうちまとめてこちらにおいておきます
https://github.com/nc30mtd/docker-reverse-geocoding-pgsql

windows10とVSCodeでWindows上のフォルダで作業をしながらDockerを利用したデバッグ開発ができるようになったので設定までの流れを書き留めます。
windowsの環境を開発ツールのインストールで汚すことがなくなりスッキリし、ワークフォルダ毎に開発環境を切り替えることができるようになります。

WSL2を使用するためWindows10 2004にアップグレード (既にWindows10 2004の場合はスキップ)

https://www.microsoft.com/ja-jp/software-download/windows10

Linuxカーネルを更新する

https://docs.microsoft.com/ja-jp/windows/wsl/wsl2-kernel

PowerShellを開いて既存のディストリビューションをWSL2に設定

とりあえず既にインストールされているLinuxのディストリビューションをWSL2に設定します

確認

wsl --list --verbose

変更

wsl -set-version Ubuntu*** 2

Docker DesktopをWSL2 base engineに設定　(Docker Desktopが入ってなければインストール)

VSCodeのエクステンションで"Remote Development"をインストールする。(Remote WSL, Remote Containers, Remote SSHのパック)

VSCodeのコンテナの設定ファイル (.devcontainer/devcontainer.json)

デバッグ環境イメージのDockerファイルの指定とコンテナからlocalhostへ通すポートの指定を行う

• "dockerFile"で開発環境のDockerイメージを指定したDockerfile
• "forwardPorts"でローカルへのポートフォワード指定

下の例ではコンテナへlocalhost:80でアクセスできるようになります

    // For format details, see https://aka.ms/vscode-remote/devcontainer.json or this file's README at:
    // https://github.com/microsoft/vscode-dev-containers/tree/v0.122.1/containers/docker-existing-dockerfile
    {
        "name": "Existing Dockerfile",
        // Sets the run context to one level up instead of the .devcontainer folder.
        "context": "..",
        // Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
        "dockerFile": "../remotedev/Dockerfile",
        // Set *default* container specific settings.json values on container create.
        "settings": { 
            "terminal.integrated.shell.linux": null
        },
        // Add the IDs of extensions you want installed when the container is created.
        "extensions": [],
        // Use 'forwardPorts' to make a list of ports inside the container available locally.
        "forwardPorts": [80]
        // Uncomment the next line to run commands after the container is created - for example installing curl.
        // "postCreateCommand": "apt-get update && apt-get install -y curl",
        // Uncomment when using a ptrace-based debugger like C++, Go, and Rust
        // "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined" ],
        // Uncomment to use the Docker CLI from inside the container. See https://aka.ms/vscode-remote/samples/docker-from-docker.
        // "mounts": [ "source=/var/run/docker.sock,target=/var/run/docker.sock,type=bind" ],
        // Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
        // "remoteUser": "vscode"
}

VSCode起動設定 (.vscode/launch.json)

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "go",
            "request": "launch",
            "mode": "auto",
            "program": "${workspaceRoot}",
            "env": {
            },
            "args": [],
            "buildFlags": "-tags=debug",
            "args": [],
            "showLog": true
        },
        {
            "name": "Remote",
            "type": "go",
            "request": "launch",
            "mode": "remote",
            "remotePath": "/go/src/app", 
            "program": "${workspaceRoot}",
            "env": {
            },
            "args": [],
            "buildFlags": "-tags=debug",
            "showLog": true
        }        
    ]
}

ワークフォルダ/remotedev/Dockerfile (下のイメージはプライベートなDockerイメージのため存在しません)

FROM golang-aws-alpine:1.13-devel

プライベート環境にDockerレジストリがあれば開発環境をライブラリ化していくことができるようになり便利です。

VSCodeのリモートエクスプローラーでコンテナを起動する

コンテナ側のgoエクステンションを有効にする

Docker環境を作ってみよう！・・・と思い立ったので、コピペできるように纏めました。

マシンスペック

• Mac mini 2018
• macOS Catalina（10.15.x）
• Intel Core-i7 3.2GHz 6コア
• メモリ 32GB
• SSD 512GB

Docker環境

• Amazon Linux2
• Nginx 1.x
• PHP（PHP-FPM）7.1.x
• MySQL 5.7.x
• Laravel 5.x

やること

• Dockerのインストール
• Amazon Linuxで環境構築
• Macからマウント

補足

各環境を行ったり来たりするので、下記のように記載します。

[Mac]$ MacのターミナルでMac内の作業
[Docker]$ Macのターミナルからコンテナに接続して作業
[Docker]# Macのターミナルからコンテナに接続してroot権限で作業

前提

Homebrewはインストール済み

※参考
https://brew.sh/index_ja

Dockerのインストール

Home brewでインストールします。

[Mac]$ brew cask install docker
Updating Homebrew...
〜 省略 〜
==> Downloading https://desktop.docker.com/mac/stable/45519/Docker.dmg
######################################################################## 100.0%
==> Verifying SHA-256 checksum for Cask 'docker'.
==> Installing Cask docker
==> Moving App 'Docker.app' to '/Applications/Docker.app'.
?  docker was successfully installed!

[Mac]$ open /Applications/Docker.app

タスクバーのDockerアイコンが「Docker Desktop is running」になるまで待つ。
下記の画面が表示されるが、閉じて良い。

動作確認

[Mac]$ which docker
/usr/local/bin/docker

[Mac]$ docker --version
Docker version 19.03.8, build afacb8b

[Mac]$ docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
0e03bdcc26d7: Pull complete 
Digest: sha256:d58e752213a51785838f9eed2b7a498ffa1cb3aa7f946dda11af39286c3db9a9
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

〜 省略 〜

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

[Mac]$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
hello-world         latest              bf756fb1ae65        5 months ago        13.3kB

※参考
https://qiita.com/atahiro/items/61e826b4cb2387bcd226

hello-world削除

[Mac]$ docker ps -a
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS                     PORTS               NAMES
5b8f790636cd        hello-world         "/hello"            3 minutes ago       Exited (0) 3 minutes ago                       unruffled_villani

[Mac]$ docker rm 5b8f790636cd
5b8f790636cd

[Mac]$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
hello-world         latest              bf756fb1ae65        5 months ago        13.3kB

[Mac]$ docker rmi bf756fb1ae65
Untagged: hello-world:latest
Untagged: hello-world@sha256:d58e752213a51785838f9eed2b7a498ffa1cb3aa7f946dda11af39286c3db9a9
Deleted: sha256:bf756fb1ae65adf866bd8c456593cd24beb6a0a061dedf42b26a993176745f6b
Deleted: sha256:9c27e219663c25e0f28493790cc0b88bc973ba3b1686355f221c38a36978ac63

※参考
https://qiita.com/tifa2chan/items/e9aa408244687a63a0ae

コンテナの起動

イメージのダウンロード

[Mac]$ docker pull amazonlinux:2
2: Pulling from library/amazonlinux
a3f8e652bdc4: Pull complete 
Digest: sha256:436544dbd50a2f1f876390b9c2b09e98d73badb222ba188d69d58e649aa1b6b3
Status: Downloaded newer image for amazonlinux:2
docker.io/library/amazonlinux:2

[Mac]$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
amazonlinux         2                   7f335821efb5        2 months ago        163MB

※参考
https://qiita.com/skyknsk/items/c9710bb952a854a32cfd

Systemdパッケージをインストールする為にコンテナ起動

コンテナ内でsystemctlコマンドを利用する為には、コンテナを/sbin/initで起動する必要がある。
AmazonLinux2のイメージが、初期状態だと/sbin/initできない為、まずはコンテナにSystemdパッケージをインストールする。

[Mac]$ docker run -it -d --privileged --name local -p 8080:80 amazonlinux:2 /bin/bash
[Mac]$ docker exec -it local /bin/bash
bash-4.2# 

[Docker]# yum -y install systemd
[Docker]# exit

※参考
https://qiita.com/harukisan/items/6910684bbf2043a29812

Systemdパッケージをインストールしたコンテナをイメージ化

[Mac]$ docker commit local amazonlinux:local
[Mac]$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
amazonlinux         local               20a6c14cc93c        20 seconds ago      422MB
amazonlinux         2                   7f335821efb5        2 months ago        163MB

コンテナ停止

[Mac]$ docker stop $(docker ps -q)

※参考
https://qiita.com/shisama/items/48e2eaf1dc356568b0d7

コンテナ起動

[Mac]$ docker run --privileged -d -p 8080:80 --name amazonlinux amazonlinux:local /sbin/init
67f478ad9855289bd0c041cfde25869ec79d007bb222ee52905287aef565777c
[Mac]$ docker exec -it amazonlinux /bin/bash
bash-4.2# 

コンテナ作業あれこれ（インストールとか）

yumあれこれ

[Docker]# yum -y install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
[Docker]# yum -y install epel-release
[Docker]# yum -y install http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
[Docker]# yum -y update
[Docker]# yum -y install yum-utils
[Docker]# sed -i -e "s/priority=10/priority=99/g" /etc/yum.repos.d/amzn2-core.repo

ユーザー作成、sudo設定

[Docker]# useradd docker
[Docker]# ls /home
docker

[Docker]# yum install -y sudo
[Docker]# visudo

★下記の点線内を追記
---
docker ALL=(ALL)       NOPASSWD: ALL
---
:wq

PHP、Nginxインストール

[Docker]# yum-config-manager --enable remi-php71
[Docker]# yum -y install --enablerepo=remi,remi-php71 php php-devel php-mbstring php-pdo php-gd php-xml php-mcrypt php-mysqlnd php-fpm php-pecl-xdebug php-pecl-zip php-bcmath
[Docker]# vi /etc/yum.repos.d/nginx.repo
★点線内をコピペ
---
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/mainline/centos/7/$basearch/
enabled=0
gpgcheck=0
---
:wq
[Docker]# yum -y --enablerepo=nginx install nginx

PHP、Nginxの設定

[Docker]# vi /etc/php.ini
★点線内を末尾（Gで移動）にコピペ
---
xdebug.remote_enable = On
xdebug.remote_autostart = On
xdebug.remote_connect_back = 1
xdebug.remote_port = 9000
xdebug.scream = 0
xdebug.show_local_vars = 1
xdebug.idekey=PHPSTORM
---
:wq

[Docker]# vi /etc/php-fpm.d/www.conf
★下記を点線内に編集
user = apache
group = apache
listen = 127.0.0.1:9000
;listen.owner = nobody
;listen.group = nobody
;listen.mode = 0660
↓
---
user = nginx
group = nginx
listen = /var/run/php-fpm/php-fpm.sock
listen.owner = nginx
listen.group = nginx
listen.mode = 0660
---
:wq

[Docker]# cd /etc/nginx
[Docker]# cp nginx.conf nginx.conf.org
[Docker]# cd /etc/nginx/conf.d
[Docker]# cp default.conf default.conf.org
[Docker]# vi /etc/nginx/conf.d/default.conf
★点線内に置き換え
---
server {
    listen 80;
    server_name laravel.local;

    charset UTF-8;
    access_log  /var/log/nginx/access.log;
    location / {
        root /home/vagrant/laravel/public;
        try_files $uri /index.php?$query_string;
    }

    #error_page 404 /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page 500 502 503 504  /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }

    location ~ \.php$ {
        root /home/docker/laravel/public;
        fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}
---
:wq

[Docker]# systemctl start php-fpm
[Docker]# systemctl enable php-fpm
[Docker]# systemctl start nginx
[Docker]# systemctl enable nginx

MySQLのインストール、DB作成、ユーザー作成

[Docker]# rpm -Uvh https://repo.mysql.com/yum/mysql-5.7-community/el/7/x86_64/mysql57-community-release-el7-10.noarch.rpm
[Docker]# yum -y install --enablerepo=mysql57-community mysql-community-server
[Docker]# systemctl enable mysqld.service
[Docker]# systemctl start mysqld.service
[Docker]# grep 'temporary password' /var/log/mysqld.log
2020-06-26T09:21:06.925606Z 1 [Note] A temporary password is generated for root@localhost: XXXXXX
[Docker]# mysql_secure_installation
Enter password for user root: XXXXXX
★パスワードは「英字小文字、英字大文字、数字、記号」の組み合わせにしたら通る
 例）docker#DOCKER1234
New password: docker#DOCKER1234
Re-enter new password: docker#DOCKER1234
〜 以降の質問は全て y で回答 〜
All done!

[Docker]# mysql -u root -p
Enter password: docker#DOCKER1234

★DB：hoge、USER：fuga、PASSWORD：docker#DOCKER1234（※好きなのに変える）
mysql> create database hoge;
mysql> CREATE USER fuga@'%' IDENTIFIED BY 'docker#DOCKER1234';
mysql> GRANT ALL ON hoge.* TO fuga@'%';
mysql> CREATE USER fuga@'localhost' IDENTIFIED BY 'docker#DOCKER1234';
mysql> GRANT ALL ON hoge.* TO fuga@'localhost';
mysql> FLUSH PRIVILEGES;
mysql> quit

[Docker]# vi /etc/my.cnf
★点線内を追記
---
character-set-server = utf8
default_password_lifetime = 0
---
:wq

[Docker]# systemctl restart mysqld.service
[Docker]# exit

※参考
https://qiita.com/ksugawara61/items/336ffab798e05cae4afc

ユーザー指定でコンテナに接続する

[Mac]$ docker exec -u docker -it amazonlinux /bin/bash

コンテナ作業の続き

Laravelのインストールの準備

[Docker]$ cd ~
[Docker]$ curl https://getcomposer.org/installer | php
[Docker]$ sudo mv -i composer.phar /usr/local/bin/composer
[Docker]$ sudo yum -y install unzip
★Nginxが/home/docker配下を実行できるようにする
[Docker]$ chmod 701 /home/docker
[Docker]$ exit

イメージ化

[Mac]$ docker commit amazonlinux amazonlinux:local2

マウントする

[Mac]$ docker stop $(docker ps -q)
[Mac]$ docker rm $(docker ps -q -a)
[Mac]$ mkdir -p ~/Work/MountPoint/docker/mount
[Mac]$ docker run --privileged -d -p 8080:80 -v ~/Work/MountPoint/docker/mount:/home/docker --name amazonlinux amazonlinux:local2 /sbin/init
[Mac]$ docker exec -u docker -it amazonlinux /bin/bash

※参考
https://qiita.com/Yarimizu14/items/52f4859027165a805630

コンテナ作業の続き其の弐

Laravelのインストール、設定

[Docker]$ cd ~
[Docker]$ composer create-project --prefer-dist laravel/laravel laravel "5.6.*"
[Docker]$ cd laravel
[Docker]$ composer require --dev barryvdh/laravel-ide-helper
[Docker]$ composer require --dev squizlabs/php_codesniffer
[Docker]$ chmod -R 777 storage
[Docker]$ chmod -R 777 bootstrap/cache

[Docker]$ vi .env
★下記を点線内に編集
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret
↓
---
DB_DATABASE=hoge
DB_USERNAME=fuga
DB_PASSWORD=docker#DOCKER1234
---
:wq

[Docker]$ mkdir bin
[Docker]$ vi bin/clear-laravel.sh
★下記を点線内をコピペ
---
#!/bin/bash
php artisan view:clear
php artisan cache:clear
php artisan config:clear
php artisan route:clear
php artisan clear-compiled
php artisan config:cache
composer dump-autoload
php artisan ide-helper:generate
php artisan ide-helper:models -N
php artisan ide-helper:meta
find . -name '._.DS_Store' -type f -ls -delete
---
:wq
[Docker]$ chmod 755 bin/clear-laravel.sh
[Docker]$ bin/clear-laravel.sh

ブラウザで動作確認

http://localhost:8080/

GitHubActionsにて

オリジナルアプリにGitHubActionsを入れるべく悪戦苦闘する中
こんなエラーが発生

PG::ConnectionBad:
  could not translate host name "db" to address: Temporary failure in name resolution

むむむ。。
データベースに接続できない。。

色々と調べた結果、以下を参考にし、修正しました。
https://qiita.com/kajirikajiri/items/bf0ead854bba58131040
https://stackoverflow.com/questions/3582552/postgresql-connection-url/20722229#20722229
Postgresqlのポートを指定し、DATABASE_URLを明示しました。

修正前

.github/workflows/ruby.yml

name: Ruby

on:
  pull_request:
    branches:
    - master


jobs:
  run_spec:
    name: Run spec

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1 
    - name: Set up Ruby 2.6
      uses: actions/setup-ruby@v1 # https://github.com/actions/setup-ruby/blob/master/action.yml
      with:
        ruby-version: 2.6.x
    - name: Test with Rspec
      run: |
        gem install bundler
        bundle install --path vendor/bundle --quiet --jobs 4 --retry 3
        bundle exec rspec

修正後

.github/workflows/ruby.yml

name: Ruby

on:
  pull_request:
    branches:
    - master

jobs:
  run_spec:
    name: Run spec

    runs-on: ubuntu-latest

    services:
      postgres:
        image: postgres:10.3
        ports: ["5432:5432"]
        options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5
    steps:
    - uses: actions/checkout@v1 
      uses: actions/setup-ruby@v1 
      with:
        ruby-version: 2.6.x
    - name: Test with Rspec
      env:
        RAILS_ENV: test
        DATABASE_URL: postgresql://postgres@localhost:5432/postgres?encoding=utf8&pool=5&timeout=5000
      run: |
        gem install bundler
        bundle install --path vendor/bundle --quiet --jobs 4 --retry 3
        bundle exec rspec

無事に成功しました！

問題

mysqld: [Warning] World-writable config file '/etc/mysql/my.cnf' is ignored.

というエラーがvolumeのmy.cnfファイルのマウントで起こっていて人用の備忘録です。
mysql8はmy.cnfの権限設定が適切でない(誰でも書き込みができてしまう）と起動しなません。
なので、my.cnfをイメージ内で適切に設定する必要があるが、
windows環境下ではlinuxのような権限設定はできないので、
一工夫する必要があります。

対策 マウントするmy.cnfファイルにwindowsでread-onlyをつける

文字どりです。
read-onlyを設定した状態でvolumeにマウントするとマウント先で書き込み権限が消えます。
なので、この状態でコンテナを起動すればmy.cnfの権限設定が適切になり、エラーが解消されます。

久しぶりの投稿の割にひたすら短いですが、
かなり簡単な解決で感動したので残します。

参考：https://stackoverflow.com/questions/37001272/fixing-world-writable-mysql-error-in-docker

はじめに

今回は、Docker上でRuby on Rails6の環境構築をし、さらにwebpackerを用いてVue.jsの環境構築をする方法を紹介したいと思います。私が以前書いた、Ruby on Rails6内で、Vue.js + Vuex + Vue Router + axios環境を整えるをDocker上で行ったものになります。
使用PCはMacを想定しています。Windowsの方は、一部コマンドを読み替えてください。

今回の例では、親フォルダ名をrails_vue_mysql_on_dockerとしています。また、DBはMySQLを採用しています。

Ruby on RailsとVue.jsの環境構築

ターミナルを開きましょう。rails_vue_mysql_on_dockerフォルダを作り、その中にDockerfile、docker-compose.yml、Gemfile、Gemfile.lockを作成していきます。

ターミナル

$ mkdir rails_vue_mysql_on_docker
$ cd rails_vue_mysql_on_docker
$ touch Dockerfile
$ touch docker-compose.yml
$ touch Gemfile
$ touch Gemfile.lock

Dockerfileに以下をコピペします。

Dockerfile

FROM ruby:2.6.5
ENV LANG C.UTF-8
ENV TZ=Asia/Tokyo

RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
    && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
    && apt-get update -qq \
    && apt-get install -y nodejs yarn 

ENV APP_HOME /var/src/app
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME
ADD Gemfile $APP_HOME/Gemfile
ADD Gemfile.lock $APP_HOME/Gemfile.lock

ENV BUNDLE_DISABLE_SHARED_GEMS 1
RUN bundle install

docker-compose.ymlに以下をコピペします。

docker-compose.yml

version: "3"
services:
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - "3306:3306"
    command: --default-authentication-plugin=mysql_native_password
    volumes:
      - mysql-data:/var/lib/mysql
  app: &app_base
    build:
      context: .
    volumes:
      - .:/var/src/app
    ports:
      - "3000:3000"
    links:
      - db
    working_dir: /var/src/app
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    cap_add:
      - ALL # Add all privilege
    container_name: app
    tty: true
    stdin_open: true
    privileged: true
    logging:
      driver: "json-file"
      options:
        max-size: "100k"
    dns:
      - 8.8.8.8
  webpack-dev-server:
    build: .
    command: /bin/sh -c "bin/webpack-dev-server --hot --inline"
    ports:
      - "3035:3035"
    environment:
      WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
    volumes:
      - .:/var/src/app
    tty: true
    stdin_open: true
    depends_on:
      - app
volumes:
  mysql-data:
    driver: local

Gemfileに以下をコピペします。Gemfile.lockは空ファイルのままで大丈夫です。

Gemfile

source 'https://rubygems.org'

gem 'rails', '~> 6.0.3'

準備が整ったので、rails new します。

$ docker-compose run --rm app bundle exec rails new . --force --database=mysql --skip-bundle

処理が進んでいき、以下のメッセージが表示された頃には、Gemfileが更新されています。

Could not find gem 'mysql2 (>= 0.4.4)' in any of the gem sources listed in your Gemfile.
Run `bundle install` to install missing gems.

DockerfileのAddはGemfile&Gemfile.lockのキャッシュから更新があったときのみ検知してbundle installを実行します。そのため、このタイミングでdocker-compose buildをします。

$ docker-compose build 

イメージのビルドが終わったら、次に進みます。
rails newで作られた、database.ymlの一部を変更します。

database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password #変更　docker-compose.ymlに合わせる
  host: db　  #変更 docker-compose.ymlに合わせる

続いて、Vueのインストールや、migrationなどをします。

ターミナル

$ docker-compose run --rm app bundle exec rails webpacker:install
$ docker-compose run --rm app bundle exec rails webpacker:install:vue
$ docker-compose run --rm app bundle exec rails db:create db:migrate
$ docker-compose run --rm app bundle exec rails g controller top top

思いつきのタイミングではありますが、ここで邪魔なmarginとpaddingはリセットしておきましょう。

app/assets/stylesheets/application.css

/*省略*/

* {
  margin: 0;
  padding: 0;
}

続いて、top.html.erbに以下を追記します。この記述のおかげで、top.html.erbと、app.vueが紐付きます。

app/views/top/top.html.erb

<%= javascript_pack_tag 'hello_vue' %> <!-- 追記 -->

どのgetのリクエストが来ても、top#topにつながるようにしておきます。こうすることで、routingをVue Routerで行うことができるようになります。

routes.rb

Rails.application.routes.draw do
  get 'top/top'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root to: 'top#top'

  namespace :api do
   #API用のルーティングはここに書く
  end

  get '*path', to: 'top#top', format: false   #getのリクエストをまとめる
end

さて、ここで動作確認をしてみましょう。以下のコマンドを入力して、localhostの3000番ポートにアクセスしてください。

$ docker-compose up

以下の画面が表示されればバッチリです。

Vueの開発環境を整理

さて、ここからVueの環境を整えていきます。axios、vue-router、vuexなどのインストールをし、その後、app/javascriptの直下にviewsフォルダ、componentsフォルダ、storeフォルダ、routesフォルダを作成します。

ターミナル

[rails_vue_mysql_on_docker] $ docker-compose run --rm app yarn install
[rails_vue_mysql_on_docker] $ docker-compose run --rm app yarn add axios vue-axios vue-router vue-template-compiler vuex vue-eslint-parser
[rails_vue_mysql_on_docker] $ cd app/javascript
[javascript] $ mkdir views components store routes
[javascript] $ ls 　　　// views components store routes が作成されたことを確認する。
 app.vue   channels  components   packs   routes    store     views

続いて、以下のファイルを指定のフォルダ内に作成します。（Home.vueと、About.vue、Header.vueは動作確認のために用意するので、環境構築後の開発で不要と判断したら消して頂いて大丈夫です。

viewsフォルダ内 →　Home.vue　と About.vue
componentsフォルダ内　→ Header.vue
storeフォルダ内　→ store.js　　//Vuexの設定ファイル
routesフォルダ内　→ router.js  //vue-routerの設定ファイル

すなわち、以下のコマンドを打ちます。

ターミナル

[javascript] $ cd views
[views] $ touch Home.vue About.vue
[views] $ cd ../components
[components] $ touch Header.vue 
[components] $ cd ../store
[store] $ touch store.js
[store] $ cd ../routes
[routes] $ touch router.js

必要なファイルが揃いました！続いて、ファイルを編集していきます。
まずはapp.vueを以下のように編集します。ルートとなるvueファイルです。このファイルはデフォルトで作られています。

app.vue

<template>
  <div id="app">
    <Header></Header>
    <router-view></router-view>
  </div>
</template>

<script>
  import Header from "./components/Header.vue";
  export default {
    components: {
      Header,
    },
    data: function() {
      return {
        message: "Hello Vue!",
      };
    },
  };
</script>

<style scoped>

</style>

viewsフォルダ内のHome.vueとAbout.vueを編集しましょう。

Home.vue

<template>
  <section id="home">
    <h1>{{ title }}</h1>
  </section>
</template>

<script>
export default {
  data() {
    return {
      title: "Homeです"
    };
  }
};
</script>

<style lang="scss" scoped>

</style>

About.vue

<template>
  <section id="about">
    <h1>{{ title }}</h1>
  </section>
</template>

<script>
export default {
  data() {
    return {
      title: "Aboutです"
    };
  }
};
</script>

<style lang="scss" scoped>

</style>

componentsフォルダ内のHeader.vueを編集しましょう。

Header.vue

<template>
  <header>
    <span>{{ message }}</span>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </header>
</template>
<script>
  export default {
    data() {
      return {
        message: "Headerです",
      };
    },
  };
</script>
<style lang="scss" scoped>
  $background-color: skyblue;
  header {
    width: 100%;
    height: 80px;
    background-color: $background-color;
    display: flex;
    flex-direction: row;
    align-items: center;
    a {
      display: inline-block;
      margin: 0 20px;
    }
  }
</style>

Vuexの設定をしておきます。

store/store.js

 import Vue from "vue";
 import Vuex from "vuex";

 Vue.use(Vuex);

 const store = new Vuex.Store({
   state: {},
   getters: {},
   mutations: {},
   actions: {},
 });

 export default store;

Vue Routerの設定をしておきます。

router/router.js

 import Vue from "vue";
 import Router from "vue-router";
 Vue.use(Router);
 import Home from "../views/Home.vue";
 import About from "../views/About.vue";

 const router = new Router({
   mode: "history",
   routes: [
     //ルーティングの設定
     {
       path: "/",
       component: Home,
     },
     {
       path: "/about",
       component: About,
     },
   ],
 });
 export default router;

最後にhello_vue.jsを編集します。hello_vue.jsはVueCLIでいう、src/main.jsです。

packs/hello_vue.js

 import Vue from "vue";
 import Vuex from "vuex"
 import VueRouter from "vue-router";
 import store from "../store/store.js";
 import router from "../routes/router.js";
 import App from "../app.vue";
 import axios from "axios"; 
 import VueAxios from "vue-axios"; 
 Vue.use(Vuex);
 Vue.use(VueRouter);
 Vue.use(VueAxios, axios);

 document.addEventListener("DOMContentLoaded", () => {
   const app = new Vue({
     store,
     router,
     render: (h) => h(App),
   }).$mount();
   document.body.appendChild(app.$el);
 });

完成！！

以上でRails on Dockerプロジェクト内でVue.js、及びVuex、Vue Router、Axiosを利用するための設定が完了しました！
サーバーを起動してみましょう。docker-compose.ymlで、rails sとbin/webpack-dev-serverが同時に起動するように、設定してあるので、以下のコマンドだけで、十分です。foremanを使用しません。

[rails_vue_mysql_on_docker]$ docker-compose up 

以下の画面が表示されたらOKです！

お疲れ様でした！

はじめに

今回は、Docker上でRuby on Rails6の環境構築をし、さらにwebpackerを用いてVue.jsの環境構築をする方法を紹介したいと思います。私が以前書いた、Ruby on Rails6内で、Vue.js + Vuex + Vue Router + axios環境を整えるをDocker上で行ったものになります。
使用PCはMacを想定しています。Windowsの方は、一部コマンドを読み替えてください。

今回の例では、親フォルダ名をrails_vue_mysql_on_dockerとしています。また、DBはMySQLを採用しています。

Ruby on RailsとVue.jsの環境構築

ターミナルを開きましょう。rails_vue_mysql_on_dockerフォルダを作り、その中にDockerfile、docker-compose.yml、Gemfile、Gemfile.lockを作成していきます。

ターミナル

$ mkdir rails_vue_mysql_on_docker
$ cd rails_vue_mysql_on_docker
$ touch Dockerfile docker-compose.yml Gemfile Gemfile.lock

Dockerfileに以下をコピペします。

Dockerfile

FROM ruby:2.6.5
ENV LANG C.UTF-8
ENV TZ=Asia/Tokyo

RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
    && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
    && apt-get update -qq \
    && apt-get install -y nodejs yarn 

ENV APP_HOME /var/src/app
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME
ADD Gemfile $APP_HOME/Gemfile
ADD Gemfile.lock $APP_HOME/Gemfile.lock

ENV BUNDLE_DISABLE_SHARED_GEMS 1
RUN bundle install

docker-compose.ymlに以下をコピペします。

docker-compose.yml

version: "3"
services:
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - "3306:3306"
    command: --default-authentication-plugin=mysql_native_password
    volumes:
      - mysql-data:/var/lib/mysql
  app: &app_base
    build:
      context: .
    volumes:
      - .:/var/src/app
    ports:
      - "3000:3000"
    links:
      - db
    working_dir: /var/src/app
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    cap_add:
      - ALL # Add all privilege
    container_name: app
    tty: true
    stdin_open: true
    privileged: true
    logging:
      driver: "json-file"
      options:
        max-size: "100k"
    dns:
      - 8.8.8.8
  webpack-dev-server:
    build: .
    command: /bin/sh -c "bin/webpack-dev-server --hot --inline"
    ports:
      - "3035:3035"
    environment:
      WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
    volumes:
      - .:/var/src/app
    tty: true
    stdin_open: true
    depends_on:
      - app
volumes:
  mysql-data:
    driver: local

Gemfileに以下をコピペします。Gemfile.lockは空ファイルのままで大丈夫です。

Gemfile

source 'https://rubygems.org'

gem 'rails', '~> 6.0.3'

準備が整ったので、rails new します。

$ docker-compose run --rm app bundle exec rails new . --force --database=mysql --skip-bundle

処理が進んでいき、以下のメッセージが表示された頃には、Gemfileが更新されています。

Could not find gem 'mysql2 (>= 0.4.4)' in any of the gem sources listed in your Gemfile.
Run `bundle install` to install missing gems.

DockerfileのAddはGemfile&Gemfile.lockのキャッシュから更新があったときのみ検知してbundle installを実行します。そのため、このタイミングでdocker-compose buildをします。

$ docker-compose build 

イメージのビルドが終わったら、次に進みます。
rails newで作られた、database.ymlの一部を変更します。

database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password #変更　docker-compose.ymlに合わせる
  host: db　  #変更 docker-compose.ymlに合わせる

続いて、Vueのインストールや、migrationなどをします。

ターミナル

$ docker-compose run --rm app bundle exec rails webpacker:install
$ docker-compose run --rm app bundle exec rails webpacker:install:vue
$ docker-compose run --rm app bundle exec rails db:create db:migrate
$ docker-compose run --rm app bundle exec rails g controller top top

思いつきのタイミングではありますが、ここで邪魔なmarginとpaddingはリセットしておきましょう。

app/assets/stylesheets/application.css

/*省略*/

* {
  margin: 0;
  padding: 0;
}

続いて、top.html.erbに以下を追記します。この記述のおかげで、top.html.erbと、app.vueが紐付きます。

app/views/top/top.html.erb

<%= javascript_pack_tag 'hello_vue' %> <!-- 追記 -->

どのgetのリクエストが来ても、top#topにつながるようにしておきます。こうすることで、routingをVue Routerで行うことができるようになります。

routes.rb

Rails.application.routes.draw do
  get 'top/top'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root to: 'top#top'

  namespace :api do
   #API用のルーティングはここに書く
  end

  get '*path', to: 'top#top', format: false   #getのリクエストをまとめる
end

さて、ここで動作確認をしてみましょう。以下のコマンドを入力して、localhostの3000番ポートにアクセスしてください。
※初回のコンパイルは平常時より若干時間がかかることがあります

$ docker-compose up

以下の画面が表示されればバッチリです。

次のステップに行く前に、Control + C もしくは$ docker-compose stopコマンドを使って、コンテナを停止させておきましょう。
コマンドについて詳しくはこちらをご覧ください。

Vueの開発環境を整理

さて、ここからVueの環境を整えていきます。axios、vue-router、vuexなどのインストールをし、その後、app/javascriptの直下にviewsフォルダ、componentsフォルダ、storeフォルダ、routesフォルダを作成します。

ターミナル

[rails_vue_mysql_on_docker] $ docker-compose run --rm app yarn install
[rails_vue_mysql_on_docker] $ docker-compose run --rm app yarn add axios vue-axios vue-router vue-template-compiler vuex vue-eslint-parser
[rails_vue_mysql_on_docker] $ cd app/javascript
[javascript] $ mkdir views components store routes
[javascript] $ ls 　　　// views components store routes が作成されたことを確認する。
 app.vue   channels  components   packs   routes    store     views

続いて、以下のファイルを指定のフォルダ内に作成します。（Home.vueと、About.vue、Header.vueは動作確認のために用意するので、環境構築後の開発で不要と判断したら消して頂いて大丈夫です。

viewsフォルダ内 →　Home.vue　と About.vue
componentsフォルダ内　→ Header.vue
storeフォルダ内　→ store.js　　//Vuexの設定ファイル
routesフォルダ内　→ router.js  //vue-routerの設定ファイル

すなわち、以下のコマンドを打ちます。

ターミナル

[javascript] $ cd views
[views] $ touch Home.vue About.vue
[views] $ cd ../components
[components] $ touch Header.vue 
[components] $ cd ../store
[store] $ touch store.js
[store] $ cd ../routes
[routes] $ touch router.js

必要なファイルが揃いました！続いて、ファイルを編集していきます。
まずはapp.vueを以下のように編集します。ルートとなるvueファイルです。このファイルはデフォルトで作られています。

app.vue

<template>
  <div id="app">
    <Header></Header>
    <router-view></router-view>
  </div>
</template>

<script>
  import Header from "./components/Header.vue";
  export default {
    components: {
      Header,
    },
    data: function() {
      return {
        message: "Hello Vue!",
      };
    },
  };
</script>

<style scoped>

</style>

viewsフォルダ内のHome.vueとAbout.vueを編集しましょう。

Home.vue

<template>
  <section id="home">
    <h1>{{ title }}</h1>
  </section>
</template>

<script>
export default {
  data() {
    return {
      title: "Homeです"
    };
  }
};
</script>

<style lang="scss" scoped>

</style>

About.vue

<template>
  <section id="about">
    <h1>{{ title }}</h1>
  </section>
</template>

<script>
export default {
  data() {
    return {
      title: "Aboutです"
    };
  }
};
</script>

<style lang="scss" scoped>

</style>

componentsフォルダ内のHeader.vueを編集しましょう。

Header.vue

<template>
  <header>
    <span>{{ message }}</span>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </header>
</template>
<script>
  export default {
    data() {
      return {
        message: "Headerです",
      };
    },
  };
</script>
<style lang="scss" scoped>
  $background-color: skyblue;
  header {
    width: 100%;
    height: 80px;
    background-color: $background-color;
    display: flex;
    flex-direction: row;
    align-items: center;
    a {
      display: inline-block;
      margin: 0 20px;
    }
  }
</style>

Vuexの設定をしておきます。

store/store.js

 import Vue from "vue";
 import Vuex from "vuex";

 Vue.use(Vuex);

 const store = new Vuex.Store({
   state: {},
   getters: {},
   mutations: {},
   actions: {},
 });

 export default store;

Vue Routerの設定をしておきます。

router/router.js

 import Vue from "vue";
 import Router from "vue-router";
 Vue.use(Router);
 import Home from "../views/Home.vue";
 import About from "../views/About.vue";

 const router = new Router({
   mode: "history",
   routes: [
     //ルーティングの設定
     {
       path: "/",
       component: Home,
     },
     {
       path: "/about",
       component: About,
     },
   ],
 });
 export default router;

最後にhello_vue.jsを編集します。hello_vue.jsはVueCLIでいう、src/main.jsです。

packs/hello_vue.js

 import Vue from "vue";
 import Vuex from "vuex"
 import VueRouter from "vue-router";
 import store from "../store/store.js";
 import router from "../routes/router.js";
 import App from "../app.vue";
 import axios from "axios"; 
 import VueAxios from "vue-axios"; 
 Vue.use(Vuex);
 Vue.use(VueRouter);
 Vue.use(VueAxios, axios);

 document.addEventListener("DOMContentLoaded", () => {
   const app = new Vue({
     store,
     router,
     render: (h) => h(App),
   }).$mount();
   document.body.appendChild(app.$el);
 });

完成！！

以上でRails on Dockerプロジェクト内でVue.js、及びVuex、Vue Router、Axiosを利用するための設定が完了しました！
サーバーを起動してみましょう。docker-compose.ymlで、rails sとbin/webpack-dev-serverが同時に起動するように、設定してあるので、以下のコマンドだけで、十分です。foremanを使用しません。

[rails_vue_mysql_on_docker]$ docker-compose up 

以下の画面が表示されたらOKです！

お疲れ様でした！

Seleniumを使ってエラーの奈落に落ちて解決できたので備忘録

エラーが出ていた時のdocker-compose.yml

version: '3'
services:
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - '3306:3306'
    command: --default-authentication-plugin=mysql_native_password
    volumes:
      - mysql-data:/var/lib/mysql
  web:
    build: .
    command: bundle exec puma -C config/puma.rb
    environment:
      RAILS_ENV: development
    volumes:
      - .:/FANTRA
      - bundle:/usr/local/bundle
      - /app/vendor
      - /app/log
      - /app/.git
    ports:
      - "3000:3000"
    depends_on:
      - db
    tty: true
    stdin_open: true
  chrome:
    image: selenium/standalone-chrome
    ports:
      - "4444:4444"

volumes:
  mysql-data:
    driver: local
  bundle:
    driver: local

とあるテストで訳のわからんレベル100ぐらいのエラー出てきよった

Failure/Error: visit tourist_tourist_tours_path(tourist.id)

            Selenium::WebDriver::Error::UnknownError:
              unknown error: session deleted because of page crash
              from tab crashed
                (Session info: chrome=83.0.4103.61)

同じエラーを抱えている運命の人を発見（参考URL）

https://patorash.hatenablog.com/entry/2020/03/02/143046

どうやらページクラッシュエラーが出るのはメモリが不足していることが原因だそう。

もがき苦しんで解決方法を教えてくれた神様（参考URL）

https://github.com/elgalu/docker-selenium/issues/20#issuecomment-414495631

shm_size: 2gをchromeに書き加えてやったらメモリがデカくなってくれるみたい。

  chrome:
    image: selenium/standalone-chrome
    ports:
      - "4444:4444"
    shm_size: "2g"      ##追記

まとめ

クラッシュするのは共有メモリが不足しちゃってるから起こっちゃう。
しかし、まだ理解できていない。エラー内容がざっくりしていてクラッシュしたらメモリを疑ってみる。

Docker Desktop WSL 2 backend | Docker Documentationをよく読んでその通りに進めていけばインストールも実行もできます。
使い勝手はDocker Desktop for macOSと大差ないです。

WSL1とWSL2の違い

先日のWindows 10 May 2020 UpdateでWindows Subsystem for Linux 2 (WSL2)という機能が正式リリースされました。

WSL1ではLinuxの命令をWindowsの命令に変換し、Windowsが処理をしていた様子。そのためLinuxカーネルをWindowsは持っておらず、DockerのようなLinuxカーネルを活用するソフトウェアを動作させることができていませんでした。

しかし、WSL2ではHyper-V由来のサブシステム用仮想環境がWindows 10 Home/Proの両方に備えられ、この仮想環境内のLinuxカーネルを使い、処理を行うようになりました。

そのため、WSL2は「完全なLinuxがWindows上で動作する」と待望の機能となっていました...！

Source : 完全なLinuxがWindows 10上で稼働する？　「WSL 2」とは：Windows 10 The Latest - ＠IT

Windows 10のバージョンを確認

「Windowsの設定アプリ」を開き、「更新とセキュリティ」→「Windows Update」を開きます。
そして画面右にある「OS ビルド情報」をクリックし、「Windows の仕様」のセクションまでスクロールします。

そこの「バージョン」が2004以上であればWSL2を利用することができます。
要件を満たしていない場合にはWindows 10 May 2020 Update を入手するを参照してWindowsを更新しましょう。

Windows Subsystem for Linuxと仮想マシンプラットフォームのインストール

管理者権限でPowerShellを起動して、以下の2つのコマンドを実行。

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

これらのコマンドを実行したらPCを再起動しましょう。
そうすると、更新プログラムを適用するような感じになり、WSL2と仮想マシンプラットフォームが利用可能になります。

Linuxカーネルのバージョンアップ

WSL 2 Linux カーネルの更新に従ってLinuxカーネルを更新します。
このページからインストーラをダウンロードして実行すればカーネルが更新されます。

WSLのデフォルトバージョンを2に設定

そして、デフォルトのWSLバージョンを2に変更します。
powershell
wsl --set-default-version 2


これでWSL2のセットアップが完了。

Docker Desktop for Windowsのインストール

WSL2が正式リリースされたこともあって、Docker Desktop for WindowsのStable版もすでにWSL2に対応しています。

Docker Desktop for Windows - Docker Hub からインストーラをダウンロード！

インストーラを実行し、ウィンドウがこのような感じになったら「Enable WSL 2 Windows Features」にチェックが入っていることを確認して、「Ok」を押下。
（以下のどちらのチェックボックスにもデフォルトでチェックが入っています）

インストールが完了すると、一度Windowsからサインアウトすることを要求されるので、要求に従いサインアウトしてあげましょう。

Docker Desktop for Windowsの設定

サインアウト後、再度サインインするとDocker Desktop for Windowsが起動しはじめる。
起動するとウィンドウが出てきてチュートリアルを開始しようとしますが、「Skip tutorial」でいいと思います。

ウィンドウの上のほうに歯車アイコンがあるのでそこをクリック。設定画面を開きましょう。

この画面の「Expose deamon on tcp://localhost:2375 without TLS」にチェックを入れよう。
これにチェックを入れることでPhpStormなどでDocker連携機能を使ったりすることができます。

Hello worldしてみる

試しにコンテナを実行してみよう。

docker run --rm hello-world

これでうまくいけば成功！

おまけ

PhpStormに設定

SettingsのBuild, Execution, Deployment > Dockerを開く。
そして、+をクリックしてこんな感じになればOK。

次に、Build, Execution, Deployment -> Docker -> Toolsを開く。
Docker Compose executableのパスに.exeを追加してあげましょう。

この手順を踏む前にDocker ComposeをGUIから使ってみようとすればわかるのですが、なんかうまいこといきません。
Python project Interpreter: docker-compose CreateProcess error=193 – IDEs Support (IntelliJ Platform) | JetBrains にこの解決法が記載されていました。

PhpStormではPHPのremote interpreter、PyCharmではremote interpreterを指定できます。主にPyCharmでは指定してあげるとコンテナ内のpipライブラリの補完をしてくれるようになるので設定すると作業効率が爆上がりが期待できます。

Run/Debug Configurationsも設定してあげるとワンクリックでコンテナの起動ができます。

---

Docker Desktop for Windows 10をSurfaceシリーズなどのタッチパネル搭載端末にインストールして利用すると、jsのタッチ入力イベントのデバッグなどを開発機単体でできて非常に便利でした。
けど、かなりの高スペックを要求される印象です。

こちらも合わせて →　https://qiita.com/Denpa_Ghost/items/13ee35866c7d3985f4e9

結論、cronをinstallしたら解決した

dockerにsarコマンドをinstallして、計測間隔を設定、"vi /etc/default/sysstat"でfalseをtrueに変更しても動かなかったが、cronがそもそもinstallされていなかったことが原因でした。

設定フロー

apt-get のupdate

apt-get update

cronのinstall

apt-get -y install cron

sysstat(sar)のinstall

apt-get install sysstat -y

計測を許可

vim /etc/default/sysstat

ENABLED="false"
　　↓
ENABLED="true"

10分間隔を1分間隔にした。

vim /etc/cron.d/sysstat

サービス起動

service cron start
/etc/init.d/sysstat start

サービス起動確認

service cron status
service sysstat status

計測されていること確認

Dockerとは

Dockerとは、コンテナ技術を使い、アプリケーション開発・実行をするためのプラットフォームです。詳細はWhat is Docker?をお読みください。

Dockerプラットフォーム

• Docker Engine
• Docker Hub
• Docker Registry
• Docker Machine
• Docker Swarm
• Docker Compose
• Kinematic

コンテナとは

コンテナとは、ホストOS上にアプリケーションの起動に必要なアプリケーション本体、必要なライブラリ、設定ファイルなどをひとまとめにした「コンテナ」を作成し、「コンテナエンジン」上で動作させる技術のことです。

仮想化技術と似ていますが、仮想マシンに比べて少ないリソースでのアプリケーション実行が可能となるため、メモリやCPUリソースを余分に使うことがありません。

新しい技術なのでプログラミング初心者には学習コストが高いですが、扱えるようになればこんなに便利なものはありません。

Dockerを使うメリット／デメリットは以下の通り。

メリット	デメリット
処理が軽量	複数のホストでのコンテナ運用が煩雑になる
環境構築の手間が省ける	カーネルを他のコンテナと共有するため、個別に変更できない
DevOpsと相性が良い	コンテナ環境でベースとなるOSと異なるOSのシステムを動かすことはできない

※DevOps：開発チームと運用チームが協力しあって開発・運用を進めていく手法

Dockerの基本コマンド一覧

イメージ作成

カレント・ディレクトリ内のDockerfileをビルドしてイメージを作成する。

$ docker build ./

ビルドを最初からやり直す。

$ docker build --no-cache .

コンテナ作成

イメージからコンテナを作成する

$ docker create イメージ名

イメージからコンテナを起動・接続する

$ docker run -it イメージ名 bash

確認

イメージを確認する。

$ docker images

起動中コンテナの一覧を表示する。

$ docker ps

起動中コンテナのIDのみを表示する。

$ docker ps -q

ポートフォワードの関係性を確認する。

$ docker port コンテナ名

操作

ホストの/var/wwwをコンテナ内の/var/htmlからアクセスできるように共有する。

$ docker run -it -v /var/www:/var/html イメージ名 bash

ホスト8080番portへの通信をコンテナ80番portへ転送する。

$ docker run -it -p 8080:80 イメージ名 bash

停止

コンテナを停止する。

$ docker stop コンテナID

起動中コンテナをすべて停止する。

$ docker stop $(docker ps -q)

コンテナを再起動する

$ docker restart コンテナ名

削除

コンテナを削除する。

$ docker rm コンテナ名

イメージを削除する。

$ docker rmi イメージ名（またはイメージID）

DockerHub

イメージをpullする。

$ docker pull ユーザー名/リポジトリ名

イメージをpushする。

$ docker push ユーザー名/リポジトリ名

開発用コンテナを立ち上げようとしたら
他プロジェクトで使っていたのコンテナにportを取られて立ち上がらないなんて経験ありますよね。

ただいちいちdocker-compose.yamlがあるところまで移動して停止していくのですか？
面倒くさいですよね

docker ps -q | xargs docker stop

よし！

アップデート

sudo apt update
sudo apt-get update
sudo apt upgrade
sudo apt autoremove

インストール済みアプリの確認

apt list | grep open-vm-tools
apt list | grep git
apt list | grep docker

dockerインストール

sudo apt install docker.io
sudo usermod -aG docker $USER
sudo systemctl start docker
sudo systemctl enable docker

docker-composeインストール

curlインストール

sudo apt install curl

以下で最新バージョンを確認
https://github.com/docker/compose/releases

1.26.0を最新バージョンに変更して以下を実行する

sudo curl -L https://github.com/docker/compose/releases/download/1.26.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

Dockerグループへユーザー追加

dockerという名のグループを作ってユーザをそこに所属させればOKです。

sudo groupadd docker
getent group docker
sudo gpasswd -a $USER docker
sudo systemctl restart docker

再起動すると反映される。

インストール確認

docker -v
docker-compose -v

はじめに

これは『React環境構築の際にイチイチ調べ直すのがめんどくさい』と、自分向けにメモった記事です。
オレオレ記事ですが、ラクラクなので、是非参考にして頂ければと思います。

1. GitHubリポジトリを用意

リポジトリを作成してクローンしてきましょう。

$ git clone git@github.com:ユーザ名/リポジトリ.git

2. .gitignoreを先に作成

gitignoreファイルは一つにまとめたいので、先に作成して、自動で作られるものは削除しています。
アプリのルートディレクトリに以下の.gitignoreファイルを作成。

# dependencies
node_modules/
.pnp/
.pnp.js

# testing
coverage/

# production
build/

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

3. dockerfileの作成

アプリのルートディレクトリに以下のdockerfileファイルを作成。

dockerfile

FROM node:12.17.0

RUN mkdir /build
WORKDIR /build

4. dockerfileのbuildとrun!

dockerのイメージ作成とcreate-react-appを行っていきます。

$ docker build -t node:build .
$ docker run --rm -v "$PWD":/build node:build npx create-react-app my-app(←アプリ名はご自由に。)

まず1行目ではdockerのイメージ作成とタグ付け、カレントディレクトリを指定しています。
2行目ではVolumeの設定でホスト側のディレクトリからコンテナ側にマウントを取ります。(これによって変更が有効になる)
次にイメージとタグを指定して、最後にnpx create-react-appのコマンドを実行しています。

これでmy-app下に色々生成されていたら成功です！

5. docker-compose.ymlとMakefileを作成

またアプリのルートディレクトリ下でdocker-compose.ymlとMakefileを以下のように作成します

docker-compose.yml

version: "3.3"
services:
  react:
    build: ./
    working_dir: /code
    volumes:
      - ./my-app:/code
    ports:
      - 3000:3000
    environment: 
      - NODE_ENV=production
    container_name: container_name # ←コンテナ名はご自由に。

library := ""

start:
    docker-compose run --rm react yarn start

add:
    docker-compose run --rm react yarn add $(library)

6. ローカルでサーバを立ち上げる！

以下のようにmake startを実行してください

$ make start 

make startはdocker-compose run --rm react yarn startを実行していて、記述をMakefileにて短縮しています。
ローカルでサーバーが立ち上がって、Reactマークがくるくる回っていたら成功です！！

+α 新しくパッケージをインストールしたい時

本当はdocker-compose run --rm react yarn startを実行しています。

# 使用例
$ make add library=redux

さいごに

まだまだ初心者なので、『もっとこうやって作成したら良いよ！』などなどアドバイスをご教授頂けたら、超喜びますm(_ _)m

※ご教授して頂けた方、とても良い感じになりました！ありがとうございます！