20210110のdockerに関する記事は19件です。

DockerでMySQL環境を0 -> 1で作る

本記事でやること

DockerでMySQL環境を作る
Databaseを作る
テーブルを作る
データをいれる

環境

Docker
mysql 5.7

DockerでMySQL環境を作る

本記事で使う親フォルダを作る

$ mkdir mysql-sample

そして、 docker-compose.yml を作る

docker-compose.yml
version: "3"
services:
  mysql:
    image: mysql:5.7
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: mysql
    volumes:
      - "./mysql/db-data/:/var/lib/mysql" # データ永続化
      - "./mysql/my.cnf:/etc/mysql/conf.d/my.cnf" # 日本語をデータとして使うために必要

MySQL関連のデータをおく場所として mysql フォルダを作る.

そして、MySQLの設定ファイルはmy.cnfに書く。

msql/my.cnf
[mysqld]
character-set-server=utf8

これによりmysqlのデータとして日本語を入力することができる

mysql-sample
├── docker-compose.yml
└── mysql
    └── my.cnf

mysql clientはmysqlのイメージに含まれている。
本記事ではそれを使う。

docker-compose up -d

でコンテナを立ち上げる。
すると、mysqlが初期化され、
プロジェクトのmysqlフォルダ以下に db-data というフォルダができる

スクリーンショット 2021-01-10 22.08.55.png

Attach Shellでコンテナに入る

mysql clientを以下で起動

$ mysql -u root -p

パスワードは docker-compose.yml で設定した mysql

Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved.

...

mysql> 

これでmysqlを起動するまで完了

databaseを作る

dbを全て表示

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
4 rows in set (0.04 sec)

mysql> 

ここに新しく sample というdbを追加する

mysql> create database sample;
Query OK, 1 row affected (0.02 sec)

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sample             |
| sys                |
+--------------------+
5 rows in set (0.02 sec)

mysql> 

このdbを操作するために以下のコマンドを打つ

mysql> use sample;
Database changed

これでdb作成まで完了

テーブル作成

最初はテーブルはない。

mysql> show tables;
Empty set (0.01 sec)

mysql> 

そこで、テーブルを作るコマンドを打つが、テーブルを打つコマンドは長いので先にテキストエディタ等で書いておく

CREATE TABLE users (
id int PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL UNIQUE,
password CHAR(36) NOT NULL
);

usersというテーブルを作成する。

このクエリについての解説はざっくり以下

カラム 説明
id int(数値) userを特定するための数字。主キー。自動連番
username varchar(255) (文字列) ユーザー名
email varchar(255) メールアドレス、重複させないためにUNIQUE
password CHAR(36)
(36字以内の英文字)
パスワード。UUIDの文字列にあわせて36

上記のクエリをそのままはりつけて実行

mysql> CREATE TABLE users (
    -> id int PRIMARY KEY AUTO_INCREMENT,
    -> username VARCHAR(255) NOT NULL,
    -> email VARCHAR(255) NOT NULL UNIQUE,
    -> password CHAR(36) NOT NULL
    -> );
Query OK, 0 rows affected (0.07 sec)

mysql> show tables;
+------------------+
| Tables_in_sample |
+------------------+
| users            |
+------------------+
1 row in set (0.01 sec)

mysql> show columns from users;
+----------+--------------+------+-----+---------+----------------+
| Field    | Type         | Null | Key | Default | Extra          |
+----------+--------------+------+-----+---------+----------------+
| id       | int(11)      | NO   | PRI | NULL    | auto_increment |
| username | varchar(255) | NO   |     | NULL    |                |
| email    | varchar(255) | NO   | UNI | NULL    |                |
| password | char(36)     | NO   |     | NULL    |                |
+----------+--------------+------+-----+---------+----------------+
4 rows in set (0.02 sec)

mysql> 

これでテーブル作成完了

データを追加

UUIDの作成。

macならuuidgenでさくっと作れる。
powershellなら[Guid]::NewGuid()
=> 224A68FF-FB77-4F97-94CF-8B7AD846DE05

insert into users (username, email, password) values ("Teach", "teach@example.com", "uooooo");
mysql> insert into users (username, email, password) values ("Teach", "teach@example.com", "uooooo");
Query OK, 1 row affected (0.01 sec)

mysql> 

データの取得

mysql> select * from users;
+----+----------+-------------------+----------+
| id | username | email             | password |
+----+----------+-------------------+----------+
|  1 | Teach    | teach@example.com | uooooo   |
+----+----------+-------------------+----------+
1 row in set (0.00 sec)

mysql> 

補足

Dockerの他のコンテナからdbをみるときのhostは docker-compose.yml のservice名になる。
したがって以下のように接続する

mysql -u root -h mysql -p
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

VSCode+DockerでPlantUMLの環境を構築する

背景

最近、仕事していてguiの作図ツールでシーケンスを書くのがそろそろ辛くなってきたよね、という話になり、PlantUMLでコード化することになりました。その際に、環境構築がスムーズにいく人といかない人がいたのでdockerでお手軽に環境構築できないかなと思い調べてみました。
記事内で書いたファイルなどは、Githubで公開しています。

前提

前提となるマシンの環境です

  • dockerが使える
  • docker-composeが使える
  • VSCodeがinstallされている

やること

PlantUML ServerのDockerイメージが公開されていましたのでそちらを利用します。
VSCodeの拡張機能の設定でlocalに起動したPlantUML Serverを使ってレンダリングするように変更します。

1. docker-compose.ymlを作成

毎回ポートを指定してdocker runするのは面倒なのでdocker-composeで起動できるようにします。
適当なディレクトリを作成し、以下のdocker-compose.ymlファイルを置いてください。

docker-compose.yml
version: '3'
services:
  plantuml-server:
    image: plantuml/plantuml-server
    container_name: plantuml-local-server
    ports:
      - "8080:8080"

2. VSCodeの設定

  • 拡張機能PlantUMLをインストール
  • インストールしたPlantUMLのExtension settingsから以下を設定

設定は以上です。

使い方

plantumlで図を書きたい時に、docker-compose.ymlを置いたディレクトリに移動してから以下のようにplantuml-serverを起動します。

$ docker-compose up -d

VSCodeでpuファイルを作成します。ファイルの場所は任意。

sample.pu
@startuml sample
alice -> Bob: Hello, Bob!
alice <-- Bob: Hello, Alice!
@enduml

command paletteを開き(windowsならctrl+shift+p macならcommand+shift+p)、
PlantUML: Preview Current Diagramを選択するとプレビューが表示されます。そのままファイルを編集するとプレビューも更新されます。

終了する時は、

$ docker-compose down

でOKです。

参考情報

UMLの爆速プレビュー環境をVisual Studio Code + PlantUML Server on Dockerで簡単に構築する

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

vue.js + rails + dockerで環境構築する

ディレクトリ構成

root
 ├ Dockerfile
 ├ docker-compose.yml
 ├ Gemfile
 └ Gemfile.lock

ファイル内容

※Dockerfile

FROM ruby:2.6.5

RUN apt-get update -qq && \
    apt-get install -y build-essential \
                      libpq-dev
#yarnのインストール
RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
    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 && apt-get install -y yarn

#Nodejsをバージョン指定してインストール
RUN apt-get install -y nodejs

RUN mkdir /app
ENV APT_KEY_DONT_WARN_ON_DANGEROUS_USAGE=DontWarn
ENV APP_ROOT /app
WORKDIR $APP_ROOT

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

# RUN gem install bundler -v 1.3.0 (途中から追加する場合はbundlerの指定も必要)
RUN bundle install
ADD . $APP_ROOT
※docker-compose.yml

version: '3'
services:
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: root
    ports:
      - "4306:3306"
    volumes:
      - mysql_data:/var/lib/mysql
  web:
    build: .
    volumes:
      - .:/app
      - gem_data:/usr/local/bundle
    ports:
      - "3000:3000"
    depends_on:
      - db
    tty: true
    stdin_open: true
volumes:
  mysql_data:
  gem_data:
※Gemfile

source 'https://rubygems.org'
gem 'rails', '6.0.3.4'

※Gemfile.lockはファイルだけ作成しておけば良い。
※Rails 6.0から、Rubyのバージョンは2.5以上が必須
※バージョンが古いと何故か後でvue.jsをインストールする時にwebpackerが読み込まれない事があったのでバージョンを最新にしました。(あくまで自分の環境ですが)

ここまで出来たら一旦docker-compose upでイメージとコンテナを起動させます。

$ docker-compose up

↓コンテナが起動出来ているか確認

$ docker ps

起動したwebコンテナに入る

$ docker exec -it webのコンテナID /bin/bash

vue.jsをインストール

$ rails new アプリ名 --webpack=vue

※一旦サーバー起動してrailsの初期画面が表示されているか確認しときます。vue.jsの表示設定はまだしてません。

$ rails s -b 0.0.0.0

データベースをsqliteからmysqlへ変更する

※app/config/database.yml

# SQLite. Versions 3.8.0 and up are supported.
#   gem install sqlite3
#
#   Ensure the SQLite 3 gem is defined in your Gemfile
#   gem 'sqlite3'
#
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password # docker-compose.ymlのMYSQL_ROOT_PASSWORD
  host: db # docker-compose.ymlのservice名

development:
  <<: *default
  database: rails_development

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: rails_test

production:
  <<: *default
  database: rails_production

↓gem 'sqlite3' → gem 'mysql2' に変更する

※Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.5'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3', '>= 6.0.3.4'
# Use sqlite3 as the database for Active Record
gem 'mysql2'
# Use Puma as the app server
gem 'puma', '~> 4.1'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '~> 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

mysqlをインストール

$ bundle install

$ apt-get install mariadb-client

↓database.ymlの設定した内容でmysqlにアクセスできるか確認しときます。

$ mysql -u root -ppassword -h db

※上の-ppasswordは -p passwordと記載するとエラーになるので注意。無事アクセスできると下のようになります。

MySQL [(none)]>

*アクセス成功した場合

↓一度ログアウトしてdatabaseを作ります

$ rake db:create

↓作れたら再度mysqlにアクセスしてDBが出来ているか確認

MySQL [(none)]> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| rails_development  |
| rails_test         |
| sys                |
+--------------------+
6 rows in set (0.011 sec)

vue.jsを表示する

まずはwebコンテナに入った状態でvue.jsを表示するためのcontrollerとviewを作っていきます。

$ rails g controller home index
※ app/views/home/index.html.erb

<%= javascript_pack_tag 'hello_vue' %> 

スクリーンショット 2021-01-10 23.01.44.png

とりあえずここまでいけたら一通り完了です。
※表示されなかった場合などは一旦rails sを再起動したりすると直るかもしれません。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

mysqldumpでバックアップを取得する(DockerのMySQL)

はじめに

バックアップって必要だよね

ここまでに作った環境、これから使っていくことを考えると、何かあった時のためにデータのバックアップが必要。

まずは以下の記事を見ながらお勉強。

イメージは何があるかな。
RedmineとMySQLだけ。

$ docker images
REPOSITORY          TAG       IMAGE ID       CREATED       SIZE
redmine             latest    f2b5b69f9ad5   4 weeks ago   440MB
hypriot/rpi-mysql   latest    4f3cbdbc3bdb   2 years ago   209MB

立ち上がっているコンテナは何があるかな。
これもRedmineとMySQLだけ。

$ docker ps -a
CONTAINER ID   IMAGE               COMMAND                  CREATED        STATUS        PORTS                    NAMES
5190a7c0980c   hypriot/rpi-mysql   "/entrypoint.sh mysq…"   19 hours ago   Up 19 hours   3306/tcp                 redmine-db
a2afe2cb982a   redmine             "/docker-entrypoint.…"   19 hours ago   Up 19 hours   0.0.0.0:3000->3000/tcp   redmine

起動したMySQLのコンテナ(redmine-db)で稼働するMySQLデータベースは、/var/lib/mysqlディレクトリに格納されています。
中身を確認すると、色々入っているのがわかります。

