Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript + Dockerの知見 / knowledge-of-docker-in-javascript
Search
odanado
PRO
April 04, 2019
Programming
9
53k
JavaScript + Dockerの知見 / knowledge-of-docker-in-javascript
Meguro.es # 20 @ Drecom
odanado
PRO
April 04, 2019
Tweet
Share
More Decks by odanado
See All by odanado
@nestjs/bull の活用について
odanado
PRO
0
990
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
820
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
4
1.8k
nuxtjs-axios-error-handling
odanado
PRO
0
260
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
280
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
170
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
410
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.1k
nuxt-i18nを使ったWebサイトの多言語化 / i18n-of-web-site-using-nuxt-i18n
odanado
PRO
1
6.1k
Other Decks in Programming
See All in Programming
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
220
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
1
190
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
9
3.2k
Doctrine ORMでValue Objectを扱う方法4選 #phpstudy / 4 ways to handle Value Objects with Doctrine ORM
77web
4
110
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
170
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
490
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
8
2.2k
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
900
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
22
15k
Milestoner
bkuhlmann
1
400
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
230
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
186
16k
Ruby is Unlike a Banana
tanoku
96
10k
Automating Front-end Workflow
addyosmani
1355
200k
Infographics Made Easy
chrislema
237
18k
Large-scale JavaScript Application Architecture
addyosmani
503
110k
Unsuck your backbone
ammeep
662
57k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
154
14k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Building Effective Engineering Teams - LeadDev
addyosmani
27
1.8k
Transcript
JavaScript + Dockerの知見 Meguro.es # 20 @ Drecom @odan3240 1
自己紹介 • Twitter: @odan3240 • エンジニア ◦ フロントエンド ◦ AWS
◦ ブロックチェーン • 会社: モバイルファクトリー ◦ チーム: ブロックチェーンチーム ◦ お仕事 ▪ サービスサイト: https://uniqys.net/ja ▪ ブロックチェーンアプリ検索サイト: https://findapps.me/ ▪ ブロックチェーンアプリ開発ツールキット: uniqys/UniqysKit 2
今日話すこと • チームの開発言語は基本的にJavaScript ◦ フロントエンド ▪ vue.js ▪ nuxt.js (StaticSite,
SSR) ▪ JavaScript (TypeScript) ◦ バックエンド ▪ nodejs (ts-node) • 開発環境や本番環境にDockerを使用 ◦ フロントもバックエンドも両方共Dockerの上 ◦ 開発環境はdocker for mac • 入社して約1年やってきた JavaScript + Dockerに関する知見を共有 ◦ 主に開発環境の話 3
Dockerとは • Docker ◦ コンテナ型仮想化を行うツール ◦ 環境の可搬性が高い • Dockerfile ◦
コンテナのbuildの手順を記したファイル • docker-compose ◦ 複数のコンテナを管理するツール 4
なぜDocker? • 開発環境が一発で構築できて楽 ◦ デザイナにvueファイルを書いてほしい時にシュッと構築 • docker-compose up すれば一発で開発環境が立ち上がる •
同じコンテナイメージを使えば 本番環境とステージング環境を一致させることができる 5
コンテナのnode_modulesを守る • 開発時はvolumesオプションでホストの ディレクトリをコンテナにマウントすることが多い ◦ ホストでコードを編集すると 即座にコンテナに反映されるためホットリロードが効く • マウントするとコンテナ内の node_modules
を ホストのそれで上書きしてしまう ◦ git clone直後のホストにはnode_modulesが存在しないためコンテ ナ内部のnode_modulesが無になる • docker-compose.ymlに以下のように書くと上書きされない 6
ホストのnode_modulesの用意 • ホストにnode_modules内の情報がないと VSCodeでコード補完ができない ◦ JetBrainsのWebStormならDockerコンテナ内の node_modulesの情報でコード補完が可能らしい • DX向上のためにホストにnode_modulesを用意したい ◦
docker cpでコンテナのnode_modulesをコピーする ▪ node-gypなどでバイナリに依存している場合に不安 ◦ ホストにnode.jsを用意してyarn installする ▪ 「Dockerさえあれば開発環境が手に入る」にはならない ◦ コンテナにlanguage serverを立てる ▪ 要検証 • 自分の中でベストプラクティスが出てない ◦ 懇親会で議論できる方がいれば :pray: 7
docker for macのI/Oが遅い • webpackによりファイルのI/Oが大量に発生する 現代のフロントエンドではつらい ◦ 例: nuxt-create-appコマンドで作成した 初期状態のプロジェクトでのnuxt
buildの実行時間 ▪ コンテナ: 34.6 sec ▪ ホスト: 12.3 sec • 色々な緩和策がある ◦ cachedフラグ ▪ 23.9 secに短縮 ◦ etc • どうしてもつらかったらフロントエンドの 開発環境でDockerをやめるのはあり 8
node.jsはPID 1を想定していない問題 • デフォルトではnode.jsのプロセスはPID 1で実行されるが node.jsはPID 1で実行されるように設計されていない ◦ ref: nodejs/docker-nodeのBestPractices.md
• krallin/tini を使う ◦ 軽量なinit ◦ Dockerfileに書いて入れる ◦ Docker 1.13 以降 かつ docker-compose 3.7以降なら デフォルトでサポート 9
.dockerignoreを用意する • Dockerはコンテナのbuild時に ディレクトリ中身をDockerデーモンに転送する ◦ ディレクトリ中身のサイズが大きいと buildが始まるまでに時間がかかる ◦ .dockerignoreファイルで無視するファイルを設定できる •
サイズが大きくなりがちでbuildに不要なnode_modulesを .dockerignoreに書いておいた方が良い 10
まとめ • 主に開発環境でのJavaScript + Dockerの 知見について紹介した • コンテナのnode_modulesを守る • コード補完のためにホストのnode_modulesの用意
• docker for macのI/Oが遅い • node.jsはPID 1を想定していない問題 • .dockerignoreを用意する • 懇親会でJavaScriptの開発環境についてお話しましょう! ◦ 最近開発環境にはDocker不要じゃね?ってなってる人なので誰かと 話したい 11