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
明日業務で役立たない Web 開発 TIPS
Search
Yuki Ishikawa
January 26, 2023
Technology
0
130
明日業務で役立たない Web 開発 TIPS
2022.11.19 フロントエンドカンファレンス沖縄
Yuki Ishikawa
January 26, 2023
Tweet
Share
More Decks by Yuki Ishikawa
See All by Yuki Ishikawa
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
370
ORM と向き合う
hoto17296
8
7.6k
Python をフル活用した工場への AI 導入 & データ活用基盤構築事例
hoto17296
0
2.6k
クソ bot 実装ライブコーディング
hoto17296
0
190
DeepGBM 論文の紹介
hoto17296
0
510
試行錯誤のための Docker 活用術
hoto17296
4
2.8k
Hive 集計テクニック
hoto17296
0
450
データ分析と Docker / Data Analysis with Docker
hoto17296
0
330
DeepCluster 論文の紹介
hoto17296
7
2.4k
Other Decks in Technology
See All in Technology
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.2k
次世代KYC活動報告 / 20250219-BizDay17-KYC-nextgen
oidfj
0
150
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.5k
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
180
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
990
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
3
300
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.8k
自動テストの世界に、この5年間で起きたこと
autifyhq
10
8.1k
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
13
5k
人はなぜISUCONに夢中になるのか
kakehashi
PRO
6
1.5k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
1.1k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
171
14k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
A Tale of Four Properties
chriscoyier
158
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Raft: Consensus for Rubyists
vanstee
137
6.8k
A better future with KSS
kneath
238
17k
Transcript
明日業務で役立たない Web 開発 TIPS 2022.11.19 フロントエンドカンファレンス沖縄 © 2020 Chura DATA
inc. PROPRIETARY & CONFIDENTIAL.
hoto / @hoto17296 • ちゅらデータ株式会社 • “Web ギルド” ギルドマスター •
スタートアップなんでも屋 • Web / 機械学習 / データ基盤 / XR / インフラ / 情シス / etc… • 今日はオンライン登壇 • 昨年まで沖縄に住んでいたけど今は愛知からフルリモート勤務
最近やっていること 「データ」の会社 → データに関わるなら「分析」でも「基盤構築」でも「アプリ開発」でも何でもやる → コンテンツ制作とかは基本やっていない なんか Web で AR
やる案件きました!!!!! hoto さんどうですか!!???
「どうですか?」ではない • Web 屋は長くやってきたが XR (VR/AR) 領域はまったくの未知 • Unity?ってやつで3Dモデリングとかやるのだろうか、難しそう ※
Unity はモデリングツールではない • そもそも5年前に「Web の次は機械学習か XR 開発やろ」と思い立って 「でも XR 開発は酔うから機械学習にしよ」とちゅらデータを 選んだにも関わらず、なぜ今更 XR を? まぁ 面白そうだし やるかーーーーーー (勢い
というわけで (?) ここ1年半くらい なぜか Web で AR をやっています
Web AR について、詳しくは 同じチームの bayes さんが色々話してくれるはず! (しらんけど
本題にはいります スポンサートークなら何でも好きなことを喋っていいと聞きました
課題 Web AR 開発の難しさのひとつに「実機じゃないと検証しづらい」がある カメラへのアクセス ジャイロセンサへのアクセス 位置情報 (GPS) へのアクセス Web
AR アプリを動かすにはさまざまな ハードウェア・センサを利用する必要がある ※ しかも一部の Web API は HTTPS が必須 → PC だけで Web AR 開発するのはしんどい
プロジェクト開始当初の開発環境 都度ビルドして rsync で送ってからスマホから確認するという あたたかみのある開発フロー 開発用マシン 開発用スマホ どっかにあるサーバ (Global IP
アドレスとドメインがついている) Nginx example.com:443 開発環境 コードベース • TypeScript • React • Three.js ビルド 済み アプリ ビルド 済み アプリ ビルド 済み アプリ ビルド 済み アプリ ビルド 済み アプリ ビルド 済み アプリ 都度 手作業で rsync ビルド シンプルにめんどくさい Vite 使ってるのに HMR できない ブラウザキャッシュちゃんと消さないと ハマる (特に iOS Safari)
実現したいこと 開発用の public HTTPS エンドポイントにアクセスすると、謎のパワーで ローカルで動いている Vite dev server につながって欲しい
開発用マシン 開発用スマホ Docker Compose webapp (コンテナ) Vite dev server webapp:5173 開発環境 コードベース (コンテナ内にマウント) 謎のパワー
どうする?
補足:やらなかった方式 • ngrok 使う案 • 今回は IP 制限したい要件があったので ngrok だと有料プランが必須だった
• 後述する手法で作ってしまったほうが簡単そうだったので使わなかった • (類似ケースで) ngrok で事足りるケースはあると思う • 自己署名証明書使ってローカルネットワーク内で動くようにする案 • 新メンバーの環境構築が手間がかかる • 自己署名証明書を開発メンバー全員の PC にインストールしたくない • リモートワークしていると開発中画面の共有がしづらい (ペアプロしづらい) • 一人だけで開発するならこれでもよさそう 他にもいくつか案はあったが不採用に
とりあえず SSH Remote Port Forwarding これだけでできるっちゃできるが… 開発用マシン 開発用スマホ Docker Compose
webapp (コンテナ) どっかにあるサーバ (Global IP アドレスとドメインがついている) SSH Remote Port Forwarding localhost:8100 Nginx example.com:443 Vite dev server localhost:5173 開発環境 コードベース (コンテナ内にマウント) ssh -R 8100:localhost:5173 example.com proxy_pass http://localhost:8100; ※ WebSocket を通す設定も必要だが割愛 base = “/” // ここはよしなに server.host = true server.hmr.clientPort = 443 時間経つと接続が切れててストレス 開発環境を動かすたびに 長いコマンドを打つの面倒
余談: 開発環境はコマンド一発で動かせるべき (過激派) • 複数のプロジェクトに関わっていると「このアプリはどうやって動かすのだ っけな」と開発環境の切り替えのたびに README を読むのが面倒 • 開発環境の動かし方が複雑だと、新メンバーのオンボーディングや
引き継ぎのコストが高い • 初回だけは多少の初期設定 (環境変数書くとか) はあるとしても、 基本的には docker compose up だけで必要なサービスがすべて自動で 起動してくれるのが幸せでは??? • フロントエンドだけなら npm start でもいいが、たいてい DB とかも動かしたいので 開発環境って docker compose up だけで動くべきだと思いませんか???
続・SSH Remote Port Forwarding では、この部分を Docker 化しましょう 開発用マシン 開発用スマホ Docker
Compose webapp (コンテナ) どっかにあるサーバ (Global IP アドレスとドメインがついている) SSH Remote Port Forwarding localhost:8100 Nginx example.com:443 Vite dev server localhost:5173 開発環境 コードベース (コンテナ内にマウント) ssh -R 8100:localhost:5173 example.com
SSH クライアントの Docker 化 SSH クライアントを入れるだけの Dockerfile を書く SSH クライアントの設定を色々と書く
(Keep Alive とか known_hosts 無効化とか) リモートフォワードする起動スクリプトを書く 環境変数で接続先の設定 秘密鍵をコンテナ内にマウントする (ちょっとこわい) 秘密鍵は Docker Compose の Secrets を使ってホストからマウントする
できあがったものがこちら
できあがったものがこちら 開発用マシン 開発用スマホ Docker Compose webapp (コンテナ) ssh_client (コンテナ) どっかにあるサーバ
(Global IP アドレスとドメインがついている) SSH Remote Port Forwarding localhost:8100 Nginx example.com:443 Vite dev server webapp:5173 開発環境 コードベース (コンテナ内にマウント)
まとめ:結局何ができたの? • ローカル端末で動く Web サーバに、インターネット経由で 開発用スマホから HTTPS アクセスできるようにした • HMR
ができる! • docker compose up コマンド一発でこの開発環境が起動できるようにした • 環境構築が簡単!
この話は何に役立つの? • Web AR アプリ開発には役に立つかもしれない • Web AR アプリを開発していこう!(?) •
SSH クライアントをコンテナ内で起動したいことがあれば • そんなユースケースはない さぁ…
お問い合せ先 (?) 今日は会場にいないので、気になることがあった方はインターネットで Twitter • フォローしてください!!!(直球) • メンション飛ばして質問投げてくれてもいいです Meety •
なんでも雑に話しましょう • 「ちゅらデータ Meety」とかでググると出てきそう
@churadata 月に一度開催の ライブ配信番組 ちゅらコラボ 最新のイベント情報は 毎回異なるテーマで様々な企業様とTechトークをする でも随時発信しています 日々の情報発信 技術ブログ 採用情報
カジュアル面談
© 2022 Chura DATA inc. PROPRIETARY & CONFIDENTIAL. データ分析・AI 開発だけじゃな
い! 社内の Web アプリエンジ ニアに入社経緯やプロジェクト のことを聞いてみた (ブログ記事) 結局どっちがいいの? 自社開発 vs 受託開発 〜ちゅらデータの Webエンジニアが語る受託開発企 業の赤裸々トーク (YouTube)
Web エンジニア 積極採用中です!!!