$ docker exec -it redmine-db ls -l /var/lib/mysql
total 36876
-rw-rw---- 1 mysql mysql  5242880 Jan 10 01:10 ib_logfile0
-rw-rw---- 1 mysql mysql  5242880 Jan  9 06:55 ib_logfile1
-rw-rw---- 1 mysql mysql 27262976 Jan 10 01:10 ibdata1
drwx------ 2 mysql mysql     4096 Jan  9 06:55 mysql
drwx------ 2 mysql mysql     4096 Jan  9 06:55 performance_schema
drwx------ 2 mysql mysql     4096 Jan  9 06:57 redmine

記事ではここから中身をtarに固めてimportして・・・とやっていますが、そこは机上での確認とさせてもらって。

Dockerでの データボリューム という考え方について学んだところで、redmine-dbに設定されているデータボリュームを確認します。
確認してデータボリュームがわかったけど、docker export/importではバックアップ/リストアができない仕様 であるとのこと。(docker commitでもデータボリュームを含んでイメージ化できない)
データボリュームは、個別にバックアップ/リストアする必要がある・・・ということまでわかりました。

$ docker inspect redmine-db
[
    {

~~~~~~~~~~~略~~~~~~~~~~~

            "Image": "hypriot/rpi-mysql",
            "Volumes": {
                "/var/lib/mysql": {}
            },

~~~~~~~~~~~略~~~~~~~~~~~

    }
]

DockerのMySQLにアクセスする

DockerのMySQLにログインします。
パスワードを聞かれるので、忘れてたらログインできません。

$ docker exec -it redmine-db mysql -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 11
Server version: 5.5.60-0+deb7u1 (Debian)

Copyright (c) 2000, 2018, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> 

今、存在しているデータベースを確認します。

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| redmine            |
+--------------------+
4 rows in set (0.00 sec)

今、存在しているRedmineのテーブル一覧を確認します。

mysql> show tables in redmine;
+-------------------------------------+
| Tables_in_redmine                   |
+-------------------------------------+
| ar_internal_metadata                |
| attachments                         |
| auth_sources                        |
| boards                              |
| changes                             |
| changeset_parents                   |
| changesets                          |
| changesets_issues                   |
| comments                            |
| custom_field_enumerations           |
| custom_fields                       |
| custom_fields_projects              |
| custom_fields_roles                 |
| custom_fields_trackers              |
| custom_values                       |
| documents                           |
| email_addresses                     |
| enabled_modules                     |
| enumerations                        |
| groups_users                        |
| import_items                        |
| imports                             |
| issue_categories                    |
| issue_relations                     |
| issue_statuses                      |
| issues                              |
| journal_details                     |
| journals                            |
| member_roles                        |
| members                             |
| messages                            |
| news                                |
| open_id_authentication_associations |
| open_id_authentication_nonces       |
| projects                            |
| projects_trackers                   |
| queries                             |
| queries_roles                       |
| repositories                        |
| roles                               |
| roles_managed_roles                 |
| schema_migrations                   |
| settings                            |
| time_entries                        |
| tokens                              |
| trackers                            |
| user_preferences                    |
| users                               |
| versions                            |
| watchers                            |
| wiki_content_versions               |
| wiki_contents                       |
| wiki_pages                          |
| wiki_redirects                      |
| wikis                               |
| workflows                           |
+-------------------------------------+
56 rows in set (0.00 sec)

今、存在するユーザの一覧を確認します。

mysql> select host,user from mysql.user;
+------+------+
| host | user |
+------+------+
| %    | root |
+------+------+
1 row in set (0.00 sec)

バックアップ〜リストア

ダンプファイルでバックアップを取得する

まず、バックアップ用にユーザを作成します。
バックアップ以外にも使うかもしれませんが・・・。

usernameにユーザ名を、passwordにパスワードを入れて実行し、ユーザを作成します。
それからGRANTで権限を付与します。
作成したユーザ(今回はruserという名前にしました)が存在することを確認します。

mysql> create user 'username'@'%' identified by 'password';
Query OK, 0 rows affected (0.00 sec)

mysql> GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, RELOAD, PROCESS, REFERENCES, INDEX, ALTER, SHOW DATABASES, CREATE TEMPORARY TABLES, LOCK TABLES, EXECUTE, REPLICATION SLAVE, REPLICATION CLIENT, CREATE VIEW, SHOW VIEW, CREATE ROUTINE, ALTER ROUTINE, CREATE USER, EVENT, TRIGGER ON *.* TO 'ruser'@'%' WITH GRANT OPTION;
Query OK, 0 rows affected (0.00 sec)

mysql> select host,user from mysql.user;
+------+-------+
| host | user  |
+------+-------+
| %    | root  |
| %    | ruser |
+------+-------+
2 rows in set (0.00 sec)

mysqldump でバックアップを取得します。
このコマンドに辿り着くまでに試行錯誤を繰り返しましたが、そこは割愛。

$ docker exec -it redmine-db mysqldump redmine -uruser -ppassword > /backup/testbackup.sql

ちゃんと取れているか、中身を確認します。
大丈夫そうです。

$ cat /backup/testbackup.sql 
-- MySQL dump 10.13  Distrib 5.5.60, for debian-linux-gnu (armv7l)
--
-- Host: localhost    Database: 
-- ------------------------------------------------------
-- Server version   5.5.60-0+deb7u1

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;

~~~~~~~~~~~略~~~~~~~~~~~

--
-- Dumping data for table `workflows`
--

LOCK TABLES `workflows` WRITE;
/*!40000 ALTER TABLE `workflows` DISABLE KEYS */;
/*!40000 ALTER TABLE `workflows` ENABLE KEYS */;
UNLOCK TABLES;
/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

-- Dump completed on 2021-01-10 12:35:45

リストアする時は

以下のコマンドでリストアできます。
ちゃんとリストアできました。

$ docker exec -i redmine-db mysql redmine -uruser -ppassword < /backup/testbackup.sql

試行錯誤したmysqldumpなど

以下のようなコマンドでもダンプファイル取得できました。(こっちがFirst Versionで、上に記載したのがSecond Version)
色々試行錯誤して、頑張ってみたんです。

$ docker exec -it redmine-db sh -c 'exec /usr/bin/mysqldump --all-databases -uruser -ppassword --single-transaction' > /backup/testbackup.sql

その他、①起動しているコンテナ確認→②コンテナ停止→③停止したこと確認→④コンテナ削除→⑤削除を確認・・・。
起動していればSTATUSがup、停止していればExited になります。

$ docker ps -a
CONTAINER ID   IMAGE               COMMAND                  CREATED        STATUS       PORTS                    NAMES
5190a7c0980c   hypriot/rpi-mysql   "/entrypoint.sh mysq…"   31 hours ago   Up 8 hours   3306/tcp                 redmine-db
a2afe2cb982a   redmine             "/docker-entrypoint.…"   31 hours ago   Up 8 hours   0.0.0.0:3000->3000/tcp   redmine
$ docker stop 5190a7c0980c a2afe2cb982a
5190a7c0980c
a2afe2cb982a
$ docker ps -a
CONTAINER ID   IMAGE               COMMAND                  CREATED        STATUS                     PORTS     NAMES
5190a7c0980c   hypriot/rpi-mysql   "/entrypoint.sh mysq…"   31 hours ago   Exited (0) 4 seconds ago             redmine-db
a2afe2cb982a   redmine             "/docker-entrypoint.…"   31 hours ago   Exited (1) 8 seconds ago             redmine
$ docker rm 5190a7c0980c a2afe2cb982a
5190a7c0980c
a2afe2cb982a
$ docker ps -a
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES

終わりに

これで無事にバックアップが取得できるようになりました。
ちゃんとするなら、cronとかで定期的に実行するシェルを作成してバックアップするのでしょうが・・・一旦後回しで。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【2021年】React / TypeScript使用のためのDocker + Vagrant環境を構築する

目的

下記の技術を使ったフロントのコンポーネントの作成を行うための環境構築を行いました。

  • React
  • TypeScript

目的は上記の利用ですが、本記事としてはReact/TypeScriptを触れることはありませんので、Node.jsを利用する環境の構築には利用が可能かと思います。

DockerだけでなくVagrantを採用している理由としては、自分の開発環境がmacであり、
参考記事に記載の理由で動作が遅いことを解消するためです。

参考記事

DXを大幅に低下させるDocker for Macを捨ててMac最速のDocker環境を手に入れる

前準備/筆者の環境

参考記事に記載のVagrantやMutagenのインストールが必要です。
筆者の環境としては下記となります。

  • MacOS 11.1
  • Vagrant 2.2.7
  • Mutagen 0.11.8

作成するもの

下記の4つのファイルを作成します。
それぞれのファイルは同一のディレクトリの配置でOKです。

  • Vagrantfile
  • mutagen.yml
  • Dockerfile
  • docker-compose.yml

起動をする際にはvagrantから立ち上げて、仮想マシンの中にsshしてdockerの立ち上げとなります。

Vagrantfile

作成する仮想マシンの構成の記載がされているファイルです。

Vagrant.configure('2') do |config|
  config.vm.box = 'ubuntu/focal64'

  config.vm.hostname = 'frontcomponent'

  config.vm.network :private_network, ip: '192.168.60.10'
  config.vm.network 'forwarded_port', guest: 8000, host: 8000

  config.vm.provider :virtualbox do |vb|
    vb.gui = false
    vb.cpus = 2
    vb.memory = 4096
    vb.customize ['modifyvm', :id, '--natdnsproxy1', 'off']
    vb.customize ['modifyvm', :id, '--natdnshostresolver1', 'off']
  end

  config.disksize.size = '15GB'
  config.mutagen.orchestrate = true

  config.vm.synced_folder './', '/home/vagrant/front_component', type: "rsync",
    rsync_auto: true,
    rsync__exclude: ['.git/', 'log/', 'tmp/']

  config.vm.provision 'shell', inline: <<-SHELL
    echo "fs.inotify.max_user_watches = 65536" >> /etc/sysctl.conf && sysctl -p

    curl -fsSL https://get.docker.com -o get-docker.sh
    sh get-docker.sh
    usermod -aG docker vagrant

    # dockerを更新する場合にはverを調整すること
    curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
    chmod +x /usr/local/bin/docker-compose
  SHELL
end

portの設定は今後に自分が利用する環境に合わせて設定しています。
あと、vm.providerなどスペックの設定に関しては利用しているPCなどでチューニングすると良いかと思います。

他には自分がこれまでにハマったポイントや参考記事を拝見した後に追加した点としては下記となります。利用する場合には注意してください。

hostname

"_"の利用ができないようです。
サービス名などを入れた場合に間違えやすいので注意が必要です。

fs.inotify.max_user_watches

node_modulesなど外部のファイルを引いてくるディレクトリが存在する場合にファイル数が多くなりすぎて、エラーとなることがあります。その場合にはファイルのマウントから除外する方が正しいかとは思いますが、typescriptの方定義ファイルなどローカル上にマウントされてないとコード編集時にnode_modules内の型定義ファイルが見つからず加えました。

良い知見をお持ちの方がいたら意見を伺いたいです

mutagen.yml

sync:
  app:
    mode: "two-way-resolved"
    alpha: "./"
    beta: "frontcomponent:/home/vagrant/front_component"
    ignore:
      vcs: true
      paths:
        - "/log"
        - "/tmp"

vagrantとのファイル同期にmutagenを利用します。
詳細に関しては記事にまとめるほどには理解が追いついていませんので、参考記事を参照していただけると良いかと思います。

Dockerfile

Docker Hubに置いてあるDockerのイメージファイルをベースとして、
今回利用するコンテナのベースイメージを作成します。

FROM node:15.5.1

ENV LANG C.UTF-8
ENV WORKSPACE=/var/www/front_component/

RUN curl -sL https://deb.nodesource.com/setup_15.x | bash - 
RUN apt install -y less build-essential nodejs
RUN apt install -y vim less
RUN npm install n -g
RUN n 14.15.4

