2020-08-31

docker-compose でコンテナを起動し， localhost にアクセスする時に勘違いしていたこと

最近，Docker を使って vue-cli の勉強をしているのですが，アプリケーションのコンテナを起動し，ブラウザで localhost にアクセスすると「ERR_CONNECTION_REFUSED」と表示され，localhost にアクセスできなくなりました．

「え！？突然どうした？」という状態になって少し混乱していたのですが，結論としては私の単なる勘違いが原因でした．今回はその勘違いしていた内容についてまとめようと思います．

使っていた Dockerfile

何の変哲のない，「Dockerfile」と「docker-compose.yml」です．

portsでポートフォワーディングし，ブラウザで「http://localhost:1234/」でアクセスするようにしています．

# vuejs-practice/Dockerfile 
FROM node:12.18.3-alpine

WORKDIR /app

RUN apk update && \
  npm install -g npm && \
  npm install -g @vue/cli

CMD ["/bin/ash"]

# vuejs-practice/docker-compose.yml
version: "3"
services:
  vuejs-practice:
    build: .
    command: yarn serve
    working_dir: /app/vuejs-practice
    ports:
      - 1234:8080
    volumes:
      - ./:/app
      - yarn-cache:/usr/local/share/.cache/yarn/v6
    stdin_open: true
    tty: true

volumes:
  yarn-cache:

アプリケーションを起動

さて，起動しましょう．当時は以下のコマンドで起動していました．

$ docker-compose run --rm vuejs-practice yarn serve

さてアクセスするぞ！！！という思いでブラウザで localhost にアクセスすると「ERR_CONNECTION_REFUSED」と表示されてしまいます...

f:id:bake0937:20200831200934p:plain

調べてみる

「なぜだ? 他のコンテナは停止もしているし，関係ありそうなプロセスも Kill しているのに...」と思いながらもdocker psで vue-cli のコンテナの起動状態を見てみました．

❯ docker ps
CONTAINER ID        IMAGE                         COMMAND                  CREATED             STATUS              PORTS               NAMES
ee9e63a14442        vuejs-practice_vuejs-practice   "docker-entrypoint.s…"   9 seconds ago       Up 8 seconds                            vuejs-practice_vuejs-practice_run_d4ff59ff1d93

はい...そうです...「PORTS」の設定が無いです．これではいくらブラウザで localhost にアクセスしてもアプリケーションのページは表示されません．

「アレ？ docker-compose.yml に ports の設定書いたはずなんだけど？」と思っており，ここで少し混乱したのですが.... 「あ！そういえば docker-compose up で起動してなかったな」とふと思い，実行してみると...なんと「PORTS」が設定された状態になりました！

❯ docker-compose up
Starting vuejs-practice_vuejs-practice_1 ... done
Attaching to vuejs-lecture_vuejs-lecture_1
yarn run v1.22.4
$ vue-cli-service serve
vuejs-lecture_1  |  INFO  Starting development server...

❯ docker ps
CONTAINER ID        IMAGE                         COMMAND                  CREATED              STATUS              PORTS                    NAMES
0ba34e1ff069        vuejs-lecture_vuejs-lecture   "docker-entrypoint.s…"   About a minute ago   Up About a minute   0.0.0.0:1234->8080/tcp   vuejs-lecture_vuejs-lecture_1

localhost にアクセスすると無事アプリケーションのページが表示されました．

f:id:bake0937:20200830132758p:plain

原因

もうここまで読めばだいたいわかったと思いますが，原因はコンテナの起動コマンドにありました．

せっかく，「docker-compose.yml」でportsを設定していたのにも関わらず，docker-compose upではなく，docker-compose run --rm vuejs-practice yarn serveで vuejs-practice サービスでyarn serveを起動するコマンドを実行してしまってました．

これではdocker-compose.ymlで設定した情報に沿ってコンテナが起動するのでなく．単に vue-cli のコンテナが起動しただけで，ポートフォワーディングされない状態のため接続できなかったということでした．

