Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

vagrantその0029 Windows10 Home + Vagrant + centos-7.3.boxで作った環境にdockerをインストールする

参考にさせて頂いたページ

Vagrantのインストールについて

centos7にdockerをインストールする手順について

railsの環境構築について

今日の環境

はじめに

WSLでdocker試したけど上手くいかなかったので、vagrantにdockerをインストールしてrailsの環境構築までしてみました。

VirtualBoxVagrantをインストール

Vagrant久しぶりなので、新しいバージョンをインストールしなおしました。

以下のページを参考にさせていただきました。

Vagrant+Virtualboxを使いWindows10上にCentOS7.3+php7+MySQL5.7の環境を構築する - Qiita

適当に vagrant up して、 vagrant ssh するところまでやりました。

あとはVagrantに関してやったのはVagrantfileの以下行をコメントインしたぐらいです。

config.vm.network "private_network", ip: "192.168.33.10"

コンテナ内と同期するディレクトリを作成する

$ su
  パスワード入力(vagrant)
# cd /var/
# mkdir www
# chown root:vagrant www
# exit
$ cd /var/www/
$ mkdir rails_projects

dockerをインストール

以下のページを参考にさせていただきました。

CentOS7にDockerをインストールする - Qiita

vagrantの環境自体にはapacheなどのアプリケーションは入れていません。

yum -y update
yum -y vim

してから、あとは参考ページにならってリポジトリの追加と、docker-ceの最新バージョンをインストールしました。

centosイメージをpullする

docker pull centos:7

Dockerfileを作成する

移動します。

cd /var/www/rails_projects

Dockerfileを作ります。

vim Dockerfile

以下の記述内容です。

FROM centos:7
MAINTAINER motomichi

# set ruby version to be installed
ENV ruby_ver="2.6.2"

RUN yum -y update
RUN yum -y install epel-release
RUN yum -y install git make autoconf curl wget
RUN yum -y install gcc-c++ glibc-headers openssl-devel readline libyaml-devel readline-devel zlib zlib-devel sqlite-devel bzip2
RUN yum clean all
RUN yum -y install vim sudo

# install ruby & bundler
RUN git clone https://github.com/sstephenson/rbenv.git /usr/local/rbenv
RUN git clone https://github.com/sstephenson/ruby-build.git /usr/local/rbenv/plugins/ruby-build

RUN echo 'export RBENV_ROOT="/usr/local/rbenv"' >> /etc/profile.d/rbenv.sh
RUN echo 'export PATH="${RBENV_ROOT}/bin:${PATH}"' >> /etc/profile.d/rbenv.sh
RUN echo 'eval "$(rbenv init --no-rehash -)"' >> /etc/profile.d/rbenv.sh

RUN source /etc/profile.d/rbenv.sh; rbenv install ${ruby_ver}; rbenv global ${ruby_ver}
RUN source /etc/profile.d/rbenv.sh; gem update --system; gem install bundler; gem install --no-ri --no-rdoc rails;

# make workdir for rails projects
RUN mkdir -p /work

上記したDockerfileはRUN source /etc/profile.d/rbenv.sh; gem update --system; gem install rails -v '5.1.2';の方が良いかもしれない。

Dockerfileをもとにrailsがインストールされたdockerイメージを作成する

docker buildします。 motomichi/railsの部分は任意のタグ名です。

docker build -t motomichi/rails ./

imageが作成されたか確認してみます。

docker images

以下のように表示されて、イメージが追加されたのがわかります。

REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
motomichi/rails     latest              281f5fc96ae7        41 seconds ago      1.09GB
centos              7                   5182e96772bf        4 weeks ago         200MB

コンテナを作成して起動する

今のディレクトリを一応確認しておきます。

pwd

以下のように表示されました。

/var/www/rails-projects

さきほど作成したイメージからコンテナを作成して起動します。

docker run -i -d -p 8080:3000 -v "${PWD}:/work" --name 'rails' motomichi/rails

コンテナ一覧を確認します。