WORKDIR $WORKSPACE

Docker Hubに置いてあるイメージを元に、今回の環境構築用のベースイメージを作成します。

今回は、今後にreact/typescriptを入れていくことを想定しているのでnodeのイメージをして、npmのインストールをしています。

docker-compose.yml

version: '3.7'

services:
  front:
    build: .
    image: front:1.0
    container_name: front
    tty: true
    stdin_open: true
    ports:
      - "8000:8000"
    environment: {}
    volumes:
      - .:/var/www/front_component
    # command: "bash -c 'npm i && npm run watch'"

コンテナ作成用の設定になります。
コメントアウト部分は今後にreact/typescriptを入れた後に利用する想定ですが、
ここまでの環境構築では利用をしないのでコメントアウトとしています。

vagrantおよびdockerの立ち上げ

立ち上げ方

# 先にcdコマンドで上記で作成したファイルの置いてあるディレクトリに移動する

vagrant up  # vagrantの立ち上げ
vagrant ssh # vagrant内へsshでアクセス
cd front_component   # vagrantにローカルのファイルをマウントしているディレクトリに移動
docker-compose up -d # dockerの立ち上げ

以上で環境の立ち上げ完了です。

上記のコマンドと合わせて、自分がよく使うコマンドを記載しておきます。
簡易的な説明のみなので、ちゃんと使う老婆には調べて使ってください

vagrant系

vagrant up      # vagrantの立ち上げ
vagrant ssh     # 立ち上げたvagrantにsshアクセスする
vagrant halt    # vagrantの終了
vagrant destroy # vagrantで作成した仮装イメージごと削除

docker系

docker ps # 起動中のdockerのimageを確認する
docker exec -ti <コンテナ名> /bin/bash # コンテナの中にssh的にアクセスする
docker attach <コンテナ名> # コンテナで起動中のプロセスを表示する
docker logs <コンテナ名>   # 強制終了したコンテナの終了時のログなどを見るのに利用する

初投稿ε('∞'*)フゥー

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

WordPressの開発環境をDocker(Local)とAWS(Production)で構築手順

表題の通り、WordPressの開発環境をDockerとAWSで構築したのでその手順についてまとめます。

まとめる内容は以下になります。

  • WordPressのLocal環境をDockerで構築
    • Webpackでscssとjsをcompileしてthemesディレクトリにoutput
    • scssとjsはassetsディレクトリで作業する
    • 開発ファイルはGitで管理する
  • WordPressのProduction環境をAWSで構築
    • Public Subnet、Private SubnetでそれぞれEC2 InstanceにWordPressとMySQLをinstall
    • EC2 InstanceにGitを配置して開発ファイルをPullするとLocal作業が反映される

Local環境

  • WordPress の Local 環境を Docker で構築
  • Webpack で js と scss ファイルを compile して themes に output

Docker image の version

image: mysql:8.0.22
image: wordpress:latest
docker-compose.yaml
version: '3'

services:
  db:
    image: mysql:8.0.22
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: wordpress
      MYSQL_USER: admin
      MYSQL_PASSWORD: password
    networks:
      - wpsite
  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin
    restart: always
    ports:
      - '8080:80'
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: password
    networks:
      - wpsite
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - '8000:80'
    restart: always
    volumes: ['./../src:/var/www/html']
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: admin
      WORDPRESS_DB_PASSWORD: password
    networks:
      - wpsite
networks:
  wpsite:
volumes:
  db_data:

開発作業

  • scss と js の作業はassetsディレクトリ内で行う(assets/css/assets/js/)
  • assetsディレクトリ内で Webpack 起動
  • scss と js を変更すると自動で compile されて themes に output
  • js はruntime.jsvendors.jsindex.jsで分割される
  • jQueryをinstall
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const themeName = 'original';

module.exports = {
  mode: 'production',
  entry: {
    index: ['./js/index.js', './css/style.scss'],
  },
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, `../src/wp-content/themes/${themeName}`),
    publicPath: '/',
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/style.css',
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
};

webpack 起動コマンド

$ cd assets
$ npm start

Local 環境

  1. /dockerディレクトリに移動して docker(docker-compose up -d) 起動
  2. http://localhost:8000/が wordpress の local URL
  3. http://localhost:8080/が phpmyadmin の local URL

tree

  • assets/jsのファイルをsrc/wp-content/themes/original/jsに webpack で compile
├── assets
│   ├── css
│   │   └── style.scss
│   ├── js
│   │   └── index.js
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   └── webpack.config.js
├── docker
│   └── docker-compose.yaml
└── src
    ├── index.php
    ├── wp-admin
    ├── wp-config-sample.php
    ├── wp-content
        ├── index.php
        ├── languages
        ├── plugins
        ├── themes
            ├── index.php
            ├── original
                └── css
                    └── style.css
                └── js
                    └── index.js
                    └── runtime.js
                    └── vendors.js

gitignore

src/.htaccess
src/wp-config.php
src/wp-content/uploads/
src/wp-content/upgrade/

Docker コマンド

コンテナ表示

$ docker ps

image 一覧

$ docker images

コンテナ起動

  • -dを実行すると、コンテナはバックグラウンドで起動し、そのまま実行し続けます。
$ docker-compose up -d

コンテナ停止

$ docker-compose down

本番環境

  • AWS で構築
  • Public Subnet
    • Apatch を install して Web サーバーとする
    • Internet Gatewayで外部からの通信を許可
  • Private Subnet
    • NAT Gatewayを介して外部からの通信を可能するが、サブネットからは通信を不可
    • MySQL を install して DB サーバーとする

構成図

WordPress環境(docker(local)、AWS(prod))

SSH でログイン

$ ssh -i {秘密鍵}.pem ec2-user@{IPv4パブリックIP}

Web サーバーを踏み台として DB サーバーに SSH ログインして MySQL をinstall

  • DB サーバーはインバウンドでInternetと接続してない
  • インバウンドで SSH での接続を許可しているので Web サーバーを踏み台に SSH ログインする
  • SSH ログインするには pem key を Web サーバーに配置する
  • NAT GatewayでPublic Subnetを通してInternetに接続できるようにする
  • DB サーバーにログインして MySQL をinstallする

pem key を scp コマンドで Web サーバーにコピーして配置

$ scp -i {秘密鍵}.pem {秘密鍵}.pem ec2-user@{IPv4パブリックIP}:~/

DB サーバーに SSH ログイン

$ ssh -i {秘密鍵}.pem ec2-user@{プライベート IPv4 アドレス}

参考サイト

MySQL コマンド

MySQL 起動

$ sudo service mysqld start

MySQL が起動しているか確認

$ systemctl status mysqld.service

MySQL にログイン

$ mysql -u root -p

初期設定パスワードを変更

mysql> set password for 'root'@'localhost' = '********';

データベースwordpressを作成

CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

ユーザー ID と PW を設定

mysql> create user '{ユーザーID}'@'%' identified by '{password}';

ユーザーに権限を付与
※権限を付与しないと Wordpress のデータベース接続ができない

mysql> grant create on *.* to {ユーザーID};

ユーザーが作成されたか確認

mysql> select user, host from mysql.user;

参考サイト

WordPress をインストール

  • Apache が install されている EC2 インスタンスに SSH ログイン
  • amazon-linux-extras リポジトリから php を Web サーバーに install
  • php7.4 に対応したライブラリの install
  • WordPress を install
  • WordPress 本体を Apache から見える場所に配置(/var/www/html/)
  • ファイルの所有者を apache に変更
  • パブリック IPv4 アドレスで WordPress 管理画面が表示される

amazon-linux-extras リポジトリのソフトウェア一覧を表示

$ amazon-linux-extras

php7.4 を install

$ sudo amazon-linux-extras install -y php7.4

php7.4 に対応したライブラリの install

$ sudo yum install -y php php-mbstring

WordPress を install

$ wget https://wordpress.org/latest.tar.gz

install したフォルダをを解凍

$ tar -xzf latest.tar.gz

WordPress 本体を Apache から見える場所に配置(/var/www/html/)

$ cd wordpress/
$ sudo cp -r * /var/www/html/

ファイルの所有者を apache に変更

$ sudo chown apache:apache /var/www/html/ -R

参考サイト

WordPress とデータベース接続のエラーでハマった点

WordPress を install して管理画面でデータベース接続ができずにハマりました。その対応策としては mysql のユーザー ID に権限を付与してなかったからです。

データベースを使用する権限を付与 part1

エラー文
「ユーザー xxx にはデータベース wordpress を使用できる権限がありますか ?」

ユーザーに権限を付与
※権限を付与しないと Wordpress のデータベース接続ができない

mysql> grant create on *.* to {ユーザーID};

データベースを使用する権限を付与 part2

エラー文
WordPress データベースエラー: [SELECT command denied to user '{ユーザーID}'@'{host}' for table 'wp_options']

作成したデータベースを書き込めるようにユーザーに権限を付与

mysql> grant all on wordpress.\* to '{ユーザーID}'@'{host}';

Web サーバーから DB サーバーに通信疎通できない場合

エラー文
Authentication plugin 'caching_sha2_password' cannot be loaded: /usr/lib64/mysql/plugin/caching_sha2_password.so: cannot open shared object file: No such file or directory

plugin を「caching_sha2_password 」から「mysql_native_password」に変更する

mysql> ALTER USER '{ユーザーID}'@'{host}' IDENTIFIED WITH mysql_native_password BY '{password}';

参考サイト

EC2 に git をインストール

EC2 Instanceに SSH ログイン

$ sudo yum -y update
$ sudo yum install git

GitHub のアカウント接続する(下記参考サイトを参照)

Apatch の DocumentRoot を変更する

  • デフォルトでは/var/www/htmlのファイルがページに表示されるので、それを git で pull したファイルを読むように変更する(下記参考サイトを参照)

/var/www/htmlのファイルを/var/tmp/{リポジトリ名/src}にコピーする

