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

Visual Studio CodeとGitHub Codespacesで始めるクリーン開発環境

Visual Studio CodeとGitHub Codespacesで始めるクリーン開発環境

ローカル環境を汚したくない!新規メンバーの開発環境を構築する手間や時間を短くしたい!コードレビューや掛け持ちプロジェクトで環境の切り替えが面倒!そんな悩みを解決できるかも!?
Visual Studio Codeのリモート開発機能を使ったクリーン開発環境構築の始め方を解説します。

とことんDevOps

June 22, 2023
Tweet

More Decks by とことんDevOps

Other Decks in Technology

Transcript

  1. 綺麗な設計をしたい・・・クリーンアーキテクチャ 綺麗なコードを書きたい・・・クリーンコード 綺麗な開発環境を作りたい・・・クリーンデベロップメント!? • 開発プロジェクト内で開発環境の統一や配布をもっと手軽にしたいけど ◦ 秘伝のタレ化した開発環境を他の人に共有するのはちょっと... • 副業や案件で環境を柔軟に切り替えたいけど... ◦

    ローカルマシンにあれこれ環境を構築するのはちょっと... ◦ 古いキャッシュやバージョン違いで悩まされ、時間を浪費したくないし... • 一時的にGPU強めなマシンで作業したい... • iPadで開発してみたい... 開発環境の再現性とポータブル性を高めていく クリーン開発環境とは? 5
  2. • Microsoftが開発しているエディタの1つ • Visual Studio Code=VS Code、code • 主な機能 ◦

    シンタックスハイライト、スニペット、インテリセンス、リファクタリング、デバッグ、テスト • 元々はHTML5ベースのWebブラウザーで動くエディター&ツールフレームワークとして開発 ◦ Internet Explorer(IE)やMicrosoft EdgeのF12開発者ツール など • 2015年04月 Build 2015(Microsoftの開発者向けカンファレンス)でプレビュー版が発表 ◦ 「Code editing, redefined」(コードエディターの再定義)のスローガンを掲げている ◦ 統合開発環境(IDE)とテキストエディターの中間的な位置付け • 2015年11月にオープンソースとして公開 ◦ オープンソースな場で開発を行い、ブランド製品としてリリースしている(Chromiumと同じようなスタイル) ◦ Visual Studioからより高速に開発サイクルを回すために機能を絞って軽量なエディターとして作られた • 拡張機能から拡張APIを通じてほぼすべての機能にアクセス可能 • リリースサイクルは、毎月第1金曜あたり。 ◦ Youtubeでリリースパーティがライブ配信される Visual Studio Codeとは? 8
  3. リモート開発とは? • Visual Studio Codeが提供している機能の1つ • コンテナやリモートマシン、Windows Subsystem for Linux(WSL)上に開発環境を構築できる機

    能 • ソースコードや実行環境、CLIツールなどはすべてリモート環境上に構築する メリット • ローカルマシンの構成に影響を与えないように、開発環境を分離できる ◦ ローカルにソースコードを置く必要がない • 開発プロジェクトのメンバー間で一貫した開発環境を維持することができる • ローカルマシン以外で実行されているアプリケーションをデバッグできる 12 https://code.visualstudio.com/docs/remote/remote-overview
  4. リモート開発環境の選択肢 14 開発環境の場所 説明 ローカルマシン ≠仮想環境 仮想化技術などを用いずに直接マシン上に実行環境やツールなどをインストー ルして構築した環境 =仮想環境 仮想化技術を用いて仮想環境上に実行環境やツールなどをインストールして構

    築した環境 クラウド上 AWS EC2などを用いてクラウド環境上に実行環境やツールなどをインストールして 構築した環境 GCP GCEなどを用いてクラウド環境上に実行環境やツールなどをインストールして 構築した環境 Azure Virtual Machinesなどを用いてクラウド環境上に実行環境やツールなどをインス トールして構築した環境 ホスティングサービス GitHub Codespaces GitHubが提供しているサービス上で構築した環境 オンプレミス 社内サーバー/DC (省略) Raspberry Pi (省略) 休眠端末 (省略)
  5. 必要な拡張機能の種類 VS Codeは、拡張機能をインストールして使い勝手をよくしていくもの リモート開発向けに拡張機能パックをインストール • Remote - SSH ◦ ローカルマシンからSSH接続でリモートマシンを開発環境として使用

    • Remote - Tunnels ◦ ローカルマシンからトンネル経由でリモートマシンを開発環境として使用 • Dev Containers ◦ ローカルマシンからDocker上のコンテナを開発環境として使用する • WSL ◦ WindowsのWSLを開発環境として使用する GitHub Codespaces • GitHubが提供しているCodespacesの環境を開発環境として使用する 16
  6. ※1 仮想化技術の1つであるDockerやVirtualboxを前提 ※2 AWSやGCP、Azureなどを前提 ※3 GitHubが提供するホスティングサービスを前提 開発環境の選択肢 17 拡張機能 Remote

    - SSH Remote - Tunnel Dev Containers GitHub Codespaces (ローカルマシン上) - - - - ローカルマシンの仮想環境上※1 ⚫ - ⚫ - クラウド上※2 ⚫ ⚫ ⚫ - ホスティングサービス上※3 - - - ⚫ オンプレミス ⚫ ⚫ ⚫ -
  7. GitHub Codespacesとは 19 • クラウドでホストされる開発環境 ◦ GitHubのDockerコンテナ内でホストされる ◦ Ubuntuイメージから作成 ▪

    人気の高いプログラミング言語の実行環境がプリインストール済み • 従量課金制 ◦ 毎月無料枠の付与あり ▪ 無料枠を超えて使用する場合には、設定変更が必要 • スペック ◦ 最小:2コア、8GB RAM、32GBストレージ ◦ 最大:32コア、64GB RAM、128GBストレージ • Configuration-as-Code:CaC ◦ 構成ファイルでプロジェクトをカスタマイズできる • 自動停止 ◦ 非アクティブ状態が30分間続くと自動で実行停止(時間は、設定により変更可能)
  8. A:できる • 自動ポート転送により、Codespaces内で実行されているTCPポートにアクセスできる • 手動で転送設定も可能 • ポート公開設定は、プライベートが初期設定 ◦ ① 自分のみ

    ◦ ② 組織内メンバーの限定アクセス ◦ ③ URLを知っている人の限定アクセス Webアプリを実行したらブラウザからアクセスできる? 21
  9. ①-1 GitHub上からデフォルト設定で作成 • 「Codeボタン」>「Codespacesタブ」をクリック • 「Create codespace on main」をクリック ①-2

    GitHub上からスペックやブランチを指定して作成 • 「・・・」から「New with options…」クリック ② Visual Studio Codeから作成 • 拡張機能から作成できる(省略) Codespaceの作成 24
  10. 25

  11. 拡張機能を使用する際の注意点 • なにかとお世話になることが多いからこそできるだけ安全に使いたい • マーケットプレイスからインストールしても100%安全ではない ◦ 2021年に拡張機能を悪用したサイバー攻撃がニュースで話題 ◦ マーケットプレイス側で配信時などにチェックされているが 「羊の姿をしたオオカミ」が潜んでいる可能性もある

    ◦ 拡張機能にコード署名の付与開始して、移行期間中 ▪ v1.75でアナウンスされた ▪ 2022/11以降のアップロード分は必須。他は順次 ポイント • マーケットプレイスからダウンロード • 認証バッチが付いている ◦ 2021年に追加された機能 ◦ Marketplace側で配信者とドメイン所有者が一致しているか確認済み • ダウンロード数 ◦ 同じ名前でも大きく違う場合があり、気づくきっかけになる 29 https://code.visualstudio.com/updates/v1_62#_verified-extension-publishers
  12. 主な設定項目 38 設定項目 説明 name Dev container上で表示する名前 image 開発環境に使用するコンテナイメージを選択 build

    (別スライドにて) features コンテナ内で使用する追加ツールを定義。 VS CodeやGitHubのUI上から選択することも可能。 使用できるツールの一覧:https://containers.dev/features forwardPorts (省略) initializeCommand コンテナを立ち上げる前にホストマシン側で任意のコマンドを実行できる。 postCreateCommand コンテナ作成後にコンテナ内で任意のコマンドを実行できる。 初めて開発を始める際に、お決まりで実行するnpm installなどを設定しておくと便利 (似たものにonCreateCommand、updateContentCommandなどがある) customizations (別スライドにて) remoteUser (省略)
  13. customizationsで設定できること • インストールすべき拡張機能の指定やVS Codeの設定が定義できる • settings.jsonでは、インデントサイズや使用する静的解析ツールなどが定義できる ◦ 設定はできるが.vscode/settings.jsonに設定は寄せておいた方がいいかも { "customizations":

    { "vscode": { "extensions": [], "settings": {}, } } } 39 設定項目 説明 extensions GitHub Codespacesでインストールするべき拡張機能のIDを指定できる settings settings.jsonファイルで定義できる内容が指定できる
  14. 40 設定ファイルのスコープ 3パターン • ユーザー(青枠) ◦ すべてのワークスペースで有効 ◦ プロファイル機能で切り替えも可能 ◦

    GitHubを通じて他者と共有されない ▪ プロジェクト外に作成される • ワークスペース(緑枠) ◦ ワークスペース内のみで有効 ◦ GitHubを通じて共有することが可能 ▪ .vscode/settings.json • フォルダ(赤枠) ◦ 特定のフォルダのみに有効 ◦ Multi-root Workspaces使用時のみ ◦ GitHubを通じて共有することが可能 ▪ プロジェクト配下にpjA/.vscode/settings.json
  15. Remote - SSH • リモートマシンにSSHを使って接続するための拡張機能 • 開発サーバーや検証サーバーに直接入って、ログファイルなどを確認できる • CLIコマンドに不慣れな人やファイル編集やログ調査などでUI機能の恩恵が受けられる •

    開発環境というよりは、CLI操作より少しGUI寄りの恩恵を受けながら作業したい時向け • SSHで接続してから接続先でDev containersを使った組み合わせ技も可能 44