docker ps -a

以下のように表示されました。

CONTAINER ID         IMAGE           COMMAND        CREATED          STATUS              PORTS               NAMES
16e3a93c10d4    motomichi/rails   "/bin/bash"      14 seconds ago    Up 13 seconds     0.0.0.0:8080->3000/tcp   rails

新しくRails projectを作成する場合

コンテナに入ります。

$ docker exec -it rails /bin/bash

コンテナ内でrails newします。

# cd /work
# rails new project_1

gem 'mini_racer', platforms: :rubyの下あたりに gem 'therubyracer', platforms: :ruby をGemfileに追記します。
ここはrailsのバージョンによって微妙に違います。

bundle installします。

# bundle install

railsします。

# rails s

コンテナを作成するときに、8080 => 3000 にしているので、
http://192.168.33.10:8080/ にアクセスするとrailsのスタートページが表示されるはず。

既にrails projectがある場合

何かGemfileとかあると思いますのでrails newせずにbundle installすると思います。

Windows 10 Homeでdocker入門 Hello Worldの次の段階をやってみる | Windows 10 Home + WSL + Ubuntu 16.04 でdocker その0002

参考にさせて頂いたページ

今日の環境

  • Windows10 Home
  • WSL + Ubuntu 16.04

はじめに

2018年09月08日現在で、WSLではコンテナ内に入れなくて解決できないので諦めてvagrantのcentos7.3にdocker-ceをインストール試しています。

前提

以下の記事でWindows 10 Home + WSL + Ubuntu 16.04 でdockerのHello Worldまでやってみました。

ローカルにダウンロード済みのdocker image一覧を確認する

以下のコマンドで確認できます。

$ docker images

以下のように表示されました。

REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
hello-world         latest              2cb0d9787c4d        8 weeks ago         1.85 kB

コンテナ一覧を確認する(停止中のコンテナも含めて確認)

docker ps -a

コンテナがあれば、以下のような感じで一覧が表示されます。

CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS                         PORTS               NAMES
01b4a46364c9        hello-world         "/hello"            41 minutes ago      Exited (0) 41 minutes ago                          kickass_austin
5304de8d9ebb        hello-world         "/hello"            About an hour ago   Exited (0) About an hour ago                       romantic_pasteur
0b51cc48a7a8        hello-world         "/hello"            About an hour ago   Exited (0) About an hour ago                       elastic_dijkstra

Dockerコンテナを削除する

以下のコマンドで削除できます。

docker rm <コンテナ名>

さきほど一覧を表示したうちの、NAMESがコンテナ名ですのでこの例では以下の通りです。

docker rm kickass_austin

もう一度一覧を確認すると削除されているはずです。

hello-worldのイメージを元に作成されたコンテナがあれば全て削除していきます。

docker imageを削除する

以下のコマンドで削除できます。
ただし、停止中のコンテナなどで使用されているイメージは「強制削除」を指定しないと削除できません。

# docker rmi <Dockerイメージ名> (今回でいえば「hello-world」)
または
# docker rmi <IMAGE ID> (今回でいえば「f2a91732366c」)

hello-worldのイメージはもういらないので削除します。

さきほど一覧を表示した、hello-worldを削除します。
今回の例では以下の通りです。

docker rmi hello-world

このとき停止中のコンテナでhello-worldイメージが使用されている場合は削除できず、以下のようなエラーが表示されます。

Error response from daemon: conflict: unable to remove repository reference "hello-world" (must force) - container 0b51cc48a7a8 is using its referenced image 2cb0d9787c4d

または

Error response from daemon: conflict: unable to delete 2cb0d9787c4d (must be forced) - image is being used by stopped container 5304de8d9ebb

Nginxイメージを使ってコンテナを起動し停止までやる

イメージをダウンロード

nginxのDockerイメージをダウンロードします。
ダウンロードが終わったらenterを押す必要があるかもしれません。

docker pull nginx

コンテナの作成と起動