$ cp -pR /var/www/html/* /var/lib/{リポジトリ名/src}/

設定ファイル/etc/httpd/conf/httpd.confの書き換え

DocumentRoot "/var/tmp/{リポジトリ名/src}"

<Directory "/var/tmp/{リポジトリ名/src}">

Apatch を再起動

$ sudo systemctl restart httpd

作成したフォルダ・ファイルの所有者を apache に変更

$ sudo chown apache:apache /var/tmp/{リポジトリ名/src}

権限を付与

$ sudo chmod 600 /var/tmp/{リポジトリ名/src}

参考サイト

以上となります。
これでPublic SubnetのEC2 Instanceの/var/tmp/{リポジトリ名/git pullすると開発コードが反映されるかと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

WordPressの開発環境をDocker(Local)とAWS(Production)で構築

表題の通り、WordPressの開発環境をDockerとAWSで構築したのでその手順についてまとめます。

まとめる内容は以下になります。

  • WordPressのLocal環境をDockerで構築
    • Webpackでscssとjsをcompileしてthemesディレクトリにoutput
    • scssとjsはassetsディレクトリで作業する
    • 開発ファイルはGitで管理する
  • WordPressのProduction環境をAWSで構築
    • Public Subnet、Private SubnetでそれぞれEC2 InstanceにWordPressとMySQLをinstall
    • EC2 InstanceにGitを配置して開発ファイルをPullするとLocal作業が反映される

Local環境

  • WordPress の Local 環境を Docker で構築
  • Webpack で js と scss ファイルを compile して themes に output

Docker image の version

image: mysql:8.0.22
image: wordpress:latest
docker-compose.yaml
version: '3'

services:
  db:
    image: mysql:8.0.22
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: wordpress
      MYSQL_USER: admin
      MYSQL_PASSWORD: password
    networks:
      - wpsite
  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin
    restart: always
    ports:
      - '8080:80'
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: password
    networks:
      - wpsite
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - '8000:80'
    restart: always
    volumes: ['./../src:/var/www/html']
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: admin
      WORDPRESS_DB_PASSWORD: password
    networks:
      - wpsite
networks:
  wpsite:
volumes:
  db_data:

開発作業

  • scss と js の作業はassetsディレクトリ内で行う(assets/css/assets/js/)
  • assetsディレクトリ内で Webpack 起動
  • scss と js を変更すると自動で compile されて themes に output
  • js はruntime.jsvendors.jsindex.jsで分割される
  • jQueryをinstall
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const themeName = 'original';

module.exports = {
  mode: 'production',
  entry: {
    index: ['./js/index.js', './css/style.scss'],
  },
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, `../src/wp-content/themes/${themeName}`),
    publicPath: '/',
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/style.css',
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
};

webpack 起動コマンド

$ cd assets
$ npm start

Local 環境

  1. /dockerディレクトリに移動して docker(docker-compose up -d) 起動
  2. http://localhost:8000/が wordpress の local URL
  3. http://localhost:8080/が phpmyadmin の local URL

tree

  • assets/jsのファイルをsrc/wp-content/themes/original/jsに webpack で compile
├── assets
│   ├── css
│   │   └── style.scss
│   ├── js
│   │   └── index.js
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   └── webpack.config.js
├── docker
│   └── docker-compose.yaml
└── src
    ├── index.php
    ├── wp-admin
    ├── wp-config-sample.php
    ├── wp-content
        ├── index.php
        ├── languages
        ├── plugins
        ├── themes
            ├── index.php
            ├── original
                └── css
                    └── style.css
                └── js
                    └── index.js
                    └── runtime.js
                    └── vendors.js

gitignore

src/.htaccess
src/wp-config.php
src/wp-content/uploads/
src/wp-content/upgrade/

Docker コマンド

コンテナ表示

$ docker ps

image 一覧

$ docker images

コンテナ起動

  • -dを実行すると、コンテナはバックグラウンドで起動し、そのまま実行し続けます。
$ docker-compose up -d

コンテナ停止

$ docker-compose down

本番環境

  • AWS で構築
  • Public Subnet
    • Apatch を install して Web サーバーとする
    • Internet Gatewayで外部からの通信を許可
  • Private Subnet
    • NAT Gatewayを介して外部からの通信を可能するが、サブネットからは通信を不可
    • MySQL を install して DB サーバーとする

構成図

WordPress環境(docker(local)、AWS(prod))

SSH でログイン

$ ssh -i {秘密鍵}.pem ec2-user@{IPv4パブリックIP}

Web サーバーを踏み台として DB サーバーに SSH ログインして MySQL をinstall

  • DB サーバーはインバウンドでInternetと接続してない
  • インバウンドで SSH での接続を許可しているので Web サーバーを踏み台に SSH ログインする
  • SSH ログインするには pem key を Web サーバーに配置する
  • NAT GatewayでPublic Subnetを通してInternetに接続できるようにする
  • DB サーバーにログインして MySQL をinstallする

pem key を scp コマンドで Web サーバーにコピーして配置

$ scp -i {秘密鍵}.pem {秘密鍵}.pem ec2-user@{IPv4パブリックIP}:~/

DB サーバーに SSH ログイン

$ ssh -i {秘密鍵}.pem ec2-user@{プライベート IPv4 アドレス}

参考サイト

MySQL コマンド

MySQL 起動

$ sudo service mysqld start

MySQL が起動しているか確認

$ systemctl status mysqld.service

MySQL にログイン

$ mysql -u root -p

初期設定パスワードを変更

mysql> set password for 'root'@'localhost' = '********';

データベースwordpressを作成

CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

ユーザー ID と PW を設定

mysql> create user '{ユーザーID}'@'%' identified by '{password}';

ユーザーに権限を付与
※権限を付与しないと Wordpress のデータベース接続ができない

mysql> grant create on *.* to {ユーザーID};

ユーザーが作成されたか確認

mysql> select user, host from mysql.user;

参考サイト

WordPress をインストール

  • Apache が install されている EC2 インスタンスに SSH ログイン
  • amazon-linux-extras リポジトリから php を Web サーバーに install
  • php7.4 に対応したライブラリの install
  • WordPress を install
  • WordPress 本体を Apache から見える場所に配置(/var/www/html/)
  • ファイルの所有者を apache に変更
  • パブリック IPv4 アドレスで WordPress 管理画面が表示される

amazon-linux-extras リポジトリのソフトウェア一覧を表示

$ amazon-linux-extras

php7.4 を install

$ sudo amazon-linux-extras install -y php7.4

php7.4 に対応したライブラリの install

$ sudo yum install -y php php-mbstring

WordPress を install

$ wget https://wordpress.org/latest.tar.gz

install したフォルダをを解凍

$ tar -xzf latest.tar.gz

WordPress 本体を Apache から見える場所に配置(/var/www/html/)

$ cd wordpress/
$ sudo cp -r * /var/www/html/

ファイルの所有者を apache に変更

$ sudo chown apache:apache /var/www/html/ -R

参考サイト

WordPress とデータベース接続のエラーでハマった点

WordPress を install して管理画面でデータベース接続ができずにハマりました。その対応策としては mysql のユーザー ID に権限を付与してなかったからです。

データベースを使用する権限を付与 part1

エラー文
「ユーザー xxx にはデータベース wordpress を使用できる権限がありますか ?」

ユーザーに権限を付与
※権限を付与しないと Wordpress のデータベース接続ができない

mysql> grant create on *.* to {ユーザーID};

データベースを使用する権限を付与 part2

エラー文
WordPress データベースエラー: [SELECT command denied to user '{ユーザーID}'@'{host}' for table 'wp_options']

作成したデータベースを書き込めるようにユーザーに権限を付与

mysql> grant all on wordpress.\* to '{ユーザーID}'@'{host}';

Web サーバーから DB サーバーに通信疎通できない場合

エラー文
Authentication plugin 'caching_sha2_password' cannot be loaded: /usr/lib64/mysql/plugin/caching_sha2_password.so: cannot open shared object file: No such file or directory

plugin を「caching_sha2_password 」から「mysql_native_password」に変更する

mysql> ALTER USER '{ユーザーID}'@'{host}' IDENTIFIED WITH mysql_native_password BY '{password}';

参考サイト

EC2 に git をインストール

EC2 Instanceに SSH ログイン

$ sudo yum -y update
$ sudo yum install git

GitHub のアカウント接続する(下記参考サイトを参照)

Apatch の DocumentRoot を変更する

  • デフォルトでは/var/www/htmlのファイルがページに表示されるので、それを git で pull したファイルを読むように変更する(下記参考サイトを参照)

/var/www/htmlのファイルを/var/tmp/{リポジトリ名/src}にコピーする

$ cp -pR /var/www/html/* /var/lib/{リポジトリ名/src}/

設定ファイル/etc/httpd/conf/httpd.confの書き換え

DocumentRoot "/var/tmp/{リポジトリ名/src}"

<Directory "/var/tmp/{リポジトリ名/src}">

Apatch を再起動

$ sudo systemctl restart httpd

作成したフォルダ・ファイルの所有者を apache に変更

$ sudo chown apache:apache /var/tmp/{リポジトリ名/src}

権限を付与

$ sudo chmod 600 /var/tmp/{リポジトリ名/src}

参考サイト

以上となります。
これでPublic SubnetのEC2 Instanceの/var/tmp/{リポジトリ名/git pullすると開発コードが反映されるかと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

WordPress環境をDocker(Local)とAWS(Production)で構築

表題の通り、WordPress環境をDockerとAWSで構築したのでその手順についてまとめます。

まとめる内容は以下になります。

  • WordPressのLocal環境をDockerで構築
    • Webpackでscssとjsをcompileしてthemesディレクトリにoutput
    • scssとjsはassetsディレクトリで作業する
    • 開発ファイルはGitで管理する
  • WordPressのProduction環境をAWSで構築
    • Public Subnet、Private SubnetでそれぞれEC2 InstanceにWordPressとMySQLをinstall
    • EC2 InstanceにGitを配置して開発ファイルをPullするとLocal作業が反映される

Local環境

  • WordPress の Local 環境を Docker で構築
  • Webpack で js と scss ファイルを compile して themes に output

Docker image の version

image: mysql:8.0.22
image: wordpress:latest
docker-compose.yaml
version: '3'

services:
  db:
    image: mysql:8.0.22
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: wordpress
      MYSQL_USER: admin
      MYSQL_PASSWORD: password
    networks:
      - wpsite
  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin
    restart: always
    ports:
      - '8080:80'
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: password
    networks:
      - wpsite
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - '8000:80'
    restart: always
    volumes: ['./../src:/var/www/html']
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: admin
      WORDPRESS_DB_PASSWORD: password
    networks:
      - wpsite
networks:
  wpsite:
volumes:
  db_data:

開発作業

  • scss と js の作業はassetsディレクトリ内で行う(assets/css/assets/js/)
  • assetsディレクトリ内で Webpack 起動
  • scss と js を変更すると自動で compile されて themes に output
  • js はruntime.jsvendors.jsindex.jsで分割される
  • jQueryをinstall
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const themeName = 'original';

module.exports = {
  mode: 'production',
  entry: {
    index: ['./js/index.js', './css/style.scss'],
  },
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, `../src/wp-content/themes/${themeName}`),
    publicPath: '/',
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/style.css',
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
};

webpack 起動コマンド

$ cd assets
$ npm start

Local 環境

  1. /dockerディレクトリに移動して docker(docker-compose up -d) 起動
  2. http://localhost:8000/が wordpress の local URL
  3. http://localhost:8080/が phpmyadmin の local URL

tree

  • assets/jsのファイルをsrc/wp-content/themes/original/jsに webpack で compile
├── assets
│   ├── css
│   │   └── style.scss
│   ├── js
│   │   └── index.js
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   └── webpack.config.js
├── docker
│   └── docker-compose.yaml
└── src
    ├── index.php
    ├── wp-admin
    ├── wp-config-sample.php
    ├── wp-content
        ├── index.php
        ├── languages
        ├── plugins
        ├── themes
            ├── index.php
            ├── original
                └── css
                    └── style.css
                └── js
                    └── index.js
                    └── runtime.js
                    └── vendors.js

gitignore

src/.htaccess
src/wp-config.php
src/wp-content/uploads/
src/wp-content/upgrade/

Docker コマンド

コンテナ表示

$ docker ps

image 一覧

$ docker images

コンテナ起動

  • -dを実行すると、コンテナはバックグラウンドで起動し、そのまま実行し続けます。
$ docker-compose up -d

コンテナ停止

$ docker-compose down

本番環境

  • AWS で構築
  • Public Subnet
    • Apatch を install して Web サーバーとする
    • Internet Gatewayで外部からの通信を許可
  • Private Subnet
    • NAT Gatewayを介して外部からの通信を可能にするが、サブネットからは通信を不可
    • MySQL を install して DB サーバーとする

構成図

WordPress環境(docker(local)、AWS(prod))

SSH でログイン

$ ssh -i {秘密鍵}.pem ec2-user@{IPv4パブリックIP}

Web サーバーを踏み台として DB サーバーに SSH ログインして MySQL をinstall

  • DB サーバーはインバウンドでInternetと接続してない
  • インバウンドで SSH での接続を許可しているので Web サーバーを踏み台に SSH ログインする
  • SSH ログインするには pem key を Web サーバーに配置する
  • NAT GatewayでPublic Subnetを通してInternetに接続できるようにする
  • DB サーバーにログインして MySQL をinstallする

pem key を scp コマンドで Web サーバーにコピーして配置

$ scp -i {秘密鍵}.pem {秘密鍵}.pem ec2-user@{IPv4パブリックIP}:~/

DB サーバーに SSH ログイン

$ ssh -i {秘密鍵}.pem ec2-user@{プライベート IPv4 アドレス}

参考サイト

MySQL コマンド

MySQL 起動

$ sudo service mysqld start

MySQL が起動しているか確認

$ systemctl status mysqld.service

MySQL にログイン

$ mysql -u root -p

初期設定パスワードを変更

mysql> set password for 'root'@'localhost' = '********';

データベースwordpressを作成

CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

ユーザー ID と PW を設定

mysql> create user '{ユーザーID}'@'%' identified by '{password}';

ユーザーに権限を付与
※権限を付与しないと Wordpress のデータベース接続ができない

mysql> grant create on *.* to {ユーザーID};

ユーザーが作成されたか確認

mysql> select user, host from mysql.user;

参考サイト

WordPress をインストール

  • Apache が install されている EC2 インスタンスに SSH ログイン
  • amazon-linux-extras リポジトリから php を Web サーバーに install
  • php7.4 に対応したライブラリの install
  • WordPress を install
  • WordPress 本体を Apache から見える場所に配置(/var/www/html/)
  • ファイルの所有者を apache に変更
  • パブリック IPv4 アドレスで WordPress 管理画面が表示される

amazon-linux-extras リポジトリのソフトウェア一覧を表示

$ amazon-linux-extras

php7.4 を install

$ sudo amazon-linux-extras install -y php7.4

php7.4 に対応したライブラリの install

$ sudo yum install -y php php-mbstring

WordPress を install

$ wget https://wordpress.org/latest.tar.gz

install したフォルダをを解凍

$ tar -xzf latest.tar.gz

WordPress 本体を Apache から見える場所に配置(/var/www/html/)

$ cd wordpress/
$ sudo cp -r * /var/www/html/

ファイルの所有者を apache に変更

$ sudo chown apache:apache /var/www/html/ -R

参考サイト

WordPress とデータベース接続のエラーでハマった点

WordPress を install して管理画面でデータベース接続ができずにハマりました。その対応策としては mysql のユーザー ID に権限を付与してなかったからです。

データベースを使用する権限を付与 part1

エラー文
「ユーザー xxx にはデータベース wordpress を使用できる権限がありますか ?」

ユーザーに権限を付与
※権限を付与しないと Wordpress のデータベース接続ができない

mysql> grant create on *.* to {ユーザーID};

データベースを使用する権限を付与 part2

エラー文
WordPress データベースエラー: [SELECT command denied to user '{ユーザーID}'@'{host}' for table 'wp_options']

作成したデータベースを書き込めるようにユーザーに権限を付与

mysql> grant all on wordpress.\* to '{ユーザーID}'@'{host}';

Web サーバーから DB サーバーに通信疎通できない場合

エラー文
Authentication plugin 'caching_sha2_password' cannot be loaded: /usr/lib64/mysql/plugin/caching_sha2_password.so: cannot open shared object file: No such file or directory

plugin を「caching_sha2_password 」から「mysql_native_password」に変更する

mysql> ALTER USER '{ユーザーID}'@'{host}' IDENTIFIED WITH mysql_native_password BY '{password}';

参考サイト

EC2 に git をインストール

EC2 Instanceに SSH ログイン

$ sudo yum -y update
$ sudo yum install git

GitHub のアカウント接続する(下記参考サイトを参照)
git cloneを実行したディレクトリは/var/tmpディレクトリになります。

Apatch の DocumentRoot を変更する

  • デフォルトでは/var/www/htmlのファイルがページに表示されるので、それを git で pull したファイルを読むように変更する(下記参考サイトを参照)

/var/www/htmlのファイルを/var/tmp/{リポジトリ名/src}にコピーする

$ cp -pR /var/www/html/* /var/lib/{リポジトリ名/src}/

設定ファイル/etc/httpd/conf/httpd.confの書き換え

DocumentRoot "/var/tmp/{リポジトリ名/src}"

<Directory "/var/tmp/{リポジトリ名/src}">

Apatch を再起動

$ sudo systemctl restart httpd

作成したフォルダ・ファイルの所有者を apache に変更

$ sudo chown apache:apache /var/tmp/{リポジトリ名/src}

権限を付与

$ sudo chmod 600 /var/tmp/{リポジトリ名/src}

参考サイト

以上となります。
これでPublic SubnetのEC2 Instanceの/var/tmp/{リポジトリ名/git pullすると開発コードが反映されるかと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CircleCIでビルドの結果をslackで通知する。5分でできます。

CircleCIのjobの結果をslackに通知する

本記事では何かしらの自動テストや、自動デプロイの結果をslackに通知する方法記事にしております。簡単にわかりやすく、そして早くできるようにまとめましたので、すぐ終わらせて違う作業をしましょう!!

環境

CircleCI 2.1
orbs: slack: circleci/slack@3.4.2

条件

  1. すでに何らかのjobを作成済みである。
  2. 正常にビルドができる。
  3. slackを使っている

これらの条件に当てはまっていたら、手順通り初めてください。
当てはまっていない場合は、エラーが発生した時に混乱を引き起こしてしまう可能性があるので、ご注意ください!

工程

 1. webhook取得
 2. CircleCIにて環境変数を設定
 3. config.ymlファイルに必要なソースを記述

1. Webhookを取得

https://slack.com/services/new/incoming-webhook

⬆️⬆️上記のURLにて環境変数に設定するためのURLを取得してください。
指定するアカウントにログインし、通知するチャンネルを指定したらURLが発行されます。
slack.png

ログインすると上記の写真でチャンネルを選択する画面が出てくるので選択。
次の画面でURLが出てくるので、コピーして控えておく

2.CircleCIにで環境変数を設定

CircleCIにて環境変数の設定を行います。
プロジェクトの設定画面にて環境変数の登録をする
プロジェクトを選択しinportする
circleci.png

nameはSLACK_WEBHOOKとして
Valueは先ほど控えたURLをコピペする

3. /.circleci/config.ymlファイルに通知パラメータを設定

config.yml
orbs:
  slack: circleci/slack@3.3.0


# 省略

    - slack/status:
        success_message: ':circleci-pass: $CIRCLE_BRANCH のビルドが完了しました\n:github_octocat: User:$CIRCLE_USERNAME'
        failure_message: ':circleci-fail: $CIRCLE_BRANCH のビルドが失敗しました\n:github_octocat: User:$CIRCLE_USERNAME'
        webhook: '${SLACK_WEBHOOK}'

この2種類の記述をする

私の場合

config.yml
version: 2.1

orbs:
  slack: circleci/slack@3.3.0

jobs:
  build:
    docker:
    - image: circleci/ruby:2.6.5-node-browsers
      environment:
        - BUNDLER_VERSION: 2.2.3
        - RAILS_ENV: 'test'
    - image: circleci/mysql:5.7
      environment:
        - MYSQL_ALLOW_EMPTY_PASSWORD: 'true'
        - MYSQL_ROOT_HOST: '127.0.0.1'

    working_directory: **


    steps:
    - checkout

    - restore_cache:
        keys:
        - v1-dependencies-{{ checksum "Gemfile.lock" }}
        - v1-dependencies-

    - run:
        name: install dependencies
        command: |
          gem install bundler -v 2.2.0
          bundle install --jobs=4 --retry=3 --path vendor/bundle

    - save_cache:
        paths:
        - ./vendor/bundle
        key: v1-dependencies-{{ checksum "Gemfile.lock" }}

    # Database setup
    - run: mv ./config/database.yml.ci ./config/database.yml

    # Database setup
    - run:
        name: DatabaseSetup
        command: |
           bundle exec rake db:create
           bundle exec rake db:schema:load

    # yarn install
    - run:
        name: yarn Install
        command: yarn install


    - run: bundle exec bin/webpack

    # run tests!
    - run:
        name: RSpec 並列実行
        command: |
          mkdir /tmp/test-results
          TEST_FILES="$(circleci tests glob " **/spec/**/*_spec.rb" | circleci tests split --split-by=timings)"

          bundle exec rspec --format progress \
                          --out /tmp/test-results/rspec.xml \
                          --format progress \
                          $TEST_FILES

    # collect reports
    - store_test_results:
        path: /tmp/test-results
    - store_artifacts:
        path: /tmp/test-results
        destination: test-results

          #ssh接続
    - add_ssh_keys:
        fingerprints:
          - "**"

      #デプロイ
    - deploy:
        name: Capistrano deploy
        command: |
          if [ "${CIRCLE_BRANCH}" != "master" ]; then
            exit 0
          fi
            bundle exec cap production deploy

    - slack/status:
        success_message: ':circleci-pass: $CIRCLE_BRANCH のビルドが完了しました\n:github_octocat: User:$CIRCLE_USERNAME'
        failure_message: ':circleci-fail: $CIRCLE_BRANCH のビルドが失敗しました\n:github_octocat: User:$CIRCLE_USERNAME'
        webhook: '${SLACK_WEBHOOK}'

