20200414のdockerに関する記事は10件です。

投稿日：2020-04-14T20:07:52+09:00

初心者のKubernetes入門（書籍 Kubernetes 実践入門の写経から学ぶ）操作編

背景

個人的にインフラの知識以上にこれからのアプリケーションが動く環境を作ってデプロイしたりしてこれからの知識を身に着けたい。そしてより一層、自分の知識のアップデートをしたいと思いました。

その中でこの本に出会い、これから少しずつやったことを残し、未来の自分への手紙としてもあり、見つめ直せればと思いました。

引用や参考と今回の自分の勉強用の書籍の紹介

技術評論社『Kubernetes実践入門』のサンプルコード
 Kubernetes実践入門プロダクションレディなコンテナ＆アプリケーションの作り方


実際の学びについて

書籍を読みながら、章ごとに少しずつ進めていきたいと思います。
GitHub のソースコードも使いながら学んで行きたいと思います。
この章の勉強は本当に書籍の写経が主になるかもしれません・・・

勉強開始

Kubectl create deployment でアプリケーションをデプロイする
$ kubectl create deployment mattermost-preview --image k8spracticalguide/mattermost-preview:4.10.2
deployment.apps/mattermost-preview created
実行確認
$ kubectl get deployment mattermost-preview
NAME                 READY   UP-TO-DATE   AVAILABLE   AGE
mattermost-preview   0/1     1            0           49s
$ kubectl describe deployment mattermost-preview
Name:                   mattermost-preview
Namespace:              default
CreationTimestamp:      Mon, 13 Apr 2020 20:59:52 +0900
Labels:                 app=mattermost-preview
Annotations:            deployment.kubernetes.io/revision: 1
Selector:               app=mattermost-preview
Replicas:               1 desired | 1 updated | 1 total | 1 available | 0 unavailable
StrategyType:           RollingUpdate
MinReadySeconds:        0
RollingUpdateStrategy:  25% max unavailable, 25% max surge
Pod Template:
  Labels:  app=mattermost-preview
  Containers:
   mattermost-preview:
    Image:        k8spracticalguide/mattermost-preview:4.10.2
    Port:         <none>
    Host Port:    <none>
    Environment:  <none>
    Mounts:       <none>
  Volumes:        <none>
Conditions:
  Type           Status  Reason
  ----           ------  ------
  Available      True    MinimumReplicasAvailable
  Progressing    True    NewReplicaSetAvailable
OldReplicaSets:  <none>
NewReplicaSet:   mattermost-preview-78bc8686ff (1/1 replicas created)
Events:
  Type    Reason             Age   From                   Message
  ----    ------             ----  ----                   -------
  Normal  ScalingReplicaSet  64s   deployment-controller  Scaled up replica set mattermost-preview-78bc8686ff to 1
kubectl expose アプリケーションを公開する
$ kubectl expose --type NodePort --port 8065 deployment mattermost-preview
service/mattermost-preview exposed
実行確認
$ kubectl get service
NAME                 TYPE        CLUSTER-IP       EXTERNAL-IP   PORT(S)          AGE
kubernetes           ClusterIP   10.96.0.1        <none>        443/TCP          31d
mattermost-preview   NodePort    10.103.143.104   <none>        8065:30355/TCP   8m44s
my-svc               ClusterIP   10.101.221.192   <none>        8080/TCP         47h
ブラウザアクセス確認

http://localhost:30355

次は 3.2 章をやっていきます。

Kubernetes の API で操作を体験する形で勉強していきます

最後に

今回は、コマンドで Deploy してアプリケーションにアクセスできるところまで確認しました。

ちょっとハマったところ

URLアクセスするアドレスがわからず、Google 検索する羽目に・・・
URLアクセスは自分で試している場合は、localhost で覚えてよいのだろうか？？？？

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-14T18:16:19+09:00

.yamlとは

構造化されたデータの表現⽅法
xmlやmarkdownのように簡易的な記法。
DockerやRubyでよく見かける

用法

各種設定ファイル

ログファイル

データ交換用のフォーマット

特徴

読みやすく書きやすい

インデントでデータ構造を表す

スペースや改行に気をつけないとすぐエラーになる

ハッシュ・配列・スカラーの三種類の組み合わせでデータを表現する

※スカラー…値。⽂字列や数値、真偽値など

ハッシュ形式
name: puku
address: Tokyo
#出力： {"name"=>"puku", "address"=>"Tokyo"}
配列形式
- apple
- banana
- lemon
#出力： ["apple", "banana", "lemon"]

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-14T17:19:55+09:00

③Docker MYSQLにデモデータ(seed_fu)を投入する!(2020.4時点)

1.これからDocker導入します、という方は、まず、こちらを見ていただけると幸いです。

①Dockerを初めて導入して基本操作する (2020.4時点)
　　https://qiita.com/SakagamiKeisuke/items/4455631886b1c15a3b69

前回までのおさらい　

②Dockerを初めて導入してRails sする (2020.4時点)
　　https://qiita.com/SakagamiKeisuke/items/d64ee54c22378223659a

当方、デモデータの投入についてはdb:seed_fuを使用しして開発しております。
Docker環境においてもMYSQLイメージ内にdb:seed_fuでデモデータを投入する作業を進めます。

2.前提

Docker for Macアプリをインストールしている
Dockerサービスが起動している
DockerHubでサインインしている
VSCodeで編集
ターミナル使用
Sequelpro使用(なくてもなんとかなります)

<環境>
macOS : Catalina 10.15.3
Docker version : 19.03.8
ruby : 2.5.1
Rails : 5.2.4.1
MYSQL :5.6

3.DockerコンテナのMYSQLイメージが稼働しているか確認する