起動するコマンドが変わっていた原因としては，読んでいた技術書が vue-cli をマシンに直接インストールする環境で書いており，Docker で起動する場合で読み替えるべきところを忘れたまま進めてしまっていました😇，つまり凡ミスです笑．

docker-compose run --rm vuejs-practice yarn serveでどうしても起動したい場合は以下のように-pオプションが必要です．

$ docker-compose run --rm -p 1234:8080 vuejs-lecture yarn serve
❯ docker ps
CONTAINER ID        IMAGE                         COMMAND                  CREATED             STATUS              PORTS                    NAMES
54df9ca7f7fa        vuejs-lecture_vuejs-lecture   "docker-entrypoint.s…"   28 seconds ago      Up 27 seconds       0.0.0.0:1234->8080/tcp   vuejs-lecture_vuejs-lecture_run_823dbcfa3088

と悔しさ半分で紹介しましたが，これだと「何のために docker-compose.yml を用意したんだよ！」って話になるので，おとなしくdocker-compose up (サービス名)またはdocker-compose run --rm --service-ports サービス名と--service-portsオプションをつけて起動するようにします 😇

まとめと所感

今回は，docker-compose でアプリケーションのコンテナを起動した時に勘違いしていたことについてまとめてみました．

技術書の読み替えミスで色々混乱してしまいましたが，docker-compose upとdocker-compose run --rm サービス名コマンドでコンテナを起動した時の違いについてわかったので，これはこれで良い学びでした．

もう同じようなことが起きてもこの記事を見直せばわかるので，読んでいる技術書をどんどん進めていきます！普段使いのコンテナも段々と慣れてきたぞ！！

2020-08-24

勉強・個人開発用に作ってきた Dockerfile をリポジトリにまとめてみた

Docker AWS 個人開発やってみた

最近新しい MacBook Pro を買いました．「早速ライブラリやツールを入れていくぞぉ〜」って感じになったのですが，様々な言語・フレームワークの導入の都合で入れたツール・ライブラリの依存関係が原因でのエラーで時間を無駄に食ってきた記憶が頭を過ぎったので，普段の勉強・個人開発でも Docker をバリバリ使っていくことにしました．

そこで Dockerfile はちょこちょこ書いていたんですが，よく使う Dockerfile は dotfiles みたいにリポジトリにアップしてたら便利そうと思いました．というわけでは今回は Dockerfile をリポジトリ作ってみたのでそれについて思ったことなどをまとめていこうと思います．

Docker は普通に Docker for Mac です．ホストとゲストとファイル同期は Mutagen を使っています．

docs.docker.jp

作ったもの

リポジトリはこちら．まだ Rails6 と Vue CLI しかないです笑．コメントアウトで少し説明を入れています．使う時は消しています．これから用途に合わせて Ruby や Golang なども入れていく予定です．

github.com

やってみての感想

Docker を勉強せざる負えない環境を作ることができた

今までは比較的仕事では Docker，個人では Mac に言語やフレームワークを直接導入してコードを書いていました．そのため，普段から Docker 使っていないことによる躓きが少し目立っていたなぁと感じていました．

今は何かしらの言語でコードを書くぞ! となったら，まずは Dockerfile を作るところから始まるので， Docker を勉強せざる負えなくなり，そのおかげで段々と知識が着いていき，躓いていた箇所(特に port 周り笑)が「え？こんな所で躓いていたのか」と理解できるようになってきました．

ちなみにこの本を読んでます．

book.mynavi.jp

クラウドネイティブなアプリ開発の事例が増えている実感がやっと出てきた

仕事ではアプリケーションサーバとして Amazon EC2，CI 環境として Amazon ECR + AWS Code Build を使っております．しかし，今から新しいプロダクトを作るなら Amazon ECS や AWS Fargate，Amazon EKS などを使ったクラウドネイティブな事例をよく聞くようになりました．

まぁもう既にそんな事例は国内で沢山あると思いますが社内で他の何チームかが使い始めた話を聞いて「いよいよ身近になってきたなぁ」と今更ながら実感してきました．

その状況下で，フロントエンド・サーバーサイド・インフラエンジニアなど職種に関係なく，今まで Mac に言語・フレームワークを直接導入していた感覚で， Dockerfile を作れるレベルになる必要にならないとなぁと思うようになりました．