ダウンロードしたnginxのイメージで、コンテナを作成し起動します。

docker run -d --name nginx-container -p 8181:80 nginx

以下のURLにブラウザでアクセスしてみます。

http://localhost:8181/

以下のようなnginxのページが確認できたら上手く動いています。

f:id:motomichi_works:20180908013520p:plain

コンテナの停止

まず以下のコマンドでコンテナの一覧を表示します。

docker ps -a

以下のようにコンテナの一覧が表示されました。Upの状態であることがわかります。

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                  NAMES
1d2dcda1f2e0        nginx               "nginx -g 'daemon ..."   9 minutes ago       Up 9 minutes        0.0.0.0:8181->80/tcp   nginx-container

コンテナ名を指定して停止します。

docker stop nginx-container

dockerの基本的なコマンドは別途検索するとよさそうです。

コンテナを動かしたり、停止したり、コンテナやイメージが削除できるようになりました。

参考にさせて頂いたさくらのナレッジ第三回などを引き続きやってみるとより実践的な使い方を一通り経験できそうです。

今回はここまで。

Windows 10 Homeでdocker入門 Hello Worldまでやってみる | Windows 10 Home + WSL + Ubuntu 16.04 でdocker その0001

参考にさせて頂いたページ

今日の環境

  • Windows10 Home
  • WSL + Ubuntu 16.04

はじめに

2018年09月08日現在で、WSLではコンテナ内に入れなくて解決できないので諦めてvagrantのcentos7.3にdocker-ceをインストール試しています。

ポイント

  • Windows10 Homeでもdockerが使えるようになりました。
  • 2018年09月07日現在ではUbuntu 16.04をインストールすると良いようです。
  • 2018年09月07日現在ではUbuntu 16.04を管理者として実行する必要があります。
  • 2018年09月07日現在ではこの記事の通りでしたが、なるべく新しい情報を探した方が良いです。

WSLの有効化とUbuntu 16.04のインストール

以下の記事を書きました。

今回は Ubuntuのバージョンは16.04をインストールすることに注意してください。

Ubuntu 16.04を管理者として実行する

Ubuntu 16.04を右クリックして、管理者として実行します。

f:id:motomichi_works:20180908003605p:plain

dockerをインストールして起動する

参考にさせて頂いているページの「Dockerのセットアップ」の項目そのままですが、以下のコマンドを実行しました。

$ sudo apt update
$ sudo apt upgrade -y
$ sudo apt install docker.io
$ sudo cgroupfs-mount
$ sudo usermod -aG docker $USER
$ sudo service docker start

一度Ubuntuを終了する

一度終了します。 これ重要みたいです。

$ exit

Ubuntu 16.04をもう一度管理者として実行する

Ubuntu 16.04を右クリックして、もう一度管理者として実行します。

dockerを起動する

以下のコマンドでdockerを起動します。

$ sudo cgroupfs-mount && sudo service docker start

dockerの状態を確認する

ここは sudo いりません。

以下のコマンドでdockerが起動状態か確認します。

$ service docker status

以下のように表示されたら上手くいっています。

* Docker is running

dockerでHello World

dockerが動くか確認します。

dockerのイメージをpullしてhello worldをやってみます。

ここも sudo いりません。

docker run hello-world

以下のように表示されたらうまく動いています。

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

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

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

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

For more examples and ideas, visit:
 https://docs.docker.com/engine/userguide/

dockerを使ってみる

次の記事でdockerの基本操作について書きました。

Windows 10 Homeでdocker入門 Hello Worldの次の段階をやってみる | Windows 10 Home + WSL + Ubuntu 16.04 でdocker その0002 - Motomichi Works Blog

WSL(Windows Subsystem for Linux)入門 その0001 導入 Getting Started

参考にさせて頂いたページ

今日の環境

  • Windows 10 Home (バージョン1803)

Windows 10 のバージョンについて

WSL(Windows Subsystem for Linux)を使うにはWindows10のバージョン「1709」以降が必要なようです。