”docker-compose up している状態”を保持しつつ、
別ウインドウで新しいターミナルを開いてローカルのアプリディレクトリに移動(cd)します
(アプリファイルを置いている場所はみなさん違いますので参考です）
ターミナル
 % cd nomadcafe  
Docker ps で起動しているコンテナを調べます。
ターミナル
docker ps
するとこんな感じになります。

webコンテナとdbコンテナ両方とも STATUS ”Up” になっています。

Dockerのdbコンテナの中に入っていきます。
ターミナル
docker exec -i -t [コンテナID] bash  (カッコは要りません)
dbコンテナのIDを入力します。
ターミナル
 docker exec -i -t ed494a77942a bash
root@ed494a77942a:/#　←これが出てきたら、dbコンテナに入った状態です。

MYSQLにアクセスします。
ターミナル
mysql -u root -p
MYSQLの中のデータベースを一覧表示します。
ターミナル
mysql> show databases;
こんな感じです。

Mysqlやアプリのdevelopmentやtestがありました！

データベースのうち、nomadcafe_development にアクセスします。
ターミナル
mysql> use nomadcafe_development
Database changed　が出ればOKです。

nomadcafe_development のテーブルを一覧表示します。
ターミナル
mysql> SHOW TABLES;
こんな感じです。

Docker MYSQLイメージにマイグレーションしたテーブルがちゃんと存在していました！

4.Docker環境で、Railsコマンド「rake db:seed_fu」でデモデータを投入する

当方のアプリは、多めのデモデータを投入しておく必要があり「db:seed_fu」を使用しています。

docker-compose.yml にrailsコマンド実行を記述します。
docker-compose.yml
    command: bash -c "bundle exec rake db:seed_fu && /bin/bash"
このへんに書いておきます。（rails sより下に書いたらうまくいきませんでした。）

この方法が妥当かどうか、正直、理解度が足りずわかりませんが、後々わかれば是正してきます。

docker-compose up --build します。
ターミナル
docker-compose up --build            
localhost:3000にアクセスします。

無事、each文のボタン表示、dbデータ取得表示ができています。
Showページのdbデータ取得表示もできています。

5.コンテナのMYSQLにデモデータ投入ができているか確認する

ブラウザでできていることは分かったのですが、念のためdbコンテナのMYSQLを確認します。
ターミナル
docker ps
コンテナIDを調べます。dbコンテナは 794f16c1d24d になります。

dbコンテナに入ります。
ターミナル
docker exec -it 794f16c1d24d bash
dbコンテナのMYSQLにアクセスします。
ターミナル
mysql -u root -p
こんな感じです。

データベースを一覧表示します。
ターミナル
mysql> show databases;
アプリ”nomadcafe_development”のデータベースにアクセスします。
ターミナル
mysql> use nomadcafe_development
Database changed　が出たらOKです。

テーブルを一覧表示します。
ターミナル
mysql> SHOW TABLES;
こんな感じです。

shopsテーブルの中を確認します。
ターミナル
mysql> SELECT * FROM shops;  
無事、shopテーブルにデモデータが投入されていました!

ですが、日本語が？で表示されてわからない状態になっています。（汗）
ブラウザでは問題なかったので、MYSQL表示の設定ではないかと思われます。

6.DockerのMYSQLイメージを日本語化する

DockerのMYSQL設定を確認します。
ターミナル
mysql> status
こんな感じです。

latin1とあります、utf8に変えて日本語設定します。

ローカルで「my.cof」ファイルを新規作成し日本語設定の記述をします。
my.conf
[mysqld]
character-set-server=utf8
collation-server=utf8_general_ci

[client]
default-character-set=utf8
こんな感じです。

続いて、docker-compose.ymlファイルの、db、volumesを編集します。

ローカルのmy.cnfファイルを DockerのMYSQLイメージの /etc/mysql/conf.d/my.cnfディレクトにマウント（同期）します、という記述です。
docker-compose.yml
  db:
    image: mysql:5.6
    volumes:
      - ./my.cnf:/etc/mysql/conf.d/my.cnf    ←追記します
こんな感じです。

改めて、起動します。
ターミナル
docker-compose up --build
dbコンテナのMYSQLに入り、データベースのテーブルを確認します。
（同じ手順ですのでコマンドのみ書きます）
ターミナル
docker ps

docker exec -i -t CONTAINER ID bash

 mysql -u root -p

use nomadcafe_development

 SELECT * FROM shops;   
無事、日本語表示が成功しました！

ちなみに、
SequelProでDockerコンテナのMYSQLイメージに接続すると、簡単にテーブルを確認したり操作できます！

7.SequelProでDocker MYSQLイメージに接続する

Docker-compose.ymlファイルの設定を見ておきます。

SequelProを開きアクセスするための入力をします。
・ホストは「127.0.0.1」　にします
・ユーザー名は　「root」　にしています
・パスワードは　「Docker-compose.ymlで書いたパスワード　」　です
・ポートは　「4306　Docker-compose.ymlで書いた左側のポート番号」　です

こんな感じです。

すると、このようにデータベースにアクセスできます！

8.参考になった記事一覧です。（ありがとうございす！）

【MySQL, SQL】データベースを扱う基本SQL一覧https://qiita.com/knife0125/items/bb095a85d1a5d3c8f706
コマンドはdocker-compose.ymlとDockerfileのどちらで定義するほうがいい？
docker-compose.ymlの書き方について解説してみたhttps://qiita.com/yuta-ushijima/items/d3d98177e1b28f736f04
【Rails seedsでdocker起動時に初期データを登録する。データの重複はfirst_or_createで防ぐ】https://qiita.com/clbcl226/items/a6efd9035e0141251cf1
【Docker】Dockerでホストのディレクトリをマウントするhttps://qiita.com/Yarimizu14/items/52f4859027165a805630
Dockerで立ち上げたMySQLにログインすると日本語が文字化けhttps://qiita.com/luccafort/items/0553c589dcc6459746bc
DockerのMySQLコンテナにSequelProで接続するhttps://qiita.com/y_u_y_a/items/f30019316a1bd738437c

9.最後に

当方、 実務未経験＋初学者＋テッ○キャンプ卒業＋転職活動中であります。
もし、間違い等ございましたらご教示いただけるとありがたいです。

たくさんの先輩方のQiita記事でコードを見合わせできたり、エラー解決記事があったおかげで、ここまで実装できました。 記事を投稿してくださった先輩方に感謝しております。

この先も本番環境でのdocker実装に向けて進みつつ、わかりやすい記事を寄稿していきたいと考えています

ローカル・Dockerで開発環境を整えるまでの続編

④ローカルDocker環境でデータ永続化、entrypointでseed_fuをやり直しする(2020.4.時点)
　　https://qiita.com/SakagamiKeisuke/items/8d3fc70a2939cd4bbe3e

こちらも続けて見ていただけると流れがわかると思います。

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-14T16:04:34+09:00

【Docker】docker-composeコマンドを実行するまで

概要

docker-composeを実行するまでにいろいろ困ったので備忘録的に残しておこうと思います。

1. docker-compose: Command not found

docker-composeコマンドがないよと言われました。
今回の旅の始まりです。

2. curl: option -s-uname: is unknown

docker-compose をインストールするために、下記コマンドを実行するのですが
$ curl -L https://github.com/docker/compose/releases/download/1.3.1/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
curl: option -s`-`uname: is unknown
curl: try 'curl --help' or 'curl --manual' for more information
などと言われます。
仕方ないので、個別で uname -s と uname -m を実行し、埋め込みました。
$ curl -L https://github.com/docker/compose/releases/download/1.3.1/docker-compose-Darwin-x86_64 > /usr/local/bin/docker-compose
無事成功。
chmod +x /usr/local/bin/docker-compose
続いて、こちらも成功します。

3. pip: Command not found

pipがないと言われました。
どうせ、brewでinstall出来るだろと叩いてみると
$ brew install pip
pipはpythonの中にあるでと言われました。
しかし、pythonは既にインストールしている！

versionを調べてみると
$ python --version
2.7.16
古い！

pipは3.4以降に付属されているので入っていなかったと言うわけです。

4. pipが古い！

pyenvをインストールします。
$ brew install pyenv
$ pyenv install 3.7.7
$ python global 3.7.7
$ eval "$(pyenv init -)"
無事、更新出来たのでpipが入っていました。

ここで
$ sudo pip install -U docker-compose
でインストールできるのですが、最後に
WARNING: You are using pip version 19.2.3, however version 20.0.2 is available.
You should consider upgrading via the 'pip install --upgrade pip' command.
と出たのでpipをupgradeしておしまい。
ちょい長かった。。。

参考にした記事

https://www.shibuya24.info/entry/docker_compose
https://qiita.com/Kohey222/items/19eb9b3cbcec9b176625

誰かのお役に立てば。

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-14T12:40:01+09:00

Windows10 にDocker Toolboxをインストールしてみた

前提

個人的学習

Windows10でDockerを使ってみたい

いづれは開発用メインとして扱いたい

既にoracleの仮想環境ソフトは入れてあります。

gitも入れてあります。

環境メモ

Windows10 Home メモリ8GB 64bit

Docker導入前知識メモ

Docker Toolboxには、次のDockerツールが含まれています。

Docker Engineを実行してイメージとコンテナーを作成するDocker CLIクライアント

Docker Machineにより、Windows端末からDocker Engineコマンドを実行できます

docker-composeコマンドを実行するためのDocker Compose

Kitematic、Docker GUI

Dockerコマンドライン環境用に事前設定されたDocker QuickStartシェル Oracle VM VirtualBox

Docker EngineデーモンはLinux固有のカーネル機能を使用するため、WindowsでネイティブにDocker Engineを実行することができません。

代わりに、Docker Machineコマンドを使用して、docker-machineマシン上に小さなLinux VMを作成して接続する必要。このVMは、Windowsシステム上でDocker Engineをホストします。

インストール手順メモ

ステップ1：バージョンを確認する

Dockerを実行するには、ご使用のマシンにWindows 7以降を実行する64ビットオペレーティングシステムが必要です。さらに、仮想化がマシンで有効になっていることを確認する必要があります。マシンがこれらの要件を満たしていることを確認するには、次の手順を実行します。

Windowsメッセージを右クリックし、[ システム ]を選択します。

サポートされているバージョンを使用していない場合は、オペレーティングシステムのアップグレードを検討してください。

Windowsシステムがハードウェア仮想化テクノロジをサポートし、仮想化が有効になっていることを確認します。

ステップ2：Docker Toolboxをインストールする

Docker Toolboxソフトウェアといくつかの「ヘルパー」アプリケーションをインストールします。インストールにより、次のソフトウェアがマシンに追加されます。

Windows用Dockerクライアント

Docker Toolbox管理ツールとISO

Oracle VM VirtualBox

Git MSYS-git UNIXツール

注意

1

以前のバージョンのVirtualBoxがインストールされている場合は、Docker Toolboxインストーラーで再インストールしないでください。プロンプトが表示されたら、チェックを外します。

2

Virtual Boxを実行している場合は、インストーラーを実行する前にそれをシャットダウンする必要があります。

Docker Toolboxの最新バージョンをダウンロードするには、Toolbox Releasesにアクセスして最新の.exeファイルをダウンロードします。

https://github.com/docker/toolbox/releases

インストーラーをダブルクリックしてDocker Toolboxをインストールします。

インストーラーは「セットアップ-Dockerツールボックス」ダイアログを起動します。

プログラムに変更を加えることを許可するように求めるWindowsセキュリティダイアログが表示された場合は、[ はい]を選択します。システムにより、セットアップ-Docker Toolbox for Windowsウィザードが表示されます。

ステップ3：インストールを確認する

インストーラーは、Docker Toolbox、VirtualBox、およびKitematicをアプリケーションフォルダーに追加します。このステップでは、Docker Toolboxを起動して、簡単なDockerコマンドを実行します。

↑ のアイコンから起動

Docker QuickStartアイコンをクリックして、事前設定されたDocker Toolboxターミナルを起動します。

システムがユーザーアカウント制御プロンプトを表示して、VirtualBoxがコンピューターに変更を加えることを許可する場合。はいを選択します。

ターミナルは、Docker Toolboxをセットアップするためにいくつかのことを行います。完了すると、ターミナルに$プロンプトが表示されます。

システムがユーザーアカウント制御プロンプトを表示して、VirtualBoxがコンピューターに変更を加えることを許可する場合。はいを選択します。

ターミナルは、Docker Toolboxをセットアップするためにいくつかのことを行います。完了すると、ターミナルに$プロンプトが表示されます。

端末bashは、標準のWindowsコマンドプロンプトの代わりに特別な環境を実行します。bash環境がドッカーによって必要とされます。

プロンプトの横にあるマウスをクリックして、ターミナルをアクティブにします。

次のコマンドを入力してRETURNキーを押します。
$ docker run hello-world
参考

https://docs.docker.com/toolbox/toolbox_install_windows/

所感

初回起動長かった、、

Hyper-VがHomeでは使えないのでOracleVM使用

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-14T11:59:01+09:00

コーディング未経験のPO/PdMのためのRails on Dockerハンズオン、Rails on Dockerハンズオン vol.15 - Deploy to Heroku

はじめに

こんにちは！

今回は実際にここまで作ったアプリケーションをデプロイして公開してみます！
Herokuというサービスを使って、今まで開発してきたアプリケーションをデプロイしてみます。

ちなみに今回のハンズオンではGitコマンドを使用します（Herokuにソースコードをアップロードするときに使う）。各自の環境に合わせてGitコマンドをインストールしてから進んでください！（ググって！）

前回のソースコード

今回使うソースコードです（今まで作ってきたアプリです）。今回はこれをデプロイしていきますので、お手元にアプリがない方はこちらからダウンロードしてください。

https://github.com/at946/rails_on_docker_handson/tree/vol.14

Heroku

アプリを公開するには、サーバーが必要ですね。今ではサーバーも物理的にサーバーを用意するのではなくAWS、Azure、GCPなどのクラウドサービスのIaaSを利用して用意するのが一般的になってきているかと思います。
HerokuはIaaSのもう一段上のPaaSに位置付けられるサービスです。
IaaS的なサーバーの利用はもちろん、アドオンとしてデータベースやCDNなどのサービスを簡易に利用できたり、ソースコードからビルド・デプロイを簡単に行なってくれたり（ビルドパック）、IaaS+αなことを提供してくれます。
時間などの制約などはありますが、個人の開発者でも無料でアプリケーションを公開できたりするのもオススメポイントです。
Herokuに関しては公式ドキュメントも整っていますし、色々な方が記事を書いたりしているので、この記事での説明はこのくらいにしておきましょう。

では実際にHerokuにアプリケーションをデプロイしていきます！

システム構成

HerokuではDynoと呼ばれるコンテナにアプリケーションをデプロイすることができます。
コンテナといっても今まで開発してきたようにDockerfileを書いてdocker-compose.ymlを書いてというようなことは必要ありません。（似たようなファイルを書くことで意図した通りのデプロイをさせる方法などはありますが、今回はスコープ外とします。）
今まで作ってきたRailsアプリケーションは、Dyno上で動作させましょう。

また、ここまでPostgreSQLをDockerコンテナで起動させてきました。
こちらはHerokuのアドオンとして、Heroku Postgresが用意されているのでこちらを利用しましょう。
Heroku Postgresも容量の制約はありますが無料でも利用が可能です。

Herokuアカウントを作成する

さて、では実際にデプロイを始めていきましょう。
まずはHerokuアカウントを作成します。サインアップページからアカウントを作成してみてください。

Heroku CLIをインストールする

コマンドラインからHeroku操作をするために公式インストールサイトからHeroku CLIをインストールしましょう。

Heroku CLIでログインする
$ heroku login
heroku: Press any key to open up the browser to login or q to exit:
でサインインページがブラウザで開くと思うので、先ほど作ったアカウントでサインインしてください。
コマンドライン側に以下の表示が出ていればサインイン成功です！
Logged in as [アカウントのメールアドレス]
Gitを使えるようにしておく

Herokuにデプロイする際はHerokuで用意してくれるGitレポジトリにアプリをpushします。
なので、Gitを使える準備をしておく必要があります。もし現段階でGitリポジトリを作成していない場合は、ローカルレポジトリを作っておきましょう。
$ git init
Heroku Appを作成する

まずHerokuでAppを作ります。ワークスペースみたいなものですね。
Appの名前はサブドメインにも使われるので、お好みの名前を指定してあげるといいです。ただし、他のアカウントも含めて重複は許されないのでかぶっちゃった時は諦めましょう。
$ heroku create test-app
test-appがアプリ名です。アプリ名をつけないとHerokuが適当な名前をつけちゃうのでちゃんとつけてあげてくださいね。

Heroku Add-onsのPostgresを追加する

Railsアプリケーションが使うPostgresをHeroku Add-onsから追加します。
今回は無料で済ませたいのでhobby-devプランを使います。
$ heroku addons:create heroku-postgresql:hobby-dev
Herokuにアプリをデプロイする

先ほどもお話した通り、HerokuへのデプロイはHerokuのGitリポジトリにソースコードをpushするだけです。
リモートリポジトリの情報は先ほどheroku createをした時にherokuという名前で登録されています。

前回のソースコードからソースコードをダウンロードしている場合は、ローカルブランチがvol.14になっている思います。（これはgit branchコマンドで確認できます。）
Herokuのmasterブランチにpushするために、ローカルブランチもmasterに切り替えてあげましょう。
$ git checkout -b master
そして、pushします。
$ git add .
$ git commit -m "First Commit"
$ git push heroku master

Enumerating objects: 300, done.
Counting objects: 100% (300/300), done.
Delta compression using up to 8 threads
Compressing objects: 100% (191/191), done.
Writing objects: 100% (300/300), 305.11 KiB | 30.51 MiB/s, done.
Total 300 (delta 108), reused 241 (delta 82)
remote: Compressing source files... done.
remote: Building source:
remote:
remote:  !     Warning: Multiple default buildpacks reported the ability to handle this app. The first buildpack in the list below will be used.
remote:             Detected buildpacks: Ruby,Node.js
remote:             See https://devcenter.heroku.com/articles/buildpacks#buildpack-detect-order
remote: -----> Ruby app detected
remote: -----> Installing bundler 1.17.3
remote: -----> Removing BUNDLED WITH version in the Gemfile.lock
remote: -----> Compiling Ruby/Rails
remote: -----> Using Ruby version: ruby-2.6.5
remote: -----> Installing dependencies using bundler 1.17.3
remote:        Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
remote:        The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
remote:        Fetching gem metadata from https://rubygems.org/............
remote:        Fetching rake 13.0.1
remote:        Installing rake 13.0.1
remote:        Fetching concurrent-ruby 1.1.6
...
remote: -----> Compressing...
remote:        Done: 92.2M
remote: -----> Launching...
remote:        Released v6
remote:        https://test-app.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/test-app.git
 * [new branch]      master -> master
なんかいろいろログが出てきますが、注目は『Ruby app detected』や『Compiling Ruby/Rails』ですね。
HerokuのGitレポジトリにpushした段階でビルドパックが作動しています。
ソースコードから勝手に「Ruby使ってますよね？Railsですよね？ビルドしてデプロイしときますね！」という感じで勝手にビルド＆デプロイしてくれます。

最後の方に「https://test-app.herokuapp.com/ deployed to Heroku」とありますね。
このURLでデプロイしたよ、ということです。

デプロイされたところでDBをマイグレートしてあげます。
$ heroku run rails db:migrate
このようにheroku runコマンドをつけることでpushしたアプリを起動してコマンドを発行します。
正確にはOne-Off Dynosが使われているみたいなので、今WebからアクセスできるDynosとは別にコマンド発行用に一時的に起動されているみたいです。（なのでログファイルとかを見るようではない）

ここまで完了したら先ほどデプロイしたよと言われたURL（https://test-app.herokuapp.com/）にアクセスしてみましょう。

お、デプロイされとる。動く、動くぞ。
ちょっといろいろと触ってみましょう。今までコーディングしてきた機能がちゃんと動くなっているはずです。

デプロイできました。クソほど簡単でした。

まとめ

今回はここまでで終了です！
いままで作ってきたアプリをHerokuにデプロイすることができました！

そういえば、HerokuはGitHubとの連携がいい感じらしいです。GitHubにpushしたらHerokuに自動でデプロイするように設定したりできるってことですね。
GitHubにはCIツールのGitHub Actionsがあったりもするので、テストコードをパスしたらHerokuにデプロイみたいなことも意外と簡単にできるのかも（やったことない）。
もちろん他のGitサービスやCI/CDサービスでもできます。僕はGitlab CI使ってやってましたー。

ここまででDocker上でRailsアプリを開発する環境を作って、TDDでコーディングをして、Herokuにデプロイする、という一連の流れを体験できましたね！
あとは自分の作りたいものを作ってみるのが一番勉強になります！走り出す準備はできたはず！あとはひたすらに作って調べて作って調べてたまに記事とか書いてアウトプットして！開発を楽しみましょう！本業も忘れずに！

次回はチャレンジング！僕も勉強中なんですが、せっかくDockerをやってきたのでKubernetesだとどうやってデプロイ・公開できるの？というのを体験してみたいと思います！「こいつ、動くぞ！」

ではまた次回！

後片付け

今回はHerokuアプリをデプロイしたままになっちゃっているのでちゃんと後片付けしましょう。

まずHeroku Appを削除しちゃいます。
$ heroku apps:destroy --app test-app --confirm test-app
これでAdd-onsも含めて削除されました。
Herokuアカウントもいらない場合はWebサイトのダッシュボードから削除できます。詳しくは公式サイトを。

本日のソースコード

本日は特にソースコードを更新していないので、ないです。

Other Hands-on Links

https://github.com/at946/rails_on_docker_handson/tree/master

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-14T11:51:58+09:00

SSL証明書接続が必要な PostgresQL サーバーを docker-compose で立ち上げる

探してもあまり出てこなかったので、構築の記録を記します。
今回紹介するのは docker 本来の使い方である immutable な使い方ではありませんので、ご注意を。

参考

こちらの記事を参考にしました。

https://www.gab.lc/articles/postgresql_with_ssl/

環境

Ubuntu 18.04.4 LTS

Docker CE

docker-compose

nano や cp を使いますが、特に記述がない場合は docker-compose が置いてあるフォルダからの相対パスだとお考え下さい。

docker-compose

適当なフォルダを作成し、以下の2つのファイルを配置します。
docker-compose.yaml
version: "3.5"
services:
  db:
    image: postgres:12.2
    container_name: db
    ports:
      - 5432:5432
    env_file:
      - postgres.env
    tty: true
    restart: always
    volumes:
      - ./pgdata:/var/lib/postgresql/data
起動すると、同じフォルダの中に pgdata というフォルダができ、その中に postgres のデータが入って来ます。
postgres.env
POSTGRES_USER=postgres
POSTGRES_PASSWORD=password
postgres.env は、docker-compose.yaml の中にシークレットを保存しておきたくなかったので外持ちにしています。一度立ち上げて、 pgdata にデータが出来た後は消して問題ありません。

ファイルを用意したら、立ち上げます。
docker-compose up -d
証明書作成

まずはコンテナの中に入ります。
docker-compose exec db bash
/var/lib/postgresql/data/ にpostgresのデータが入っています。
cd /var/lib/postgresql/data/
あとは、基本的に愚直に参考記事の通りにコマンドを叩いていきます。

まずはサーバー関連の証明書。
mkdir cert && cd cert
openssl req -new -nodes -text -out ca.csr -keyout ca-key.pem -subj "/CN=certificate-authority"
openssl x509 -req -in ca.csr -text -extfile /etc/ssl/openssl.cnf -extensions v3_ca -signkey ca-key.pem -out ca-cert.pem
openssl req -new -nodes -text -out server.csr -keyout server-key.pem -subj "/CN=pg-server"
openssl x509 -req -in server.csr -text -CA ca-cert.pem -CAkey ca-key.pem -CAcreateserial -out server-cert.pem
次にクライアント用も作ります。
DBに接続するユーザー名を変える場合は /CN=postgres の個所を変更してください。
openssl req -new -nodes -text -out client.csr -keyout client-key.pem -subj "/CN=postgres"
openssl x509 -req -in client.csr -text -CA ca-cert.pem -CAkey ca-key.pem -CAcreateserial -out client-cert.pem
ls で確認すると、以下のファイルが出来ています。
ca-cert.pem  ca.csr      client-cert.pem  client-key.pem   server.csr
ca-cert.srl  ca-key.pem  client.csr       server-cert.pem  server-key.pem
所有者が root になっているので、postgres に変更します。
chown -R postgres:postgres ./
参考記事ではここから別の場所に移動していますが、この場所のまま設定していこうと思います。

通信の SSL 化

nano を使いたいのですが、そんな高等なものはこのイメージにはインストールされていないので、一旦コンテナを抜けます。vi は入っているので、使える方は vi で直接編集した方が楽です。
exit
pgdata フォルダに入っているデータは root じゃないと編集できないので、root になります。
sudo su
まずは postgres.conf から。
nano pgdata/postgresql.conf
# - SSL - から始まるセクションを、以下のように変更します。
# - SSL -
ssl = on
ssl_ca_file = '/var/lib/postgresql/data/cert/ca-cert.pem'
ssl_cert_file = '/var/lib/postgresql/data/cert/server-cert.pem'
#ssl_crl_file = ''
ssl_key_file = '/var/lib/postgresql/data/cert/server-key.pem'
#ssl_ciphers = 'HIGH:MEDIUM:+3DES:!aNULL' # allowed SSL ciphers
#ssl_prefer_server_ciphers = on
#ssl_ecdh_curve = 'prime256v1'
#ssl_min_protocol_version = 'TLSv1'
#ssl_max_protocol_version = ''
#ssl_dh_params_file = ''
#ssl_passphrase_command = ''
#ssl_passphrase_command_supports_reload = off
次に、pg_hba.conf を編集します。
nano pgdata/pg_hba.conf
最後の行をコメントアウトし、新たに一行追加します。
# host all all all md5 
hostssl all             all             0.0.0.0/0               md5
元のユーザーに戻り、コンテナを再起動します。
exit
docker-compose down
docker-compose up -d
psql がインストールされている適当な別マシンから、接続を試みます。
psql "host=<host address> user=postgres dbname=postgres"
次のように、SSL connection ~~~ と出てくれば成功です。
psql (12.2 (Ubuntu 12.2-2.pgdg18.04+1))
SSL connection (protocol: TLSv1.3, cipher: TLS_AES_256_GCM_SHA384, bits: 256, compression: off)
Type "help" for help.

postgres=#
証明書接続の強制

ここから、クライアント側に証明書による接続を強制していきます。

まず、 pg_hba.conf を編集し、最後の行のmd5をcertに変更します。
# host all all all md5 
hostssl all             all             0.0.0.0/0               cert
試しにこの状態で、別クライアントから先程と同じコマンドで接続すると…
psql: error: could not connect to server: FATAL:  connection requires a valid client certificate
FATAL:  no pg_hba.conf entry for host "<host address>", user "postgres", database "postgres", SSL off
このようにエラーが出ます。
サーバーの方に戻って、クライアント用の証明書を用意します。

…と言っても、証明書自体は先程一緒に作ったので、分かりやすい位置にコピーしてきます。
相変わらず root 権限が必要です。
sudo su
mkdir client
cp pgdata/cert/ca-cert.pem client/root.crt
cp pgdata/cert/client-cert.pem client/postgresql.crt
cp pgdata/cert/client-key.pem client/postgresql.key
exit
コピーしたものは root 権限にになっているので、現在のユーザーとグループに権限を与えます。
sudo chown -R $(id -u -n):$(id -g -n)  client
この client フォルダを、クライアントに配布します。
方法はUSBメモリでも scp でも問題ありませんが、コピー先はクライアントの~/.postgresql である必要があります。
scp -r <user>@<server>:/home/<user>/<docker-compose dir>/client ~/.postgresql
証明書を配置したら接続します。
sslmode=require あるいは sslmode=verify-ca で接続するのですが、 ~/.postgresql が存在していれば自動的に見に行ってくれるようで、指定なしでも接続出来ました。
psql "host=<host address> user=postgres dbname=postgres"
psql "sslmode=require host=<host address> user=postgres dbname=postgres"
psql "sslmode=verify-ca host=<host address> user=postgres dbname=postgres"
先程と同じようにログインできれば、成功です。
psql (12.2 (Ubuntu 12.2-2.pgdg18.04+1))
SSL connection (protocol: TLSv1.3, cipher: TLS_AES_256_GCM_SHA384, bits: 256, compression: off)
Type "help" for help.

postgres=#

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-14T11:04:01+09:00

Dockerのコンテナを削除する方法

環境
- CentOS Linux release 7.6.1810 (Core)
- Docker Version:18.09.6

コンテナを削除する

$ docker rm {コンテナID or コンテナ名}

削除する方法

# 停止しているコンテナを含めて全コンテナを表示する
$ docker ps -a
CONTAINER ID        IMAGE              COMMAND             CREATED             STATUS              PORTS                                              NAMES
dffe12345678        host_delete-target "/usr/sbin/init"    24 hours ago        Up 3 hours          0.0.0.0:18080->8080/tcp, 0.0.0.0:18082->8081/tcp   delete-target
93abcdefghij        host_hoge          "/usr/sbin/init"    4 months ago        Up 3 hours          0.0.0.0:8088->3389/tcp, 0.0.0.0:8089->8080/tcp     hoge

# 起動していたら停止する
$ docker-compose stop delete-target
Stopping delete-target ... done

# もう一回状態を見ておく
$ docker ps -a
CONTAINER ID        IMAGE              COMMAND             CREATED             STATUS                        PORTS                                             NAMES
dffe12345678        host_delete-target "/usr/sbin/init"    24 hours ago        Exited (137) 52 seconds ago                                                     delete-target
93abcdefghij        host_hoge          "/usr/sbin/init"    4 months ago        Up 3 hours                    0.0.0.0:8088->3389/tcp, 0.0.0.0:8089->8080/tcp    hoge

# 削除する
$ docker rm delete-target
delete-target

# 削除したコンテナがいなくなったことを確認する
$ docker ps -a
CONTAINER ID        IMAGE                               COMMAND             CREATED             STATUS              PORTS                         NAMES
93abcdefghij        host_hoge       "/usr/sbin/init"    4 months ago        Up 3 hours          0.0.0.0:8088->3389/tcp, 0.0.0.0:8089->8080/tcp    hoge

Stop the container before attempting removal or force remove

$ docker rm dffe12345678
Error response from daemon: You cannot remove a running container dffe... Stop the container before attempting removal or force remove

原因 : コンテナを停止していないから
対応 : コンテナを停止してから削除する

Can't find a suitable configuration file in this directory or any parent.

$ docker-compose stop delete-target
ERROR:
        Can't find a suitable configuration file in this directory or any
        parent. Are you in the right directory?

        Supported filenames: docker-compose.yml, docker-compose.yaml

原因 : docker-compose.ymlのないディレクトリで操作するから
対応 : 削除対象のdocker-compose.ymlのあるディレクトリで操作する

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-14T01:06:30+09:00

docker × rails × vue.js で環境構築をしてみた。

謝辞

下記に記載されている手順は少し前後があるかもしれません。
私は最初に参考サイトリンク先を参考にrailsの環境構築をしてからvueを導入しました。なのでgemfileもdockerfileもdocker-compose.ymlも
最初から下記の記述をしていた訳ではありません。手順6以降が怪しいのでご了承をお願いします。
コメントで指摘いただけますと幸いです。

都度、更新していきます。

手順

1.Dockerfile,docker-compose.yml,gemfile,gemfile.lockを作成。
※Dockerfile,docker-compose.ymlについては下記に明記。

2.gemfileに下記を記載。
Gemfile
source 'https://rubygems.org'
gem 'rails', '~> 5.2.2'
gem 'webpacker', github: 'rails/webpacker'
3.gemfile.lockは中身は何も記載しなくてOK

4.アプリ新規作成
docker-compose run web rails new . --force --database=mysql --skip-bundle
5.database.ymlを修正
database.yml
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名
6.コンテナのビルド
$docker-compose build
7.vueを導入
$ docker-compose run web rails webpacker:install
$ docker-compose run web rails webpacker:install:vue
8.vue.js ファイルのビルド
$docker-compose run web bin/webpack
9.db作成
$docker-compose run web rails db:create
10.起動
$docker-compose up
参考サイト

・丁寧すぎるDocker-composeによるrails5 + MySQL on Dockerの環境構築(Docker for Mac)

・Rails5.2 + Docker環境にVue.js (Webpacker) を導入する

・Vue.jsをつかったRuby on Railsプロジェクトのはじめかた(with Docker)

Dockerfile
Dockerfile
ROM ruby:2.5.3

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

RUN mkdir /app_name
ENV APP_ROOT /app_name
WORKDIR $APP_ROOT

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

RUN bundle install
ADD . $APP_ROOT
docker-compose.yml
docker-compose.yml
ersion: '3'
services:
  db:
    image: mysql:5.7
    volumes:
      - db-volume:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: root
    ports:
      - "3306:3306"

  web: &app_base
    build: .
    command: rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/app_name
      - bundle:/usr/local/bundle:delegated
      - node_modules:/app/node_modules:delegated
    ports:
      - "3000:3000"
    depends_on:
      - db
    tty: true
    stdin_open: true

  webpack:
    <<: *app_base
    command: "bin/webpack-dev-server"
    ports:
      - "3035:3035"
    depends_on:
      - web
    tty: false
    stdin_open: false

volumes:
  db-volume:
  bundle:
  node_modules:

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-14T00:02:08+09:00

ReactでLIFFアプリケーションをつくる　〜その１ VSCode+Docker+Reactの環境構築する〜

はじめに

最初に、今回は環境構築なので、LIFFは登場しません

LINEってワードをよく聞くし、キャッシュレスの流れも強めなので、
「LINE連携したアプリケーション（MessagingAPI、LIFF、LINE Pay）を作れたら結構強い人なんじゃないか？」
と最近思い始めました。
（LINE Payって個人利用できたりするのだろうか？）

Messaging APIは少し触ったので、今回はReactでLIFFアプリケーションを作ります。
この記事では、VSCode+Docer+Reactの環境構築〜HelloWorldまでやります。

※ちなみに、LIFFとは以下のことです
https://developers.line.biz/ja/docs/liff/overview/

VSCode

Install

https://azure.microsoft.com/ja-jp/products/visual-studio-code/
からダウンロード＆インストールしてください。

Macユーザで、Homebrew導入済であれば、以下コマンドでインストールできます。
brew cask install visual-studio-code
Setting : 設定

setting.json

editorやら、formatやらの設定ファイルです。
以下サイトを参考にとりあえず設定してみました。

IntelliSense in Visual Studio Code

VSCodeで爆速コーディング環境を構築する(主にReactJS向け設定)

Visual Studio Code の初期設定と最低限必要な拡張機能 - フロントエンド向け -

Command + ,で設定を開き、右上にあるアイコン（↓のようなアイコンがあります）を押すとsettings.jsonを編集できます。

そして、内容は以下のように設定しました。
settings.json
{
  // see. Customizing IntelliSense
  // The contents described below have been copied
  // https://code.visualstudio.com/docs/editor/intellisense#_customizing-intellisense
  // from here
  // Controls if quick suggestions should show up while typing
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": false
  },
  // Controls whether suggestions should be accepted on commit characters. For example, in JavaScript, the semi-colon (`;`) can be a commit character that accepts a suggestion and types that character.
  "editor.acceptSuggestionOnCommitCharacter": true,
  // Controls if suggestions should be accepted on 'Enter' - in addition to 'Tab'. Helps to avoid ambiguity between inserting new lines or accepting suggestions. The value 'smart' means only accept a suggestion with Enter when it makes a textual change
  "editor.acceptSuggestionOnEnter": "on",
  // Controls the delay in ms after which quick suggestions will show up.
  "editor.quickSuggestionsDelay": 10,
  // Controls if suggestions should automatically show up when typing trigger characters
  "editor.suggestOnTriggerCharacters": true,
  // Controls if pressing tab inserts the best suggestion and if tab cycles through other suggestions
  // タブでサジェクト内容の切替できるようにする
  "editor.tabCompletion": "on",
  // Controls whether sorting favours words that appear close to the cursor
  "editor.suggest.localityBonus": true,
  // Controls how suggestions are pre-selected when showing the suggest list
  // 直近利用したワードが一番最初に選択されるようにサジェクトされる
  "editor.suggestSelection": "recentlyUsed",
  // Enable word based suggestions
  "editor.wordBasedSuggestions": true,
  // Enable parameter hints
  "editor.parameterHints.enabled": true,
  // to here
  "diffEditor.renderSideBySide": false,
  "editor.colorDecorators": false,
  // see.
  // [VSCodeで爆速コーディング環境を構築する(主にReactJS向け設定)](https://qiita.com/teradonburi/items/c4cbd7dd5b4810e1a3a9)
  // [Visual Studio Code の初期設定と最低限必要な拡張機能 - フロントエンド向け -](https://qiita.com/hi85/items/eaede5ebb509f21f27f5)
  // format
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "html.format.extraLiners": "",
  "html.format.unformatted": null,
  "html.format.wrapLineLength": 0,
  // editor
  "editor.minimap.enabled": false,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.renderControlCharacters": true,
  "editor.renderLineHighlight": "all",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  // emmet
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.triggerExpansionOnTab": true,
  "emmet.variables": {
    "lang": "ja"
  },
  // confirm when deleting files.
  "explorer.confirmDelete": true,
  // files
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true
  },
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "search.exclude": {
    "**/.git": true,
    "**/node_modules": true
    // @TODO: List files to exclude from search.
  }
}
keybinding.json

