6/21開催のとことんDevOps勉強会で登壇した際に画面に投影したスライドです。
Visual Studio CodeとGitHub Codespacesで始めるクリーン開発環境日本仮想化技術株式会社VirtualTech.jp2023/06/211
View Slide
2自己紹介
● クリーン開発環境とは● Visual Studio Codeとは● リモート開発とは● リモート開発環境の選択肢● GitHub Codespacesを使ったリモート開発環境の始め方今回の話3
クリーン開発とは？4
綺麗な設計をしたい・・・クリーンアーキテクチャ綺麗なコードを書きたい・・・クリーンコード綺麗な開発環境を作りたい・・・クリーンデベロップメント！？● 開発プロジェクト内で開発環境の統一や配布をもっと手軽にしたいけど○ 秘伝のタレ化した開発環境を他の人に共有するのはちょっと...● 副業や案件で環境を柔軟に切り替えたいけど...○ ローカルマシンにあれこれ環境を構築するのはちょっと...○ 古いキャッシュやバージョン違いで悩まされ、時間を浪費したくないし...● 一時的にGPU強めなマシンで作業したい...● iPadで開発してみたい...開発環境の再現性とポータブル性を高めていくクリーン開発環境とは？5
その日から開発スタートしたい609:00 10:00 13:00 18:00 19:00
Visual Studio Codeとは？7
● 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
Stack Overflow Developer Surveyで見る人気ランキング9Stack Overflow Developer Survey(2023)Stack Overflow Developer Survey(2022)New!!
10https://code.visualstudio.com/docs/getstarted/userinterface
リモート開発とは？11
リモート開発とは？● Visual Studio Codeが提供している機能の1つ● コンテナやリモートマシン、Windows Subsystem for Linux(WSL)上に開発環境を構築できる機能● ソースコードや実行環境、CLIツールなどはすべてリモート環境上に構築するメリット● ローカルマシンの構成に影響を与えないように、開発環境を分離できる○ ローカルにソースコードを置く必要がない● 開発プロジェクトのメンバー間で一貫した開発環境を維持することができる● ローカルマシン以外で実行されているアプリケーションをデバッグできる12https://code.visualstudio.com/docs/remote/remote-overview
リモート開発環境の選択肢13
リモート開発環境の選択肢14開発環境の場所 説明ローカルマシン ≠仮想環境 仮想化技術などを用いずに直接マシン上に実行環境やツールなどをインストールして構築した環境=仮想環境 仮想化技術を用いて仮想環境上に実行環境やツールなどをインストールして構築した環境クラウド上 AWS EC2などを用いてクラウド環境上に実行環境やツールなどをインストールして構築した環境GCP GCEなどを用いてクラウド環境上に実行環境やツールなどをインストールして構築した環境Azure Virtual Machinesなどを用いてクラウド環境上に実行環境やツールなどをインストールして構築した環境ホスティングサービス GitHub Codespaces GitHubが提供しているサービス上で構築した環境オンプレミス 社内サーバー/DC (省略)Raspberry Pi (省略)休眠端末 (省略)
必要な拡張機能と組み合わせ15
必要な拡張機能の種類VS Codeは、拡張機能をインストールして使い勝手をよくしていくものリモート開発向けに拡張機能パックをインストール● Remote - SSH○ ローカルマシンからSSH接続でリモートマシンを開発環境として使用● Remote - Tunnels○ ローカルマシンからトンネル経由でリモートマシンを開発環境として使用● Dev Containers○ ローカルマシンからDocker上のコンテナを開発環境として使用する● WSL○ WindowsのWSLを開発環境として使用するGitHub Codespaces● GitHubが提供しているCodespacesの環境を開発環境として使用する16
※1 仮想化技術の1つであるDockerやVirtualboxを前提※2 AWSやGCP、Azureなどを前提※3 GitHubが提供するホスティングサービスを前提開発環境の選択肢17拡張機能Remote - SSH Remote - Tunnel Dev Containers GitHub Codespaces(ローカルマシン上) - - - -ローカルマシンの仮想環境上※1⚫ - ⚫ -クラウド上※2⚫ ⚫ ⚫ -ホスティングサービス上※3 - - - ⚫オンプレミス ⚫ ⚫ ⚫ -
GitHub Codespacesを使ったリモート開発の始め方18
GitHub Codespacesとは19● クラウドでホストされる開発環境○ GitHubのDockerコンテナ内でホストされる○ Ubuntuイメージから作成■ 人気の高いプログラミング言語の実行環境がプリインストール済み● 従量課金制○ 毎月無料枠の付与あり■ 無料枠を超えて使用する場合には、設定変更が必要● スペック○ 最小：2コア、8GB RAM、32GBストレージ○ 最大：32コア、64GB RAM、128GBストレージ● Configuration-as-Code：CaC○ 構成ファイルでプロジェクトをカスタマイズできる● 自動停止○ 非アクティブ状態が30分間続くと自動で実行停止(時間は、設定により変更可能)
20https://docs.github.com/ja/codespaces/overview
A：できる● 自動ポート転送により、Codespaces内で実行されているTCPポートにアクセスできる● 手動で転送設定も可能● ポート公開設定は、プライベートが初期設定○ ① 自分のみ○ ② 組織内メンバーの限定アクセス○ ③ URLを知っている人の限定アクセスWebアプリを実行したらブラウザからアクセスできる？21
A：できる● 次の場合は、追加設定不要で接続できる○ ローカルホストポートを使用している場合○ リモートドメインのパブリックポートにアクセスする場合● リモートのプライベートポートに接続する場合は、認証情報をリクエストに付与する必要あり○ フロントエンドとバックエンドでコードスペースを分けている場合などのケースAPIクライアントから接続することはできる？22
Codespaceを作成しよう23
①-1 GitHub上からデフォルト設定で作成● 「Codeボタン」＞「Codespacesタブ」をクリック● 「Create codespace on main」をクリック①-2 GitHub上からスペックやブランチを指定して作成● 「・・・」から「New with options…」クリック② Visual Studio Codeから作成● 拡張機能から作成できる(省略)Codespaceの作成24
25
デスクトップ版のVS Codeから起動するようにするには？A：設定変更でデスクトップ版VS Codeから起動できるGitHubのデフォルト設定ではWeb版のVS Codeで起動するが、個人設定画面から設定変更できる26
構成ファイルを作成しよう27
拡張機能をインストールhttps://marketplace.visualstudio.com/items?itemName=GitHub.codespaces28
拡張機能を使用する際の注意点● なにかとお世話になることが多いからこそできるだけ安全に使いたい● マーケットプレイスからインストールしても100%安全ではない○ 2021年に拡張機能を悪用したサイバー攻撃がニュースで話題○ マーケットプレイス側で配信時などにチェックされているが「羊の姿をしたオオカミ」が潜んでいる可能性もある○ 拡張機能にコード署名の付与開始して、移行期間中■ v1.75でアナウンスされた■ 2022/11以降のアップロード分は必須。他は順次ポイント● マーケットプレイスからダウンロード● 認証バッチが付いている○ 2021年に追加された機能○ Marketplace側で配信者とドメイン所有者が一致しているか確認済み● ダウンロード数○ 同じ名前でも大きく違う場合があり、気づくきっかけになる29https://code.visualstudio.com/updates/v1_62#_verified-extension-publishers
コマンドパレットから起動● コマンドパレットから設定ファイルの作成を開始○ ⌘ Command + ⇧Shift + P● いくつかの質問に答える30
構成ファイルの作成方法を選択● 上段○ 既に作成済みの構成ファイルを編集する場合に選択する● 下段○ 新しい構成ファイルを作成する場合に選択する31
ベースとするイメージを選択● チェックマークのバッチがついているものはDev Container拡張機能が公式で提供しているもの● 右端のインフォメーションアイコンをクリックして作成者が信頼できるか確認を32
Nodeのバージョンを選択● Node.jsは最新版と推奨版の2バージョンを配信している● 今回は推奨版を使用(資料作成時点では18.xが最新)33
追加機能を選択選択しなくてもOK● コンテナのベースイメージに追加するツールを選択することで、手軽にセットアップできる○ AWS CLIやDockerコマンド、GitHub CLIなど34
構成ファイルを作成したら再構築● 構成ファイルを変更したら、再構築するまでは環境に反映されない35
構成ファイルの書き方を理解しよう36
実際の設定ファイルのイメージ37
主な設定項目38設定項目 説明name Dev container上で表示する名前image 開発環境に使用するコンテナイメージを選択build (別スライドにて)features コンテナ内で使用する追加ツールを定義。VS CodeやGitHubのUI上から選択することも可能。使用できるツールの一覧：https://containers.dev/featuresforwardPorts (省略)initializeCommand コンテナを立ち上げる前にホストマシン側で任意のコマンドを実行できる。postCreateCommand コンテナ作成後にコンテナ内で任意のコマンドを実行できる。初めて開発を始める際に、お決まりで実行するnpm installなどを設定しておくと便利(似たものにonCreateCommand、updateContentCommandなどがある)customizations (別スライドにて)remoteUser (省略)
customizationsで設定できること● インストールすべき拡張機能の指定やVS Codeの設定が定義できる● settings.jsonでは、インデントサイズや使用する静的解析ツールなどが定義できる○ 設定はできるが.vscode/settings.jsonに設定は寄せておいた方がいいかも{"customizations": {"vscode": {"extensions": [],"settings": {},}}}39設定項目 説明extensions GitHub Codespacesでインストールするべき拡張機能のIDを指定できるsettings settings.jsonファイルで定義できる内容が指定できる
40設定ファイルのスコープ 3パターン● ユーザー(青枠)○ すべてのワークスペースで有効○ プロファイル機能で切り替えも可能○ GitHubを通じて他者と共有されない■ プロジェクト外に作成される● ワークスペース(緑枠)○ ワークスペース内のみで有効○ GitHubを通じて共有することが可能■ .vscode/settings.json● フォルダ(赤枠)○ 特定のフォルダのみに有効○ Multi-root Workspaces使用時のみ○ GitHubを通じて共有することが可能■ プロジェクト配下にpjA/.vscode/settings.json
独自で定義したイメージを使用することはできる？A：できるDockerfileやdocker-compose.ymlのファイルを作成してから、構成ファイルに次の設定項目を追加することで、使用することができます。参照されるファイルの場所は、構成ファイルが格納されている場所が起点。設定により変更も可能。Dockerfileの場合{“build”: {“dockerfile”: “Dockerfile”,“context”: “.”}}41docker-compose.ymlの場合{“dockerComposeFile”: “docker-compose.yml”,“service”: “devcontainer”,“workspaceFolder”: “/workspaces/${localWorkspaceFolderBasename}”}
キー情報や個人固有な情報はどのように扱えばいい？A：Codespaces用のシークレットを使用GitHub Actionsでお馴染みのシークレット機能がCodespacesでも使用できる環境が立ち上がったら、都度設定することも可能だが手間似た仕組みにdevcontainer.envがあるが、Codespaces以外での使用がメイン42
Remote - SSH43
Remote - SSH● リモートマシンにSSHを使って接続するための拡張機能● 開発サーバーや検証サーバーに直接入って、ログファイルなどを確認できる● CLIコマンドに不慣れな人やファイル編集やログ調査などでUI機能の恩恵が受けられる● 開発環境というよりは、CLI操作より少しGUI寄りの恩恵を受けながら作業したい時向け● SSHで接続してから接続先でDev containersを使った組み合わせ技も可能44
リモートな環境を用意(AWS編)● AWSでEC2を作成して、SSHの接続情報を取得45
SSHの設定ファイルを追加SSHの設定ファイル(~/.ssh/config)に追加Host remotesshHostName ec2-xxxx.ap-northeast-1.compute.amazonaws.comUser ec2-userIdentityFile ~/.ssh/xxxxx.pem46
VS Codeから作成する場合47SSHコマンドを貼り付けると自動でConfigファイルを作成してくれる
SSHでEC2に接続● アクティビティバー＞リモートエクスプローラーを選択● リモートを選択して接続48
接続完了● Remote: SSHで接続した場合は、このように見える● RaspberryPi 4などを活用することも可能(2GB or 4GBあたり)● 活用例○ JetsonNANOにBE環境、社内のVM上にFE環境を構築したり49
最後に50
● GitHub CodespacesやDev containerを使用している人は、個人利用止まりが多い● プロジェクトやチーム単位で導入を検討していくところが増えてほしい● 新しい使い方なので少し発想を柔らかくして考えると意外とアイデアが出てくる○ 新しい開発環境を模索する際に、現環境への影響を気にせずに攻めた検証ができる● スルメを噛むように触るほど面白くなってきたので、今後も継続的に検証と情報収集は続ける最後に51
おわり52
ismt7
onecareer_tech
aki_iinuma
wakamatsu_takumu
masa5555
lwug
h1kita
colopl
rynsuke
hakubishin3
oracle4engineer
i35_267
yutoy
deanohume
chrisshort
jakevdp
marcelosomers
rocio
ddemaree
jlugia
brettharned
kneath
lynnandtonic
holman
frogandcode