このブログを書いている今日2018年09月07日の段階でそんなに古いバージョン使っている人もいないと思いますが。

WSL(Windows Subsystem for Linux)を有効化する

WSL(Windows Subsystem for Linux) は以降WSLと記述します。

デフォルト状態ではWSLは無効になっているので有効化します。

・スタートボタンをクリック ・歯車アイコンをクリック ・「アプリ」をクリック ・「プログラムと機能」をクリック(キャプチャ赤枠) f:id:motomichi_works:20180907211147p:plain

・「Windowsの機能の有効化または無効化」をクリック(キャプチャ赤枠) f:id:motomichi_works:20180907211103p:plain

・「Windows Subsystem for Linux」をチェックして「OK」をクリックするとインストールが開始されます。 f:id:motomichi_works:20180907211159p:plain

・インストールが終わったら再起動をします。

WSLのパッケージをストアからインストールする

Microsoft Storeのアプリケーションを起動して、「linux」を検索します。

以下のように表示されました。

いくつかのLinuxディストリビューションがありますが、Ubuntuをインストールしてみることにします。

f:id:motomichi_works:20180907212350p:plain

以下のようにUbuntuが追加されました。

f:id:motomichi_works:20180907212924p:plain

dockerを使いたい場合など用途によっては、2018年09月07日現在は「Ubuntu 16」などで検索して、Ubuntu 16.04の方をインストールする方が良いかもしれません。

Ubuntuを起動して初期設定をする

Ubuntuをスタートメニューから起動します。

ユーザー名とパスワードを決めます。

パスワード設定が完了して、以下のように表示されました。

f:id:motomichi_works:20180907213810p:plain

Ubuntuのバージョン確認

cat /etc/lsb-release

パッケージ管理ツールを更新する

以下の記事を参考にaptを更新します。

WSLのUbuntu環境で「apt」コマンドを使ってパッケージを更新/管理する:Tech TIPS - @IT

sudo apt update
sudo apt upgrade -y

Ubuntuを終了する

exit

dockerを使いたい場合の記事

dockerを使いたい場合の記事を書きました。

以下の記事では、Ubuntu 16.04を使います。

Homebrewでmacにpostgresqlをインストールして使う

参考にさせて頂いたページ

はじめに

すぐにわからなくなってしまうのでメモします。

都度追記していきます。

インストール

$ brew install postgres

起動と停止

起動

$ pg_ctl -D /usr/local/pgsql/data -l /var/log/postgres start

こっちかも

$ brew services start postgresql

停止

$ pg_ctl -D /usr/local/pgsql/data stop

こっちかも

$ brew services stop postgresql

状態確認

$ brew services list

roleの作成、roleの削除、roleの一覧を表示

role(ユーザー)の作成

例えば example_user を作成する場合

$ createuser -P example_user

スーパーユーザーの作成

-s はスーパーユーザーを作成する為のオプション
DBにログインしてからスーパーユーザーを作成するコマンドはこの記事のもう少し下の方に書いてます。

$ createuser -s -P example_user

roleの削除

$ dropuser example_user

role(ユーザー)の一覧を表示

以下のコマンドを実行するとrole一覧が表示されます。

DBをcreateする権限があるか、などの情報がユーザーごとに表示されます。

$ psql -q -c'select * from pg_user' postgres

DBにログインしてから任意のコマンドを実行する

ログイン

以下のように、ホスト名、ユーザー名、データベース名を入力します。

$ psql -h ホスト名 -U ユーザー名 -d データベース名

例えばあらかじめexample_userを作成してある想定で、localhostのpostgresに接続したい場合は以下のような感じです。

$ psql -h localhost -U example_user -d postgres

ログアウト

以下のように入力してログアウトします。

# \q

コマンドの例

最後のセミコロンを忘れないようにしましょう。

table一覧を取得したい場合

例えばtable一覧を取得したい場合は以下のコマンドです。

SELECT relname AS table_name FROM pg_stat_user_tables;