キーバインドの設定です。
Command + k -> Command + sで設定を表示し、また右上にある以下アイコンを押すとkeybindings.jsonを開けます。

設定値は本家の内容をまるパクリしました。
keybinding.json
// Place your key bindings in this file to override the defaults
[
  // see Key bindings
  // https://code.visualstudio.com/docs/editor/intellisense#_key-bindings
  {
    "key": "ctrl+space",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+space",
    "command": "toggleSuggestionDetails",
    "when": "editorTextFocus && suggestWidgetVisible"
  },
  {
    "key": "ctrl+alt+space",
    "command": "toggleSuggestionFocus",
    "when": "editorTextFocus && suggestWidgetVisible"
  }
]
Extension

プラグインの導入です。
以下サイトを参考にインストールさせていただきました。

インストールするだけでVSCodeをカッコよくする拡張4つ - Qiita

VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)

VSCode intellisense

React Tutorial 2: ローカル開発環境
install-extension.bash
## see
## [インストールするだけでVSCodeをカッコよくする拡張4つ - Qiita](https://qiita.com/ksakiyama134/items/8ca98295897dc1280644)

## Bracket Pair Colorizer
## see. https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
code --install-extension CoenraadS.bracket-pair-colorizer

## Dracula Theme
## see. https://draculatheme.com
code --install-extension gerane.Theme-Dracula