これでjobを走らせて見て通知がきたら成功です。
slack.png

この通知がきたら完成です。
お疲れ様でした!!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

WSL2へのDockerインストール

WSL2へのDockerインストール

Docker Desktopをインストール

https://www.docker.com/products/docker-desktop

インストール時

Enable WSL 2 Windows Features

がチェックされている事を確認する。

インストール後歯車アイコンから設定をを起動

Resouces
    Configure which WSL 2 distros you want to access Docker from
        Enable integration with my default WSL distro
    Enable integration with additional distros:
        Ubuntu-20.04

にチェックがついている事を確認

チェックをつけた場合は再起動。

Ubuntu-20.04へログインしで動作確認

docker version
docker-compose version

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Kubernetes/コンテナ関連の標準化系メモ

Kubernetesベースのコンテナオーケストレーションシステムは、モノリシックな一枚岩システムではなく、さまざまなエコシステムツールの組み合わせと、マイクロサービスの思想で作られる。

システム全体を形成する要素として、例えばストレージやネットワークなど、様々なコンポーネントをKubernetes(またはコンテナ系システム)と組み合わせる際に、標準インターフェースを定義しておくことで、様々なプレイヤー(ベンダーやOSSプロジェクト)が柔軟に拡張機能を作り、連携/提供できるようになる。

そんな標準インターフェースや仕様、プロジェクトはたくさんあるので、備忘録としていくつかまとめる。

[1] CSI : Container Storage Interface


永続化ストレージの拡張用標準IF
https://kubernetes-csi.github.io/

  • KubernetesなどのContainer Orchestration Systems(CO)上のコンテナ化されたワークロードに任意のブロックおよびファイルストレージシステムを公開するための標準仕様/API
  • CSIを使用すると、サードパーティのストレージプロバイダーは、コアのKubernetesコードに触れることなく、Kubernetesで新しいストレージシステムを公開するプラグインを作成してデプロイできる
  • CSI ドライバをインストールすると、Kubernetes でネイティブにサポートされないストレージ システムがサポートされるようになる
  • CSI を使用すると、スナップショットやサイズ変更などの最新のストレージ機能を使用できる
  • Kubernetes v1.13 でGAになった

参考)

例:Amazon EKS x Amazon EFS

Amazon EFS(マネージドファイルシステム)を Amazon EKSのKubernetesクラスタから利用する場合、GitHubで公開されているEFS用のCSIドライバーをインストール(kubectl applyまたはhelm install)すると、Kubernetesクラスタ上のPodからEFSのストレージが直接利用できる

[2] CNI : Container Network Interface


コンテナのネットワーク接続用標準IF
https://github.com/containernetworking/cni

  • CoreOSが提唱し、現在はCNCFプロジェクト
  • Linuxコンテナでネットワークインターフェイスを構成するプラグインと、それを作成するための仕様とライブラリで構成されている
  • CNIは、コンテナのネットワーク接続と、コンテナが削除されたときに割り当てられたリソースの削除の役割を担う

代表的なCNIプラグイン

参考URL
- https://rancher.com/blog/2019/2019-03-21-comparing-kubernetes-cni-providers-flannel-calico-canal-and-weave/

[3] SMI : Service Mesh Interface


Kubernetesのサービスメッシュ用標準IF
https://smi-spec.io/

  • マイクロソフトやHashiCorpらが共同で発表したサービスメッシュソフトウェアの標準インターフェース
  • 最も一般的なサービスメッシュのユースケースの基本機能例
    • Traffic policy : サービス間のトラフィックに対する暗号化や認証といったポリシーの設定
    • Traffic telemetry : サービス間のエラー発生率やレイテンシといったトラフィック上重要なメトリクスの取得
    • Traffic management : サービスに対するトラフィックの切り替えといったトラフィック管理
  • SMI対応サービスメッシュプラグイン例

