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
フロントエンジニアでも GKEの開発環境を作りたいっ!!
Search
Yasushi Asahi
February 14, 2019
Programming
490
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
フロントエンジニアでも GKEの開発環境を作りたいっ!!
Yasushi Asahi
February 14, 2019
More Decks by Yasushi Asahi
See All by Yasushi Asahi
VueでCSSモジュールを使った感想
yasushiasahi
1
710
Other Decks in Programming
See All in Programming
ビデオ通話が繋がる0.2秒で何が起きているのか
supurazako
2
140
AI 輔助遺留系統現代化的經驗分享
jame2408
1
1.2k
Welcome to the "Parametricity" 🏙️ − Generic だけど Specific な世界 −
guvalif
PRO
1
150
LLMによるContent Moderationの本番運用の裏側と品質担保への挑戦
suikabar
3
840
ECSアプリログをFireLensでコスト削減しようとしたけど諦めた話 in Fargate×Node.js
akihisaikeda
2
4.3k
Skillsは効率化、Agentsは"自分の拡張"——Builder時代のエージェント編成(CC Night 2026)
wemra
1
210
えっ!!コードを読まずに開発を!?
hananouchi
0
190
トークンをケチるな、設計しろ:GitHub Copilotを賢く使うコンテキスト戦略
ochtum
0
310
【SRE NEXT 2026 Lunch Session】一人目専任SREの立ち上げを加速する ― AIと進めたオンボーディングで2分を0.04秒にした話
pkshadeck
PRO
0
2.4k
吝嗇家のためのAI活用 / AI development for miser - ChatGPT + Issue Driven Development
tooppoo
0
180
20260623_Loop Engineeringで自分の分身の問い合わせBotを作る
ryugen04
0
200
AI がコードを書く時代における新卒エンジニアの仕事風景 (2026) / New Graduate Engineers in the Era of AI Coding (2026)
sushichan044
0
220
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.4k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
The Spectacular Lies of Maps
axbom
PRO
1
850
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
123
22k
The Cult of Friendly URLs
andyhume
79
6.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.3k
From π to Pie charts
rasagy
0
230
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.4k
Reality Check: Gamification 10 Years Later
codingconduct
0
2.2k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
260
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
6k
Transcript
フロントエンジニアでも GKEの開発環境を作りたいっ!!
自己紹介 名前 zero 本名:旭康史(あさひやすし) 所属 カラビナテクノロジー 仕事 フロントエンド 経歴 エンジニアとしは半年足らずのペーペーです(元々は広告の営業) 技術 React好き。Docker好き。Golang好き。TypeScript好き。 趣味 テレビアニメ鑑賞(今期の覇権は「わたてん」)
まずは作ったものをご紹介
Karabiner Members http://35.244.227.203/ 人の名前を覚えるのが苦手なので、入社したての 頃にメンバーの顔と名前を一致させるために作り ました。 こいつをGKE上で走らせています。 使用しているGCPのサービス ・Kubernates Engine(GCP上のkubernates環境) ・Container
Registry(Docker image置き場) ・Source Repositories(gitのレポジトリ) ・Cloud Build(自動ビルド、自動デプロイ)
Golang Ingress kubernetesクラスター httpリクエストの受け口 apiと静的ファイルの ルーティング 静的ファイルを返す apiサーバー 永続Volume pod
pod pod 構成図 Persistent Volumes DBサーバー pod
本日はこれの 開発&デプロイ環境のお話です
開発環境
Docker for Desktop(ローカルkubernates環境) ・おおむねGKEと同じように動かせる ・Docker for Mac(Docker for Windows)に付属さ れているので楽ちん
・Minikubeという方法もあるが別途インストールが 必要 ここから有効化できます。
・クラスタ内のコンテナのフォルダとローカ ルのフォルダをバインドする。 ・ここではローカルでwebpackから出力さ れたhtmlとjsをクラスタ内のnginxコンテ ナからも見れるようにしている。 本番用のyaml(一部抜粋) 開発用のyaml(一部抜粋) nginxコンテナ内の /usr/share/nginx/html と
ローカルのディレクトリ( webpackが生成するdistフォルダ) をバインドする。 使用するdocker imageを変更 プロセスが停止してもコンテナを維持 開発用の yamlを作る フロント編
開発用の yamlを作る サーバー編 ・フロントと同じ要領でコンテナとローカル のフォルダをバインド。 ・この場合はGolangの開発フォルダまる まるバインド。 ・ローカルでコードを変更するとクラスタ内 のGolangコンテナが検知して、再ビルド、 サーバー起動を行ってくれるように設定
する。 grm.sh Dockerfile_dev コンテナ起動時に この コマンドが実行される
demo①
思ったこと ・考え方は普通のDockerの開発環境と同じ(ディレクトリのバインド、ポートフォワード)。 ・本番用、開発用でyamlファイルが分かれてしまうので、管理方法を検討する必要がある。 helm、 kustomizeなど。 ・ローカルのパス指定はルートからの絶対パスしか受け付けてくれないので、 PCを変える時に書き換えが 必要
デプロイ環境
Cloud Build ・GCPが用意しているCI/CDサービス ・Container RegistryとSource Repositoriesを使っていれば認証関連を一切気にする必要がない。
トリガーを設定 ・コンソールからポチポチと設定すればト リガーを作れます。
ビルドステップを yamlで定義 ・yaml or Dockerfileでビルドステップを定 義します。 ・ここでは、 → docker imageをビルド
→ imageをRepositoryにpush → GKEのコンテナを更新 ということをしています。
demo②
思ったこと ・CI/CDを設定するのは初めてでしたが簡単でした。 ・やはり認証が必要ないことが大きい。
まとめ ・kubernatesは慣れると簡単 ・GCP内で物事を完結させると楽ち ん ・フロントエンドエンジニアでも構築 出来ました!!
ありがとうございました 旭康史
[email protected]
(株)カラビナテクノジー 801-0001 福岡市中央区天神1-2-4 農業共済ビル2F