## Indent Rainbow
## see. https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
code --install-extension oderwat.indent-rainbow

## Material Icon Theme
## see. https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
code --install-extension PKief.material-icon-theme

## see
## [VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)](https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234)

## GitLens
## see. https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens


## REST CLIENT
## see. https://marketplace.visualstudio.com/items?itemName=humao.rest-client
code --install-extension humao.rest-client

## Partial Diff
## see. https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff
code --install-extension ryu1kn.partial-diff

## React snippets
code --install-extension dsznajder.es7-react-js-snippets

## Babel JavaScript
code --install-extension mgmcdermott.vscode-language-babel

## Marp for VSCode
## see. https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
code --install-extension marp-team.marp-vscode
confirm installed extension : インストール済の確認

インストールしたExtensionはcode -list-extensionsで確認できます

ちなみに

設定ファイル類はこちらにコミットしましたがなんだか見辛かったので、それぞれ記載しました。
https://github.com/ken-araki/env/tree/master/vscode

node

Install

まずはnodeをインストールするのですが、今回はdockerを利用します。
なので、作業ディレクトリに以下ファイルを作成してください。（dockerについてはあまり触れません）

docker-compose.yml
docker-compose.yml
version: "3"
services:
  node:
    build: ./docker/node
    volumes:
      - ./:/home/node
    ports:
      - "3000:3000"