まとめと所感

今回は勉強・個人開発用に作ってきた Dockerfile のリポジトリについてまとめてみました． Docker を普段使いにしてから1ヶ月ほど経ちましたがだいぶ慣れてきました．特に技術書に書いてあるコードをシュッと試す時に今回作ったリポジトリが役立っています．この調子でコンテナサービスの使い方も勉強していこうと思います．

Cloud Run が従量課金制でかつ AWS Fargate よりも手軽に使えるというのを会社の上司が熱弁していて，GCP にも少し興味が湧いてきました．

cloud.google.com

そういえば，よく使う Vim の設定は dotfiles って名前でリポジトリ管理する話は聞きますが，よく使う Dockerfile をリポジトリでまとめる話ってそこまで聞かないですね．(あくまで雛形レベルでの管理になりますが) そこらへんのところって皆さんどうしてるんだろ...🤔

2020-08-17

GitHub の suggestion 機能を使って提案されたコードを取り込む

GitHub 小ネタ

GitHub のプルリクエストでチームメンバーへコードレビューを依頼した際に suggestion 機能を使ってソースコードで具体的に提案されることがある．

※下記は都合上，サンプル用のリポジトリで自分のプルリクエストに自分で提案をしている．

f:id:bake0937:20200817221926p:plain

実は今までここまでしか使っていなかったのだが，提案されたコードを取り込むができることをチームメンバーから聞いたため，今回はそれについてまとめていく．

コードを取り込む2つの機能

Commit suggestion

suggestion したコメントの下にある「Commit suggestion」ボタンを押すと，なんとコミットメッセージを入力することができる．

f:id:bake0937:20200817222446p:plain

「Commit changes」を押すと下記のようにコミットされた状態になる．

f:id:bake0937:20200817222628p:plain

Add suggestion to batch

取り込む方法はこれだけではない．下記のように複数の提案箇所を一つのコミットにまとめたい場合は「Add suggestion to batch」が便利．

f:id:bake0937:20200817222906p:plain

Add suggestion to batch を押すと，このように Commit suggestions が貯まっていく．

f:id:bake0937:20200817223056p:plain

ある程度のまとまりになったら Commit suggestion を押し，コミットメッセージを入れ，Commit changes を押す．

f:id:bake0937:20200817223324p:plain

するとこのようにコミットされた状態になる．

f:id:bake0937:20200817223604p:plain

まとめと所感

今回は GitHub の suggestion 機能を使って提案されたコードを取り込む方法についてまとめた．

今まではチームメンバーから提案されたコードや自分で見つけた改善案のコードをローカルリポジトリでコミットと push をしていた．しかし，これからはそれらの作業を GitHub 上でササッとできるのは確かに便利だと感じた．

この機能をうまく活用し，チームメンバーからのフィードバックを上手く取り込んでいくと，開発スピードが更に上がりそうだ．

2020-08-10

「Focus To-Do」でポモドーロテクニックをやってみた

ポモドーロテクニックリモートワーク Chrome 拡張機能在宅ワーク小ネタ

最近リモートワークをする日が増えており，家で集中できる日とできない日でムラがあるのが目立ってきた．リモートワークで仕事をする際にどんな工夫をしているのかを友人・知り合いに聞いてみたところポモドーロテクニックを実践している人が何人か居たので試しにやってみることにした．

そこで，ポモドーロテクニックを実践するためのアプリを色々と探してみたところ「Focus To-Do」が一番使いやすかったので今回はこのアプリについてまとめる．

選定理由

このアプリが良いと思った点は下記である．

幅広いOSに対応
- iOS, Android, に加え， MacOS や Windows OS, さらには Chrome 拡張機能まである
買い切りタイプの有料プランで各端末でタスクを共有できる
- 昨今は月額タイプの有料プランが多い中，1100 円を1回払えば全ての機能が使えるようになるのは有り難い
アカウントを作成すれば，各端末でタスクを共有できる

使い方