参考)
https://www.publickey1.jp/blog/19/hashicorpservice_mesh_interfacesmikubernetesapi.html

[4] CRI : Container Runtime Interface

Kubernetesのコンテナランタイム接続用標準IF
https://kubernetes.io/blog/2016/12/container-runtime-interface-cri-in-kubernetes/

  • CNCFが管理
  • kubeletが再コンパイルせずにさまざまなコンテナランタイムを使用できるようにするプラグインインターフェイス
  • CRIは、プロトコルバッファとgRPC API、およびライブラリで構成されている
  • CRIをサポートするHigh-Levelコンテナランタイム例

 ※Docker(dockershim + containerd)は Kubernetes v1.20以降非推奨に

[5] OCI : Open Container Initiative


コンテナイメージとランタイム標準仕様のイニシアティブ
https://opencontainers.org/

  • Linux Foundationプロジェクトの1つ
  • コンテナ仮想化の標準仕様策定を目的として設立された
  • 主に2つの仕様を策定している
    • Runtime Specification (runtime-spec) :コンテナランタイムとライフサイクル仕様
    • Image Specification (image-spec):コンテナイメージ仕様
  • High-levelランタイムとLow-levelランタイムについてはこちら

[6] Open Tracing


分散トレーシングのための標準仕様
https://opentracing.io/

  • 分散トレーシングのためのベンダ非依存のAPI仕様ライブラリを提供する
  • ライブラリ対応言語:Go, JavaScript, Java, Python, Ruby, PHP, Objective-C, C++, C#
  • Open Tracing互換の分散トレーシングツール例

[7] Operator Hub


Kubernetes Operatorの共有リポジトリ
https://operatorhub.io/

  • 検証済みのKubernetes Operatorを検索、共有できるリポジトリサービス

そもそもKubernetes Operatorとは?

https://kubernetes.io/ja/docs/concepts/extend-kubernetes/operator/

  • Kubernetes上で主にステートフルなアプリケーション(データベースなど)をパッケージ、デプロイ、管理するためのフレームワーク
  • 例えばデータベースの場合、バックアップ、障害対応、クラスタ管理、監視などの管理タスクを実装する必要があるが、そのようなオペレーションの自動化を目的とする
  • 以下のKubernetes API拡張機能をベースとしてる
    • CRD [Custom Resource Definitions]:Kubernetes APIを拡張して独自のリソース[Custom Resource]を定義する
    • Custom Controller:Custom Resourceをコントロールするためのdeclarative API(宣言的なAPI)

参考)
https://qiita.com/MahoTakara/items/af4ad8ab69c24102bd72
https://www.redhat.com/ja/topics/containers/what-is-a-kubernetes-operator
https://www.sraoss.co.jp/tech-blog/pgsql/kubernetes-postgres-operator/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Rails環境構築 with Docker

参考サイト

Docker超入門 :きよとのプログラミング大学
丁寧すぎるDocker-composeによるrails5 + MySQL on Dockerの環境構築(Docker for Mac)

環境

Mac OS
docker-compose 1.27.4
Mysql 8.0
ruby 2.7
rails 6.1.0

ファイル作成・記述

terminal.
 ~ % cd Desktop
Desktop % mkdir rails_on_docker
Desktop % cd rails_on_docker
rails_on_docker % tree  
├── Dockerfile
├── docker-compose.yml
└── src
    └── Gemfile
1 directory, 3 files
rails_on_docker % code .

docker-compose-yml

docker-compose-yml
version: '3'
# 管理するコンテナの記述
services:
  # データベース
  db:
    image: mysql:8.0
    # Mysqlの認証設定
    command: --default-authentication-plugin=mysql_native_password
    volumes:
    # ローカルのデータ:dockerのデータ 同期するための記述
      - ./src/db/mysql_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
  # rails
  web:
    # ディレクトリ直下のDockerfileを参照
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
    # ローカルのデータ:dockerのデータ 同期するための記述
      - ./src:/app
    ports:
    # ローカルのポート:dockerのポート
      - "3000:3000"
    depends_on:
    # Myaqlに接続するための記述
      - db

Dockerfile

Dockerfile
# ベースイメージの指定
FROM ruby:2.7

# 必要なライブラリのインストール
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 
#   作業ディレクトリの指定
WORKDIR /app
# ソース以下のファイルをコピー
COPY ./src /app
# rubyに必要なgemのインストール
RUN bundle config --local set path 'vendor/bundle' \
  && bundle install

Gemfile

Gemfile
# railsのgemをインストールするための雛形
source 'https://rubygems.org'

gem 'rails','~> 6.1.0'

railsのインストール

使用するコマンド

terminal.
% docker-compose run <サービス> <コマンド>

railsのインストール

terminal.
rails_on_docker % docker-compose run web rails new . --force --database=mysql  // dbをmysqlに指定しrailsのインストール --force(強制的に実行オプション)
.
.
.
Webpacker successfully installed ? ?

イメージのビルド

terminal.
rails_on_docker % docker-compose build 

新しく作成されたdatabase.ymlに追記

database.yml
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password  //記述
  host: db  //記述

データベースの作成

terminal.
rails_on_docker % docker-compose run web rails db:create  

起動

terminal.
rails_on_docker % docker-compose up

スクリーンショット 2021-01-10 15.41.57.png

まとめ

途中エラーが幾つか発生しましたが、DockerはもちろんRails,Mysqlを学ぶいい機会となりました。
次は本番環境(heroku)へのデプロイもまとめます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Picoをdockerで動かす

本記事の目的

PicoというMarkdownで記事を書くCMSをdockerで利用する。
構成は以下です。

  • PHP(php:8.0-fpm)
  • Nginx

ソース

                │  ├─filters

ディレクトリ構成

├─nginx
│  ├─Dockerfile
│  └─conf/nginx.conf
├─php
│  ├─Dockerfile
│  └─php.ini
└─src

docker-compose.yml

docker-compose.yml
version: '3'
services:
  php:
    build:
      context: ./php
      args:
        TZ: $TZ
    volumes:
      - ./src:/var/www/html/
      - ./php/php.ini:/usr/local/etc/php/conf.d/php.ini

  nginx:
    build:
      context: ./nginx
      args:
        TZ: $TZ
    ports:
      - "80:80"
    volumes:
      - ./nginx/conf:/etc/nginx/conf.d
      - ./src:/var/www/html/
    depends_on:
      - php

PHP

php/Dockerfile
FROM php:8.0-fpm
ENV DEBIAN_FRONTEND noninteractive

RUN apt-get update && apt-get install -y \
        libfreetype6-dev \
        libjpeg62-turbo-dev \
        libpng-dev \
        apt-utils \
        zip \
    && docker-php-ext-configure gd --with-freetype --with-jpeg \
    && docker-php-ext-install -j$(nproc) gd

# Timezone
ARG TZ
RUN apt-get install -y tzdata && \
    cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime && \
    echo ${TZ} > /etc/timezone

# Composer
COPY --from=composer /usr/bin/composer /usr/bin/composer

# coofiguration
COPY php.ini /usr/local/etc/php/
php/php.ini
date.timezone = "Asia/Tokyo"

Nginx

nginx/Dockerfile
FROM nginx:1.19.6

ADD conf /etc/nginx/conf.d

ARG TZ
ENV TZ ${TZ}
RUN apt-get install -y tzdata && \
    echo "${TZ}" > /etc/timezone && \
    dpkg-reconfigure -f noninteractive tzdata

RUN ln -sf /dev/stdout /var/log/nginx/access.log \
    && ln -sf /dev/stdout /var/log/nginx/error.log
nginx/conf/nginx.conf
server {
    listen 80;

    server_name _;
    root /var/www/html/pico;

    index index.php index.html;

    location ~ ^/((config|content|vendor|composer\.(json|lock|phar))(/|$)|(.+/)?\.(?!well-known(/|$))) {
        try_files /index.php$is_args$args =404;
    }

    location ~ \.php$ {
        try_files $uri =404;

        fastcgi_pass php:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include fastcgi_params;

        # Let Pico know about available URL rewriting
        fastcgi_param PICO_URL_REWRITING 1;
    }

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }
}

リポジトリ

Githubに使ったリポジトリは残しておきます。

https://github.com/daikidomon/pico-docker

ちなみにだけどPicoを使おうと思いましたがGravの方が優れていたいので今回はPicoで運用しませんでした(テヘペロ)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【初めてのチーム開発③】開発環境を共有する

<記事一覧>
【初めてのチーム開発①】仲間と一緒にHello, World!する
【初めてのチーム開発②】Dockerで環境構築する
【初めてのチーム開発③】開発環境を共有する (本記事)

前回からの続きです。
Dockerで作った開発環境を、GitHubを通じてチームメンバーに共有します!
本記事は説明用なので、手順はチームメンバー視点です。

(追記)
最近はプログラミング初学者でも、個人開発にチャレンジしたい人が増えてきたと感じてます。
ということで、初学者向けに用語やコマンドなどの説明を少し加えてみました。

手順

  1. GitHubリポジトリからcloneする
  2. Dockerインストール(未インストールの場合)
  3. Dockerコンテナ起動
  4. 作業用ブランチ作成

1. GitHubリポジトリからcloneする

clone : ファイルやディレクトリの状態をコピー

GitHubのリポジトリページにアクセスし、「Code」ボタンをクリックすると、URLが取得できます。
スクリーンショット 2021-01-10 10.13.14.png
作業ディレクトリを作成し、そこに移動します。

ターミナル
$ mkdir project_name
$ cd project_name

mkdir : ディレクトリ(≒フォルダ)作成
cd : 指定のディレクトリに移動

先ほどのURLをコピーして、ターミナルで以下のようにコマンドを打つと、現在いる場所にフォルダが作成されます。

ターミナル
$ git clone https://github.com/xxxx/xxxx.git

2. Dockerインストール

Dockerの公式ページからOSに合ったDockerをインストールします。
設定が完了したら、正しくインストールされているかターミナルで確認してください。

ターミナル
$ docker -v
Docker version 19.03.8, build afacb8b
$ docker-compose -v
docker-compose version 1.25.4, build 8d51620a

-v : バージョンを確認するオプション

3. Dockerコンテナ起動

docker-composeを使って、Dockerのコンテナを起動します。
docker-compose : 同時に複数のコンテナを操作できる便利ツール。複数のコンテナをたくさんの足で操るタコをイメージすると良き。

ターミナル
$ cd GitHubのリポジトリ名 #クローンしたフォルダに移動してください
$ docker-compose up -d

docker-compose up : コンテナ起動コマンド。
-d : バックグラウンドで起動させるオプション。

正常にコンテナを起動できたら、
localhost:3000にアクセス
→「Yay! You’re on Rails!」が表示されればOK!
スクリーンショット 2021-01-10 11.22.12.png

localhost:8080にアクセス
→「Welcome to Your Vue.js + TypeScript App」が表示されればOK!
スクリーンショット 2021-01-09 21.46.03.png

【その他よく使うコマンド (Docker)】
$ docker-compose stop : 起動中のコンテナを停止
$ docker-compose down : 起動中のコンテナを停止&削除(再度$ docker-compose up -dでコンテナ復活&起動します)
$ docker-compose ps : 起動中のコンテナを確認

4. 作業用ブランチ作成

第2回から本記事を参考にされている方は、リモートのブランチはmaindevelopの二つになっているはずです。
しかしローカルにはmainブランチだけしかありません。
ということで、ローカルブランチの状況をリモートに合わせます。
ローカル : あなたのPC上の環境。
リモート : ここではGitHub上のリポジトリのこと。

ターミナル
$ git branch #現在のローカルのブランチ確認
* main
$ git fetch #ローカルにリモートブランチの状況を反映させる
$ git branch -a #反映されたか確認
* main
  remotes/origin/HEAD -> origin/main
  remotes/origin/develop
  remotes/origin/main