その後、以下コマンドでDockerイメージを作成しておきます。
docker-compose build
docker/node/Dockerfile
docker/node/Dockerfile
FROM node:13.12.0-slim
WORKDIR /home/node
React

基本的に、React Tutorial 2: ローカル開発環境に沿って進めます。

Node.jsのインストールが終わっているので、「2. Create React App のインストールガイドに従って新しいプロジェクトを作成する。」から始めます。

2. Reactアプリケーションの作成

以下コマンドでDocker containerでnpx create-react-app my-appを実行します。
（my-app部分はよしなに変更してください）
docker-compose run --rm node sh -c "npx create-react-app app"
3~6. srcの改修

チュートリアルにしたがって、src配下にindex.jsとindex.cssを作成してください。
（と言ってもコピペ）

Reactアプリケーションの開始

以下コマンドでDocker containerでnpm startを実行します。
docker-compose run --rm --service-ports node sh -c "cd app; npm start"
その後http://localhost:3000にアクセスすると空の三目並べの盤面が表示されます。

コード

コードはこちらにコミットしています
https://github.com/ken-araki/line-liff

おわりに

まずは、これでいい感じにコーディングできるか試してみようと思います。
Reactチュートリアルやりながら、イケていない部分を少しずつ直していきます。
「もっとこうした方がいいよ！」があったら教えてもらえると嬉しいです！

