Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JTF2018

 JTF2018

開発環境をクラウドへ!
〜Macに別れを告げて、クラウド中心の開発生活を始めるまで〜

※ 2018年7月29日開催の July Tech Festa で話す内容です。
https://2018.techfesta.jp/speakers#E40

Tsutomu Kawamura

July 29, 2018
Tweet

More Decks by Tsutomu Kawamura

Other Decks in Programming

Transcript

  1. TL;DR • GCP or AWS • Codeanywhere or CodeTasty or

    Koding or Cloud9 … • VPN (IPsec+L2TP) + いろいろ • Figmaほか Webサービス各種 各種組み合わせで、クラウド生活可能
  2. 全体像 • ことの起こり • 環境の構成例と、方針 • iPad? Chromebook? Linux? Mac?

    Windows? • 各論 ◦ テキストエディタの選定 / ターミナルの選定 ◦ 仮想マシンとネットワーク / Docker = スタートメニュー ◦ Kryptonで鍵管理 / SSH接続のワザ • モバイルでも使い倒す • 半年の実践を越えて
  3. ことの起こり • ことの起こり • 環境の構成例と、 • iPad? Mac? Lin •

    各論 ◦ テキストエディタの ◦ 仮想マシンとネット ◦ Kryptonで鍵管理 • モバイルでも使い • 半年の実践を越え
  4. 環境の構成例と、 方針 • ことの起こり • 環境の構成例と、 • iPad? Mac? Lin

    • 各論 ◦ テキストエディタの ◦ 仮想マシンとネット ◦ Kryptonで鍵管理 • モバイルでも使い • 半年の実践を越え
  5. iPad? Chromebook? Linux? Mac? Windows? • ことの起こり • 環境の構成例と、 •

    iPad? Mac? Lin • 各論 ◦ テキストエディタの ◦ 仮想マシンとネット ◦ Kryptonで鍵管理 • モバイルでも使い • 半年の実践を越え
  6. しかし、WebKit 縛り... 2.5.6 Apps that browse the web must use

    the appropriate WebKit framework and WebKit Javascript. App Store Review Guidelines https://developer.apple.com/app-store/review/guidelines iPad Chromebook Linux MacBook Windows ふ・ざ・け・ん・な !
  7. Chrome OS • 基本的にはChromeしか動かない • はずだったんだけど - Android Apps -

    去年から - Linux Apps - 今秋から • Windowsより、フォントがキレイ iPad Chromebook Linux MacBook Windows
  8. Crostiniを有効にすると、 Linuxアプリが使える iPad Chromebook Linux MacBook Windows • ターミナル •

    Firefox ほか / X Window Apps 2018年7月時点の制限事項: • Xの中で日本語変換に難 (表示自体はOK) • 機種によって、コンパイルが通らないケースあり (ARM64とか)
  9. プリインストール機が少ない というか、国内ノート機はほぼ全滅? 例: Ubuntu選択可能な機種だと… • Dell Latitude 7390: 27万 •

    Dell Latitude 5290: 22万 (非タッチ) • System76 Galago Pro: 12万 + 送料 (非タッチ) iPad Chromebook Linux MacBook Windows
  10. MacBook / MacBook Pro • iOS App 作るなら必須 • 工芸品としてのクオリティ

    • UNIX • 値段が高い • 解像度低め • タッチスクリーンではない →モバイルの開発で、普通に不便 iPad Chromebook Linux MacBook Windows
  11. Chrome OS 的に使うなら • Windows 10 になって、UIがクリーンに • Chromeの「ショートカットを作る…」機能 •

    英語環境で使うと、比較的つらくない • 300% Retina の世界 / タッチスクリーン • 日本語フォントがやっぱりツラカッタ iPad Chromebook Linux MacBook Windows
  12. iPad Chromebook Linux MacBook Windows 例えば、こんな Windows機 (今月発売) Asus ZenBook

    S - Core i7, 16GB RAM, 1TB SSD, 4K タッチスクリーン, 1.0kg, 22万円
  13. Linux on Windows • 2017年から標準装備 • 「その記述、どのWindows?」問題 cmd.exe? Cygwin? PowerShell?

    BoW? • SSHだけなら、100%互換 ssh, mosh, kr iPad Chromebook Linux MacBook Windows
  14. iPad Pro Chrome OS Mac Win SSH / Mosh ✔

    ✔ ✔ ✔ Linux / UNIX環境 ✔ (Crostini) ✔ ✔ (BoW) ブラウザの自由度 ✔ (Crostini) ✔ ✔ タッチスクリーン ✔ ✔ ✔ 工芸品としての品質 ✔ 玉石混交 ✔ 玉石混交 UIの日本語フォント ✔ ✔ ✔ 価格 ※ 11万~ 9万~ 19~79万 13~40万 ※iPad Proは12インチのペン付き、 ChromebookはPixelbookの下位機種、 MacはCore i5以上のMacBook (Pro)、 Windows機はCore i5以上でタッチ可能かつポータブルな範囲で ハードウェアまとめ
  15. テキストエディタの 選定 • ことの起こり • 環境の構成例と、 • iPad? Mac? Lin

    • 各論 ◦ テキストエディタの ◦ 仮想マシンとネット ◦ Kryptonで鍵管理 • モバイルでも使い • 半年の実践を越え
  16. Codeanywhere CodeTasty Cloud 9 Nuclide エディタ種別 軽量 軽量 重量 (IDE)

    軽量 日本語入力 ✔ NG ✔ ✔ 同時編集 ✔ ✔ ✔ iPad Pro iOS版は微妙 ✔ (未検証) Chromebook ✔ ✔ ✔ ▲ Crostini Mac / Win ✔ ✔ ✔ ✔ Android Phone ✔ Android版 ✔ Web版 ムリ オンラインエディタまとめ
  17. ターミナルの選定 • ことの起こり • 環境の構成例と、 • iPad? Mac? Lin •

    各論 ◦ テキストエディタの ◦ 仮想マシンとネット ◦ Kryptonで鍵管理 • モバイルでも使い • 半年の実践を越え
  18. Hyper Electronベースで美しいUI // 設定ファイルでBashを指定 module.exports = { config: { //

    shell: '' // Command Prompt shell: 'C:\\Windows\\System32\\bash.exe' } } 2
  19. OS標準 Hyper Blink GCP エディタ付属 接続の安定性 ✔ ✔ ✔ iPad

    Pro ✔ ✔ (App) ? Chromebook ✔ (Crostini) ※1 ✔ ✔ Windows マシン ✔ (BoW) ✔ (BoW) ✔ ✔ MacBook (Pro) ✔ ✔ ✔ ✔ Android Phone ※2 ✔ (App) ✔ ターミナルまとめ ※1: Crostini経由では利用可能なはず ※2: Androidにも同様のツールはいろいろ ※3: Chromebookはプラットフォームによって、 Kryptonがコンパイル不可
  20. 仮想マシンと ネットワーク • ことの起こり • 環境の構成例と、 • iPad? Mac? Lin

    • 各論 ◦ テキストエディタの ◦ 仮想マシンとネット ◦ Kryptonで鍵管理 • モバイルでも使い • 半年の実践を越え
  21. gcloud dns record-sets transaction add \ -z "your-zone" \ --name

    "hello.example.com." \ --ttl 300 \ --type A "10.146.0.23" \ --transaction-file="${TEMP}" 起動時、IPアドレスをDNSへ報告 Cloud DNSの自動設定スクリプトの一部 - 固定IPアドレス課金を回避
  22. Docker = スタートメニュー • ことの起こり • 環境の構成例と、 • iPad? Mac?

    Lin • 各論 ◦ テキストエディタの ◦ 仮想マシンとネット ◦ Kryptonで鍵管理 • モバイルでも使い • 半年の実践を越え
  23. Docker コンテナ Electron Docker 管理 Portainer Kitematic (公式) MongoDB クライアント

    Nosqlclient Nosqlclient MongoDB Commpass (公式) MySQL クライアント phpMyAdmin TeamSQL SSH クライアント WebSSH2 (xterm.js) Hyper REST API クライアント Insomnia, Postman Git クライアント GitKraken Docker vs Electron ※上記は、アプリケーションの一例です。ほかにもいろいろ。
  24. Docker用VMを確保 GCPなら COS (Container-Optimized OS) が楽 • ChromiumOSベース • 自動アップデート

    • `docker` ほか、セットアップ済み ローカルにアプリを入れる感覚で、docker run
  25. COS 手動設定 COS 自動設定 Kubernetes VMの数 基本1台 基本1台 ※ 複数台

    コンテナの数 いくつでも 1つのみ いくつでも IPアドレス 基本1つ 基本1つ いくつでも ポートマッピング 必要 不要 不要 GUI なし (Portainer ほかを自前で) GCP GCP 難易度 ★ ★ ★★★ GCP上のDockerの利用方法 3種 ※インスタンスグループを使えば、複数台運用可能
  26. Kryptonで鍵管理 • ことの起こり • 環境の構成例と、 • iPad? Mac? Lin •

    各論 ◦ テキストエディタの ◦ 仮想マシンとネット ◦ Kryptonで鍵管理 • モバイルでも使い • 半年の実践を越え
  27. 作業環境 (GCP) → GitHub ほか • 作業用VMにも、`kr` をインストール & ペアリング

    • 公開鍵をGitHubに登録 $ git clone [email protected]:cognitom/hogehoge.git Gitも、内部的にSSHを呼び出している → 間接的に kr が利用可
  28. SSH接続のワザ • ことの起こり • 環境の構成例と、 • iPad? Mac? Lin •

    各論 ◦ テキストエディタの ◦ 仮想マシンとネット ◦ Kryptonで鍵管理 • モバイルでも使い • 半年の実践を越え
  29. mosh $ sudo apt-get install -y mosh ※鍵設定は、SSHのものがそのまま有効 $ ssh

    instance1.sample.com $ mosh instance1.sample.com インストール
  30. モバイルでも 使い倒す • ことの起こり • 環境の構成例と、 • iPad? Mac? Lin

    • 各論 ◦ テキストエディタの ◦ 仮想マシンとネット ◦ Kryptonで鍵管理 • モバイルでも使い • 半年の実践を越え
  31. 半年の実践を越えて • ことの起こり • 環境の構成例と、 • iPad? Mac? Lin •

    各論 ◦ テキストエディタの ◦ 仮想マシンとネット ◦ Kryptonで鍵管理 • モバイルでも使い • 半年の実践を越え
  32. A: 本質的にムリ • ローカルアクセス (LAN, USB) が必要なアプリ → 多くは、Electronに向かう •

    データ量多すぎ • 高度なビデオ編集、3Dアニメーション (After Efects, Maya, …) B: クラウドのVMでも実行可能 • IDE縛り (Xcode, Unity, …) • Adobe 画像ツール ← ほんとにいるの? それ • Microsoft Office 系 クラウド化不可案件
  33. A: 本質的にムリ • ローカルアクセス (LAN, USB) が必要なアプリ → 多くは、Electronに向かう •

    データ量多すぎ • 高度なビデオ編集、3Dアニメーション (After Efects, Maya, …) B: クラウドのVMでも実行可能 • IDE縛り (Xcode, Unity, …) • Adobe 画像ツール ← ほんとにいるの? それ • Microsoft Office 系 クラウド化不可案件 逆に言えば、 これら以外は「解脱」可能!
  34. モバイルから還流するUIトレンド These changes are inspired by the new culture of

    work and designed to deliver a balance of power and simplicity. “Power and simplicity—updates to the Office 365 user experience” -- Microsoft 365 Blog, June 13, 2018