公式ページにある「Download Focus To-Do」の各デバイスの画像をクリックするとダウンロードページに飛ぶ．

www.focustodo.cn

起動すると，以下のような画面が表示される．

f:id:bake0937:20200810125317p:plain

こんな感じでタスクを追加する．

f:id:bake0937:20200810125718p:plain

追加したタスクの再生ボタンを押すとタイマーがスタートする．

f:id:bake0937:20200810125816p:plain

f:id:bake0937:20200810130111p:plain

始める前にここの🍅を追加して予定時間を設定できる．目標や見積もりの時間を設定するのに便利． f:id:bake0937:20200810125645p:plain

タイマーや休憩の時間も自由に設定できる f:id:bake0937:20200810130307p:plain

まとめと所感

今回は「Focus To-Do」についてまとめてみた．ポモドーロテクニックを実践できるアプリは沢山あるが，色々使い比べた結果，「Focus To-Do」に落ち着いた．

しかし，タイマーで時間を測るのではなく，「テクニック」のためポモドーロテクニック自体を学ぶ必要があることに気がついた(そりゃそうである)．ポモドーロテクニックの開発者の著書が出版されているとのことなので，その本を読みながらポモドーロテクニックについての理解を深め，リモートワークおよび仕事の生産性向上に努めたいと思う．

www.amazon.co.jp

2020-08-03

電子書籍(技術書)を Google Drive の「バックアップと同期」アプリで管理しはじめた

Google Drive 電子書籍技術書ポエムやってみた小ネタ

定期的に技術書(電子書籍)の管理について考えてきたが、最近はシンプルに Google Drive で管理する方法で落ち着いてきた．今回はその方法についてまとめていく．過去の記事はこちら.

bake0937.hatenablog.com

「バックアップと同期」アプリを使う

今までも Google Drive で電子書籍を管理するのを何度も考えては断念していた．理由は Google Drive にブラウザで都度都度アクセスするのが面倒だったためである．

しかし、この「バックアップと同期」アプリを使えば Dropbox と同じ感覚でファイルを Google Drive と PC 間で同期できることがわかった．このアプリって前からあったのだろうか？とりあえずここのリンクからダウンロードできる．

www.google.com

インストールすると、Mac の場合は Finder のサイドバーに Google Drive が表示される．

f:id:bake0937:20200803230146p:plain

あとは、こんな感じで Finder を使う感覚でフォルダを Google Drive にドラッグアンドドロップすれば同期が始まる．

確かブラウザの Google Drive はローカルにあるフォルダを直接ドラッグアンドドロップはできず，一度 zip ファイルに圧縮してアップしないと行けなかった気がするので地味に便利!!!

...と思ったら現在は，ブラウザからでもフォルダをドラッグアンドドロップができるようだ...まぁブラウザを開かないで済むので便利なのは変わらない．

f:id:bake0937:20200803230503p:plain

Goolge Drive は 15GB の容量を無料で使えるので，今の自分にとって電子書籍を管理するには十分である．仮に足りなくなっても月 250 円で 100GB も使うことができるようなので悪くない投資だと思った．

one.google.com

なお，PDF は無料の Adobe Acrobat Reader 無難に利用している．

acrobat.adobe.com

しおりの機能は Acrobat Reader DC にアップグレードしないと使えないため，「注釈」機能で「ここまで読んだ」などのメモを入れて読んだ場所を記録している．少し無理矢理感があるかもしれないが，自由にメモができるため割と便利だと思い始めている...

まとめと所感

今回は Google Drive の「バックアップと同期」アプリで電子書籍を管理してみた話について書いてみた．実際，Kindle for Mac や iBooks も使っているが，Kindle for Mac は引き続きそのまま使って iBooks は epub 形式のため， epub も Google Drive で管理している．

正直，Google Drive で epub を管理し，開くと iBooks が起動し，iCloud の容量が減って少し損した気分になるが，Google Drive をローカルから操作できる体験を知ったら，多少は目を瞑れると感じた．まだ容量に余裕があるからそう感じているのかもしれないが，足りなくなったらまた何か考えようかと思う．皆どんな感じで管理しているんだろうか...