$ git checkout develop #developブランチに移動
$ git branch #新しくdevelopブランチが作成されたことを確認
* develop
  main

【その他よく使うコマンド (Git)】
$ git stash : 変更を一時的に退避させる。
ブランチを切り替える際によく使う。単にcheckoutしてしまうと他ブランチに作業内容が中途半端に反映されることがある為、その予防策として。
$ git stash apply : stashした作業内容を今いるブランチに反映する。
$ git stash drop : stashした作業内容を削除する

参考サイト

Git clone から 環境構築 して プロジェクトに参加するまでの道のり(全部盛り)
チーム開発初心者のためのGitHub共有方法
Docker上にvue.jsの開発環境を構築する方法。docker-composeで簡単に作成する手順。
リモートブランチをローカルで取得する[git fetch][Sourcetree]
コミット前の内容を一時的に避けておく「git stash」の使い方
[Git] Stashコマンドを使って、ローカルの変更を一次的に退避する

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【初めてのチーム開発③】Dockerで作った開発環境を共有する

<記事一覧>
【初めてのチーム開発①】仲間と一緒にHello, World!する
【初めてのチーム開発②】Dockerで環境構築する
【初めてのチーム開発③】Dockerで作った開発環境を共有する (本記事)

前回からの続きです。
Dockerで作った開発環境を、GitHubを通じてチームメンバーに共有します!
本記事は説明用なので、手順はチームメンバー視点です。

(追記)
最近はプログラミング初学者でも、個人開発にチャレンジしたい人が増えてきたと感じてます。
ということで、初学者向けに用語やコマンドなどの説明を少し加えてみました。

手順

  1. GitHubリポジトリからcloneする
  2. Dockerインストール(未インストールの場合)
  3. Dockerコンテナ起動
  4. 作業用ブランチ作成

1. GitHubリポジトリからcloneする

clone : ファイルやディレクトリの状態をコピー

GitHubのリポジトリページにアクセスし、「Code」ボタンをクリックすると、URLが取得できます。
スクリーンショット 2021-01-10 10.13.14.png
作業ディレクトリを作成し、そこに移動します。

ターミナル
$ mkdir project_name
$ cd project_name

mkdir : ディレクトリ(≒フォルダ)作成
cd : 指定のディレクトリに移動

先ほどのURLをコピーして、ターミナルで以下のようにコマンドを打つと、現在いる場所にフォルダが作成されます。

ターミナル
$ git clone https://github.com/xxxx/xxxx.git

2. Dockerインストール

Dockerの公式ページからOSに合ったDockerをインストールします。
設定が完了したら、正しくインストールされているかターミナルで確認してください。

ターミナル
$ docker -v
Docker version 19.03.8, build afacb8b
$ docker-compose -v
docker-compose version 1.25.4, build 8d51620a

-v : バージョンを確認するオプション

3. Dockerコンテナ起動

docker-composeを使って、Dockerのコンテナを起動します。
docker-compose : 同時に複数のコンテナを操作できる便利ツール。複数のコンテナをたくさんの足で操るタコをイメージすると良き。

ターミナル
$ cd GitHubのリポジトリ名 #クローンしたフォルダに移動してください
$ docker-compose up -d

docker-compose up : コンテナ起動コマンド。
-d : バックグラウンドで起動させるオプション。

正常にコンテナを起動できたら、
localhost:3000にアクセス
→「Yay! You’re on Rails!」が表示されればOK!
スクリーンショット 2021-01-10 11.22.12.png

localhost:8080にアクセス
→「Welcome to Your Vue.js + TypeScript App」が表示されればOK!
スクリーンショット 2021-01-09 21.46.03.png

【その他よく使うコマンド (Docker)】
$ docker-compose stop : 起動中のコンテナを停止
$ docker-compose down : 起動中のコンテナを停止&削除(再度$ docker-compose up -dでコンテナ復活&起動します)
$ docker-compose ps : 起動中のコンテナを確認

4. 作業用ブランチ作成

第2回から本記事を参考にされている方は、リモートのブランチはmaindevelopの二つになっているはずです。
しかしローカルにはmainブランチだけしかありません。
ということで、ローカルブランチの状況をリモートに合わせます。
ローカル : あなたのPC上の環境。
リモート : ここではGitHub上のリポジトリのこと。

ターミナル
$ git branch #現在のローカルのブランチ確認
* main
$ git fetch #ローカルにリモートブランチの状況を反映させる
$ git branch -a #反映されたか確認
* main
  remotes/origin/HEAD -> origin/main
  remotes/origin/develop
  remotes/origin/main
$ git checkout develop #developブランチに移動
$ git branch #新しくdevelopブランチが作成されたことを確認
* develop
  main

【その他よく使うコマンド (Git)】
$ git stash : 変更を一時的に退避させる。
ブランチを切り替える際によく使う。単にcheckoutしてしまうと他ブランチに作業内容が中途半端に反映されることがある為、その予防策として。
$ git stash apply : stashした作業内容を今いるブランチに反映する。
$ git stash drop : stashした作業内容を削除する

参考サイト

Git clone から 環境構築 して プロジェクトに参加するまでの道のり(全部盛り)
チーム開発初心者のためのGitHub共有方法
Docker上にvue.jsの開発環境を構築する方法。docker-composeで簡単に作成する手順。
リモートブランチをローカルで取得する[git fetch][Sourcetree]
コミット前の内容を一時的に避けておく「git stash」の使い方
[Git] Stashコマンドを使って、ローカルの変更を一次的に退避する

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Docker 用語とコマンド

用語

Docker

必要な環境(OS,ライブラリ,アプリケーション)をパッケージ化した仮想環境(コンテナ)を作り出すことで、アプリ開発からデプロイまで簡単にできる仕組みのこと。

コンテナ

Dockerイメージをもとに作成される仮想環境の実行部分

Dockerイメージ

コンテナを作成するために必要な物を記載した雛形

Dockerレジストリ

Dockerイメージをオンライン上で保管

Dockerfile

コマンドやライブラリなど環境構築を記述

Docker Compose

複数のアプリケーションを連携し一括で管理

docler-compose.yml

一括で管理するコンテナを記述

コマンド

Dockerイメージ

イメージ作成

terminal.
% docker image build
% docker image build -t <名前空間>/<名前>:<名前> 

イメージ一覧

terminal.
% docker image ls -a 

Dockerコンテナ

コンテナ作成・起動

terminal.
% docker container run
% docker container run -p <ポート番号>:<ポート番号> --name <名前空間>/<名前>:<名前>

コンテナ一覧

terminal.
% docker container ls -a

コンテナ停止

terminal.
% docker container stop <名前>

コンテナ削除

terminal.
% docker container rm <名前>

コンテナのログを確認

terminal.
% docker container logs <名前>

Docker Compose

イメージの作成

terminal.
% docker-compose build

コンテナ作成・起動

terminal.
% docker-compose up

コンテナ停止・削除

terminal.
% docker-compose down

コンテナ一覧

terminal.
% docker-compose ps

ログを表示

terminal.
% docker-compose logs

コマンドを実行

terminal.
% docker-compose run <サービス><コマンド>

起動中のコンテナにコマンドを実行

terminal.
% docker-compose exec <サービス><コマンド>

Dockerコマンド一覧

terminal.
% docker --help
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【素人の備考録】Docker-ComposeでSSL可(自己証明書)を自動化してみた

1. はじめに

Docker-composeを用い自動的にSSL 可(自己証明書)の検証をしました。
WordPress 2セット、phpMyAdminを構築しました。
作業機器:Raspberry Pi 4 Model B OS:CentOS 8

2. 検証環境(フォルダ、ファイル)

2.1 フォルダ構成

 |---------- .env →環境ファイル
 |---------- certs
 |             server.crt、server.key →自己証明書ファイル
 |---------- docker-compose.yml
 |---------- php
 |              php.ini →wordpress設定ファイル
 |---------- ssl
 |              default-ssl.conf →SSL設定ファイル
 |---------- tmp
 |              Dockerfile-pm →phpmyadmin用
 |              Dockerfile-wp →Wordpress用

2.2 各々のファイル

.env
DBUSER=root
DBPASS=root-pass
DATABASE1=wp1-db
DATABASE2=wp2-db
DBHOST=db:3306
docker-compose.yml
version: '3.3'

services:
  db:
    image: mariadb:latest
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    container_name: mariadb
    environment:
      TZ: Asia/Tokyo
      MYSQL_ROOT_PASSWORD: ${DBPASS}

  phpmyadmin:
    depends_on:
      - db
    build:
      context: ./tmp/
      dockerfile: Dockerfile-pm
    volumes:
      - ./certs:/etc/ssl/private
      - ./ssl/default-ssl.conf:/etc/apache2/sites-available/default-ssl.conf
    ports:
      - 8243:443
    restart: always
    container_name: phpmyadmin
    environment:
      PMA_HOST: db
      TZ: Asia/Tokyo

  wordpress1:
    depends_on:
      - db
    build:
      context: ./tmp/
      dockerfile: Dockerfile-wp
    volumes:
      - ./wp1:/var/www/html
      - ./certs:/etc/ssl/private
      - ./php/php.ini:/usr/local/etc/php/conf.d/php.ini
      - ./ssl/default-ssl.conf:/etc/apache2/sites-available/default-ssl.conf
      - ./tmp:/tmp
    ports:
      - "8043:443"
    restart: always
    container_name: wordpress1
    environment:
      TZ: Asia/Tokyo
      WORDPRESS_DB_HOST: ${DBHOST}
      WORDPRESS_DB_USER: ${DBUSER}
      WORDPRESS_DB_PASSWORD: ${DBPASS}
      WORDPRESS_DB_NAME: ${DATABASE1}

  wordpress2:
    depends_on:
      - db
    build:
      context: ./tmp/
      dockerfile: Dockerfile-wp
    volumes:
      - ./wp2:/var/www/html
      - ./certs:/etc/ssl/private
      - ./php/php.ini:/usr/local/etc/php/conf.d/php.ini
      - ./ssl/default-ssl.conf:/etc/apache2/sites-available/default-ssl.conf
      - ./tmp:/tmp
    ports:
      - "8143:443"
    restart: always
    container_name: wordpress2
    environment:
      TZ: Asia/Tokyo
      WORDPRESS_DB_HOST: ${DBHOST}
      WORDPRESS_DB_USER: ${DBUSER}
      WORDPRESS_DB_PASSWORD: ${DBPASS}
      WORDPRESS_DB_NAME: ${DATABASE2}

volumes:
    db_data: {}
php.ini
post_max_size = 20M
upload_max_filesize = 20M

備考:アップロード用ファイルサイズを指定します。

default-ssl.conf
:※省略
32行 SSLCertificateFile  /etc/ssl/private/server.crt
33行 SSLCertificateKeyFile /etc/ssl/private/server.key
:※省略

備考:32行、33行のみを修正したファイルです。

Dockerfile-pm
FROM phpmyadmin:latest

RUN service apache2 start

RUN a2ensite default-ssl

RUN a2enmod ssl
Dockerfile-wp
FROM wordpress:latest

RUN service apache2 start

RUN a2ensite default-ssl

RUN a2enmod ssl

RUN chmod 777 /tmp

備考:ファイルアップロード時にtmpフォルダにアクセス権を付与している。

3. 実行します。

# docker-compose up -d
Creating network "docker_wp_default" with the default driver
Creating volume "docker_wp_db_data" with default driver
Pulling db (mariadb:latest)...
latest: Pulling from library/mariadb
a970164f39c1: Pull complete
e9c66f1fb5a2: Pull complete
94362ba2c285: Pull complete
6bcca3b8e9ae: Pull complete
4574fdafdba3: Pull complete
880d0554f10d: Pull complete
42f3039f6a26: Pull complete
84249a7eb6ff: Pull complete
d0c034fd6c1f: Pull complete
2b6de021f14a: Pull complete
0d8fa68dc283: Pull complete
675456d7859d: Pull complete
Digest: sha256:cdc553f0515a8d41264f0855120874e86761f7c69407b5cfbe49283dc195bea8
Status: Downloaded newer image for mariadb:latest
Building phpmyadmin
Step 1/4 : FROM phpmyadmin:latest
 ---> 9bd7e29f6e60