次は、チュートリアル終わらせつつ、LIFFアプリケーション登録までやろうと思います。
そのあと、kotlin-reactも触ってみたいのですが、業務で使う機会なさそうだな、とも思ったり。。。
どうなんですかね？

と言うので、今回は終わりです。

　 Tweet
Qiitaで続きを読む

20200414のdockerに関する記事は10件です。

初心者のKubernetes入門（書籍 Kubernetes 実践入門の写経から学ぶ）操作編

背景

引用や参考と今回の自分の勉強用の書籍の紹介

実際の学びについて

勉強開始

Kubectl create deployment でアプリケーションをデプロイする

実行確認

kubectl expose アプリケーションを公開する

実行確認

ブラウザアクセス確認

次は 3.2 章をやっていきます。

最後に

ちょっとハマったところ

.yamlとは

用法

特徴

ハッシュ形式

配列形式

③Docker MYSQLにデモデータ(seed_fu)を投入する!(2020.4時点)

1.これからDocker導入します、という方は、まず、こちらを見ていただけると幸いです。

前回までのおさらい

2.前提

3.DockerコンテナのMYSQLイメージが稼働しているか確認する

4.Docker環境で、Railsコマンド「rake db:seed_fu」でデモデータを投入する

5.コンテナのMYSQLにデモデータ投入ができているか確認する