ROLEをスーパーユーザーで追加したい場合

例えばtable一覧を取得したい場合は以下のコマンドです。

CREATE ROLE hoge WITH SUPERUSER LOGIN PASSWORD 'hogepass';

DBの作成、DBの削除、DBの一覧を表示

DBの作成

例えば example_db を作成する場合

-O オプションでdbのオーナーとなるユーザーを指定します。

$ createdb example_db -O example_user

DBの削除

$ dropdb example_db

DBの一覧を表示

$ psql -l

Tableの一覧を表示

\dt

または

SELECT relname AS table_name FROM pg_stat_user_tables;

Windowsでwebpack4とwebpack3を任意で選択して実行する

はじめに

Windowsでグローバルにwebpack4をインストールしていて、プロジェクトのディレクトリにはwebpack3をインストールしているので、これを実行したい。

今日の環境

  • Windows10
  • node v8.11.1
  • npm 5.8.0

webpackのバージョンを確認する

グローバルにインストールされたwebpackのバージョンを確認する

webpack -v

4.8.1と表示されました。

プロジェクトフォルダにインストールされたwebpackのバージョンを確認する

node_modules\.bin\webpack -v

3.12.0と表示されました。package.jsonに記載されたバージョンが表示されました。

任意のバージョンを実行する

グローバルの方を実行する

webpack

ローカルの方を実行する

node_modules\.bin\webpack

material-components-web入門 その0002 導入 Getting Started

はじめに

入門の入門ぐらいの感じで、導入してみようと思います。

公式リポジトリのREADMEからリンクされているGetting Startedを読んで、ちょっとCSSを適用してみます。

公式リポジトリ

Getting Started

プロジェクトディレクトリ作成

sample-material-components-web ディレクトリを作成してサンプルを作成していこうと思います。

mkdir sample-material-components-web

Getting Startedのとおりやってみる

以下の通り実行していきました。

material-components-web/getting-started.md at master · material-components/material-components-web · GitHub

index.htmlを確認する

ボタンをクリックすると波紋状のアニメーションが起こるようになりました。

ここまでやってsample-material-components-webディレクトリのファイル構成

2018年6月9日現在、公式のGetting Startedの通り実行していくと以下のようになりました。

  • node_modules/*
  • app.js
  • app.scss
  • index.html
  • package.json
  • package-lock.json
  • webpack.config.js

app.jsの記述内容

import {MDCRipple} from '@material/ripple';
const ripple = new MDCRipple(document.querySelector('.foo-button'));

app.scssの記述内容

@import "@material/button/mdc-button";

.foo-button {
  @include mdc-button-ink-color(teal);
  @include mdc-states(teal);
}

index.htmlの記述内容

<html>
 <head>
   <link rel="stylesheet" href="bundle.css">
   <script src="bundle.js" async></script>
 </head>
 <body>
   <button class="foo-button mdc-button">
     Button
   </button>
 </body>
</html>

package.jsonの記述内容

{
  "name": "sample-material-components-web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.6.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.11",
    "extract-loader": "^2.0.1",
    "file-loader": "^1.1.11",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.5",
    "sass-loader": "^7.0.3",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.11.2"
  },
  "dependencies": {
    "@material/button": "^0.36.0",
    "@material/ripple": "^0.36.0"
  }
}

webpack.config.jsの記述内容

const autoprefixer = require('autoprefixer');

module.exports = [{
  entry: './app.scss',
  output: {
    // This is necessary for webpack to compile
    // But we never use style-bundle.js
    filename: 'style-bundle.js',
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: 'bundle.css',
          },
        },
        { loader: 'extract-loader' },
        { loader: 'css-loader' },
        { loader: 'postcss-loader',
          options: {
             plugins: () => [autoprefixer({ grid: false })]
          }
        },
        {
          loader: 'sass-loader',
          options: {
            includePaths: ['./node_modules']
          }
        }
      ]
    }]
  },
}];

module.exports.push({
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      }
    }]
  },
});