Step 2/4 : RUN service apache2 start
 ---> Running in 1053de9c2f76
Starting Apache httpd web server: apache2AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 172.17.0.2. Set the 'ServerName' directive globally to suppress this message
.
Removing intermediate container 1053de9c2f76
 ---> 68db5fb82369
Step 3/4 : RUN a2ensite default-ssl
 ---> Running in 8ddc3b6f9ecb
Enabling site default-ssl.
To activate the new configuration, you need to run:
  service apache2 reload
Removing intermediate container 8ddc3b6f9ecb
 ---> a20eb2b906ec
Step 4/4 : RUN a2enmod ssl
 ---> Running in 80cd71dbcf92
Considering dependency setenvif for ssl:
Module setenvif already enabled
Considering dependency mime for ssl:
Module mime already enabled
Considering dependency socache_shmcb for ssl:
Enabling module socache_shmcb.
Enabling module ssl.
See /usr/share/doc/apache2/README.Debian.gz on how to configure SSL and create self-signed certificates.
To activate the new configuration, you need to run:
  service apache2 restart
Removing intermediate container 80cd71dbcf92
 ---> 2e6c3e41fd0e

Successfully built 2e6c3e41fd0e
Successfully tagged docker_wp_phpmyadmin:latest
WARNING: Image for service phpmyadmin was built because it did not already exist. To rebuild this image you must use `docker-compose build` or `docker-compose up --build`.
Building wordpress1
Step 1/5 : FROM wordpress:latest
 ---> aa391b024db5
Step 2/5 : RUN service apache2 start
 ---> Running in 9f1feb98ad8b
Starting Apache httpd web server: apache2AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 172.17.0.2. Set the 'ServerName' directive globally to suppress this message
.
Removing intermediate container 9f1feb98ad8b
 ---> 519ebf0e67ca
Step 3/5 : RUN a2ensite default-ssl
 ---> Running in 6f10096df3eb
Enabling site default-ssl.
To activate the new configuration, you need to run:
  service apache2 reload
Removing intermediate container 6f10096df3eb
 ---> c0070ac57d4a
Step 4/5 : RUN a2enmod ssl
 ---> Running in 406f2cbef4cf
Considering dependency setenvif for ssl:
Module setenvif already enabled
Considering dependency mime for ssl:
Module mime already enabled
Considering dependency socache_shmcb for ssl:
Enabling module socache_shmcb.
Enabling module ssl.
See /usr/share/doc/apache2/README.Debian.gz on how to configure SSL and create self-signed certificates.
To activate the new configuration, you need to run:
  service apache2 restart
Removing intermediate container 406f2cbef4cf
 ---> bbe8093cf658
Step 5/5 : RUN chmod 777 /tmp
 ---> Running in 0d2e6a1bf658
Removing intermediate container 0d2e6a1bf658
 ---> f80f64964118

Successfully built f80f64964118
Successfully tagged docker_wp_wordpress1:latest
WARNING: Image for service wordpress1 was built because it did not already exist. To rebuild this image you must use `docker-compose build` or `docker-compose up --build`.
Building wordpress2
Step 1/5 : FROM wordpress:latest
 ---> aa391b024db5
Step 2/5 : RUN service apache2 start
 ---> Using cache
 ---> 519ebf0e67ca
Step 3/5 : RUN a2ensite default-ssl
 ---> Using cache
 ---> c0070ac57d4a
Step 4/5 : RUN a2enmod ssl
 ---> Using cache
 ---> bbe8093cf658
Step 5/5 : RUN chmod 777 /tmp
 ---> Using cache
 ---> f80f64964118

Successfully built f80f64964118
Successfully tagged docker_wp_wordpress2:latest
WARNING: Image for service wordpress2 was built because it did not already exist. To rebuild this image you must use `docker-compose build` or `docker-compose up --build`.
Creating mariadb ... done
Creating wordpress2 ... done
Creating phpmyadmin ... done
Creating wordpress1 ... done

3.1 Dockerを確認します。

# docker-compose ps
   Name                 Command               State               Ports            
-----------------------------------------------------------------------------------
mariadb      docker-entrypoint.sh mysqld      Up      3306/tcp                     
phpmyadmin   /docker-entrypoint.sh apac ...   Up      0.0.0.0:8243->443/tcp, 80/tcp
wordpress1   docker-entrypoint.sh apach ...   Up      0.0.0.0:8043->443/tcp, 80/tcp
wordpress2   docker-entrypoint.sh apach ...   Up      0.0.0.0:8143->443/tcp, 80/tcp

3.2 Dockerイメージを確認します。

# docker images
REPOSITORY             TAG                     IMAGE ID       CREATED              SIZE
docker_wp_wordpress1   latest                  f80f64964118   About a minute ago   494MB
docker_wp_wordpress2   latest                  f80f64964118   About a minute ago   494MB
docker_wp_phpmyadmin   latest                  2e6c3e41fd0e   About a minute ago   430MB

備考:実行中のWARNING: Image for service wordpress2 was built because it did not already exist. に関係していると思われるが?

docker-ssl.png

後書き

Docker-composeとDockerを組み合わせて検証した。SSL可はDockerにインストールされているApacheに対してであった。この方法はあくまで自己検証です!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

(自分用)dockerでブラウザから触れるIDEの構築(お試し)

はじめに

それまでは知らなかったんですがこの記事
jupyterlabの存在を知ってからWebIDEに興味を持ったので
ちょっとdockerで試してみようと思います。

環境

以下の環境でやっていきます。

  • Ubuntu20.04
  • Docker Version 20.10.1
  • docker-compose Version 1.25.0

事前準備

mkdir web-ide
mkdir web-ide/cloud9
mkdir web-ide/jupyter-lab
mkdir web-ide/eclipse-che
mkdir web-ide/code-server

Cloud9

docker-hubで探しているとかなり新しくてpull数も多いものがあったので
それを使います。

cd web-ide/cloud9

touch docker-compose.yml
# docker-compose.ymlを編集
gedit docker-compose.yml

mkdir code
mkdir docker.sock

docker-compose.ymlはこんな感じにしておきます。

docker-compose.yml
version: "2.1"
services:
  cloud9:
    image: linuxserver/cloud9:python
    container_name: cloud9
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Asia/Tokyo
      - GITURL=https://github.com/linuxserver/docker-cloud9.git #optional
      - USERNAME=user #optional
      - PASSWORD=password #optional
    volumes:
      - ./code:/code #optional
      - ./docker.sock:/var/run/docker.sock #optional
    ports:
      - 10000:8000
    restart: unless-stopped

起動します。
docker-compose up -d

ブラウザからアクセスしてみます。
image.png
ymlで設定しておいたuserとpasswordを入れるとアクセスできました。

tagはpythonにしましたがRunnerはこれだけ入っている?みたいです。
image.png

bashからは実行できましたがRunからはなぜかpythonが実行できませんでした。。。
image.png

Runnerの設定が何か違うのでしょうか?
とりあえずお試しなのでヨシ!とします。
image.png

追記

Runnerを追加して、cmdの箇所を以下のようにするとpythonでもRunできました。

python3.run
// This file overrides the built-in Python runner
// For more information see http://docs.c9.io:8080/#!/api/run-method-run
{
  "cmd": [
--- "$python",
+++ "python3",
    "$file",
    "$args"
  ],
  "selector": "^.*\\.(python|py)$",
  "env": {
    "PYTHONPATH": "$python_path"
  }
}

C++は実行できました。
image.png

参考URL:
linuxserver/cloud9
docker+alpine+cloud9で最速・最軽量IDE環境を用意する
オンラインIDEを無料で作ろう

code-server

cd /web-ide/code-server
mkdir projects
mkdir code-server
touch Dockerfile
touch docker-compose.yml

Dockerfileとdocker-compose.ymlは以下になります。
簡単にpython3をinstallしています。

Dockerfile
FROM codercom/code-server:latest

USER root

RUN apt-get update && apt-get install -y \
    python3

USER coder
docker-compose.yml
version: "3"
services:
  code:
    build:
      context: .
      dockerfile: Dockerfile
    restart: always
    environment:
      PASSWORD: password
    ports:
      - 30001:8080
    volumes:
      - ./projects:/home/coder/project
      - ./code-server:/home/coder/.local/share/code-server

ブラウザからアクセスしてみます。
image.png
ymlで設定しておいたpasswordを入れるとアクセスできました。

ターミナルからpythonを実行します。

python3 test.py

image.png
※venv入れてなかったので後から入れてます。

pythonは動きましたがdebugの仕方がよくわからない。。。
通常のvscode同様lanuch.jsonがあれば出来そうだけど
設定がよくわからない。
デバッガーなしでもブラウザベースでここまで使えるならちょっとした開発なら全然使えそうです。

Dockerで作る、最強の移動型開発環境
code-server 構築の茨の道と、その近道
自宅サーバーで Docker + Nginx + code-serverを動かそうとした話
codercom/code-server
VISUAL STUDIO CODEのCODE SERVERを構築してブラウザからアクセスしてみる

Jupyter Lab

以下の記事を参考に。
言語のお試しであれば間違いなくこれ一択ですかね。
アプリ開発はちょっとよくわからないですが、頑張ればいけるのかもしれないですね。
17言語をぶち込んだJupyter LabのDockerイメージを作ってみた
HeRoMo/jupyter-langs
(自分用) jupyterlabで色々な言語とC#も実行できるようにする
mototoke/jupyter-langs

eclipse-che

うまく構築できなかったので割愛します。
悲しみ。

総評

ちょっとしか触っていませんが個人的な操作感としてはcloud9が気に入りました。
code-serverはほぼvscodeなので普段使いと変わらないのですがターミナルのインテリセンスが効かなかったのがちょっとう~んって感じでした。
それ以外は言うことなし。
eclisep-cheは触れませんでしたがプロジェクトのtemplateが使えるみたいなのでけっこう良さそうです。
何れにしても一つのサーバー立てておいてブラウザだけで開発できるのは素晴らしいの一言に尽きますね。
今度何かの機会があれば使ってみようと思いました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Docker for Mac上でのunittestを高速化した話

概要

自作したdocker環境があまりにも遅かったので高速化しました

結論としては
ボリュームマウントに大量の読み書きを走らせない
のが最も効果がありました

前提

環境

  • MacOS Mojave バージョン 10.14.6
  • Docker version 20.10.2 build 2291f61
    • php:5.5-apache
    • mysql:5.6
    • redis:2.8.23
    • memcached:1.4.39

unittest内容

  1. gitで指定のブランチにチェックアウト
  2. pipでのパッケージインストール
  3. composerでのパッケージインストール
  4. sqlファイルをDBに投入してのフォーマットチェック
  5. テスト用データをDBに投入
  6. phpコードのフォーマットチェック
  7. phpのunittest(DB/Redis/Memcachedアクセスあり)

効果

ホストマシン上で実行した場合:20分
効率化前:1時間
効率化後:20分

対応策

ボリュームマウントにdelegated/cachedを付けた

https://docs.docker.jp/docker-for-mac/osxfs-caching.html

docker for Macではボリュームマウントに設定されたファイルアクセスが非常に遅いらしく
ホストマシンとコンテナ内で整合性を担保しないかわりに高速化するオプションだそうです

これだけでは体感できるほど高速化できませんでした

ボリュームマウントに巨大なファイルを渡すのをやめた

git管理のプロジェクトコードが巨大なので
ボリュームマウントに設定するのではなくコンテナにCOPYした

これでunittestがかなり早くなり
ホストマシン上で動かすのと大差ない状態になりました

結論

ボリュームマウントに大量の読み書きを走らせない

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む