6.DockerのMYSQLイメージを日本語化する

ローカルで「my.cof」ファイルを新規作成し日本語設定の記述をします。

7.SequelProでDocker MYSQLイメージに接続する

8.参考になった記事一覧です。（ありがとうございす！）

9.最後に

ローカル・Dockerで開発環境を整えるまでの続編

【Docker】docker-composeコマンドを実行するまで

概要

1. docker-compose: Command not found

2. curl: option -s-uname: is unknown

3. pip: Command not found

4. pipが古い！

参考にした記事

Windows10 にDocker Toolboxをインストールしてみた

前提

環境メモ

Docker導入前知識メモ

インストール手順メモ

ステップ1：バージョンを確認する

ステップ2：Docker Toolboxをインストールする

注意

Docker Toolboxの最新バージョンをダウンロードするには、Toolbox Releasesにアクセスして最新の.exeファイルをダウンロードします。

ステップ3：インストールを確認する

参考

所感

コーディング未経験のPO/PdMのためのRails on Dockerハンズオン、Rails on Dockerハンズオン vol.15 - Deploy to Heroku

はじめに

前回のソースコード

Heroku

システム構成

Herokuアカウントを作成する

Heroku CLIをインストールする

Heroku CLIでログインする

Gitを使えるようにしておく

Heroku Appを作成する

Heroku Add-onsのPostgresを追加する

Herokuにアプリをデプロイする

まとめ

後片付け

本日のソースコード

Other Hands-on Links

SSL証明書接続が必要な PostgresQL サーバーを docker-compose で立ち上げる

参考

環境

docker-compose

証明書作成

通信の SSL 化

証明書接続の強制

Dockerのコンテナを削除する方法

削除する方法

Stop the container before attempting removal or force remove

Can't find a suitable configuration file in this directory or any parent.

docker × rails × vue.js で環境構築をしてみた。

謝辞

前回までのおさらい　

2. curl: option -s`-`uname: is unknown

ReactでLIFFアプリケーションをつくる　〜その１ VSCode+Docker+Reactの環境構築する〜