VS Codeやコンテナ、CI/CDを活用した DevOps時代の開発環境を考えよう 日本仮想化技術株式会社 VirtualTech.jp 2022/04/26 1

● 本名: 石本　達也 ● 日本仮想化技術 DevOpsエンジニア ● 長崎出身→福岡→東京 ● 2012年10月　OSC福岡で初めて学生として参加し、オープンソースを知る ● 2015年04月　新卒として商社系のSIerに入社 ○ SAPの導入支援&アドオン開発を担当 ● 2017年07月　ベンチャー系の人材紹介会社に入社 ○ 大手通信会社でサービス開発プロジェクトで要件調整やマルチベンダとの折衝や調整を担当 ○ 社内に戻りディレクション業務とRPA開発チーム立ち上げをエンジニア兼務で担当 ● 2022年01月　日本仮想化技術に入社し、DevOpsエンジニアとして奮闘中 自己紹介 2

本日のアジェンダ ● 自己紹介 ● どんな思いでDevOps領域に飛び込んだのか ● 開発環境を少し分類して整理してみる ● Visual Studio Codeについて ● おすすめの拡張機能と注意点 ● Visual Studio Codeと一緒に使うツールやソフトウェア ● しくじりと課題 3

どんな想いでDevOps領域に飛び込んだのか 4 https://event.ospn.jp/slides/OSC2022-OnlineSpring/220311DevOps.pdf

どんな想いでDevOps領域に飛び込んだのか ● チームごとに文化やルールが異なる ○ チームを異動すると全く違う会社に転職するのと変わらないレベルで1から ○ 新しいチームが立ち上がってもナレッジが共有されずに、同じ問題の繰り返し ● 進まない自動化 ○ クラウドの登場でインフラやシステムの柔軟性は高くなったが、少子高齢化とITニーズ拡大が相まっ てエンジニア不足が年々深刻化している ○ 目先の施策だけを追いかけがちで、運用でカバーされた業務などが定常業務化 ■ 技術的負債の蓄積が進み、重要なタスクに割り当てられる時間が減っていても外から見ると伝 わりにくい ● 同じようで時間が経てば不揃いな開発環境 ○ 使っているツールやソフトウェアのバージョンが新しすぎる、古すぎる ○ 他に使いやすいツールを見つけて個人のみで使っていて、全体的な質の向上に繋がらない ● 持続可能な開発プロセスではない ○ 特定の担当者に属人化して現状把握や引き継ぎに時間がかかる ○ 退職や異動によりこれまでの取り組みや文化が薄れて消えてしまう 5

まずは開発環境を作るところから 6

コードを書く環境と実行する環境 ① ローカルで書く / ローカルで実行 ● 個人で開発していたりするとよくあるパターン ● 開発端末のハードウェアやスペックに左右されるが、追加コストがほぼない ● 外部サービスの影響を受けにくい ② ローカルで書く / リモートで実行 ● 利用するリモート環境のコスト追加で必要 (無料版を除く)。運用コストも ● リモートサーバに反映するまでに手間と時間がかかる。短縮するための工夫が必要 ● クラウドサービスであれば特有の機能が利用できる ③ リモートで書く / ローカルで実行 ● Web版のエディタを使用している場合で、ホスティングしない場合のパターン ● ダウンロード型のエディタと違い一部機能に制限があることが多く、今後に期待 ● 端末に縛られない開発ができる (iPadなど) ④ リモートで書く / リモートで実行 ● Web版のエディタを使用して、ホスティングサービスを利用している ○ またはCode Serverを使って独自でサーバーを構築する場合は、運用コストが発生する 7

実行する環境をさらに4つに分類 A: ローカル / 仮想化なし • ローカル端末に実行環境を直接構築 • ローカル環境をあまり汚したくない派も増えてきている B: ローカル / 仮想化あり • Docker / VMware / VirtualBoxなどを使ってローカル端末に仮想的な環 境を作って実行環境を構築 C: リモート / 仮想化なし • オンプレの物理サーバーやAWS EC2などを使って実行環境を構築 • AWSは厳密にはリアルではない D: リモート / 仮想化あり • Docker / VMware / VirtualBoxなどを使ってに仮想的な環境を作って実 行環境を構築 8 用語 ローカル：手元にある開発端末のこと リモート：主にクラウドサービスのこと

開発環境の全体像(Ver.1) 9

10

次にエディタの話 11

Visual Studio Code(VS Code)について ● Microsoft が開発したソースコードエディタ ● ソースコードは、フリーかつオープンソース(MITライセンス) ● Stack Overflow Developer Surveyで圧倒的人気 ● 主なキーワード ○ シンタックスハイライト ○ インテリセンス ○ スニペット ○ コマンドパレット ○ リモート開発 12 https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-integrated-development-environment

シンタックスハイライト • 日本語にすると構文強調 • テキスト中の一部分をその分類ごとに異なる色やフォントで表示するもの • Linterツールと組み合わせて、コード上に警告を表示する 13

インテリセンス • キー入力を監視し、何を入力しようとしているのか推測 • 自動補完（オートコンプリート） • 後続要素の候補を表示して選択するだけで入力できるようにしてくれる 14

スニペット • 日本語で言うと断片 • 再利用可能なソースコード、マシンコード、またはテキストの小さな領域を表すプログラミング用語 • インテリセンスの機能で保管できない部分を独自に定義することができる 15

コマンドパレット • 一般的なショートカット操作を含むVS Codeのすべての機能にアクセスできるもの 16

VS Codeの設定を共有する方法について • ユーザ定義 • 自分だけで設定したい場合に使用する(全部のワークフローで有効) • あまり使わない • ワークスペース定義 • ワークスペース内で他の人と設定を共有したい場合に使用する • スペルチェックツールの除外キーワード • タブ or スペースのどちらでインデントするか • インデントの数は2つ or 4つ など 17

おすすめの拡張機能 18

少しでもリスクを減らす拡張機能の選び方 19 • なにかとお世話になることが多い拡張機能だからこそ安全に使いたい • VS Codeからインストールできるからといってすべてが安全ではない • 2021年に拡張機能を悪用したサイバー攻撃がニュースで話題になった • ポイント • 認証バッチが付いている • Marketplace側で検証済み • 2021年に追加された機能 • 提供元が信頼できるか • インストール数や評価、最終更新日 https://code.visualstudio.com/updates/v1_62#_verified-extension-publishers

20 拡張機能の一覧(2022/04/26時点) • 各言語向け(Python, Go, Ruby…) • Code Spell Checker • Docker • YAML • Tabnine AI Autocomplete • GitHub Copilot • change-case • Swagger Viewer • GitHub Pull Requests and Issues • Git History • Git Graph • GitLens • gitignore • Markdown All in One • markdownlint • Draw.io • PlantUML • Live Share • TODO Highlight • Material Icon Theme Marketplaceは https://marketplace.visualstudio.com/vscode

• スペルをチェックしてミスがあれば警告で表示してくれる拡張機能 • レビューでのタイプミスの指摘を減らすことができるため、レビュー工数削減にも繋げられる • 本質的なレビューに時間と労力をかけられる • 辞書にない単語を登録して警告が出ないようにすることもできる • ワークスペース定義で共有も可能 Code Spell Checker 21 https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

GitHub Pull Requests and Issues • プルリクエストやイシューの作成や編集が行える拡張機能 • GitHubが公式で提供している • コード内にインラインで表示してくれるので、レビューや修正が行いやすい 22 https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github

Live Share • VS Codeの画面を共有して複数人でコードの編集を行うことができる拡張機能 • 別に許可をするとVS Code内のターミナルを操作することも可能 • 他の人の操作をピン留めすることでカーソルの移動を追従してくるれる • ペアプロやレクチャーをする際におすすめ 23 https://visualstudio.microsoft.com/ja/services/live-share/

Visual Studio Codeと 一緒に使うツールやソフトウェア 24

25

コンテナ管理ツール 26 ● 移植性や携帯性を重視しており、コンテナ技術をメインに環境構築をおこなっている ○ 開発初期段階や既存環境によってどういったツールが1番フィットするか見通せない ■ GitHub ActionsからCircle CIに変えたい… ○ プロダクトの成熟段階やメンバーの習熟度によって使いたいツールやニーズが変わる ● 主なツール ○ Docker Desktop ■ 有料化。250人以上もしくは、年間売り上げ1000万ドル以上の組織が対象 ■ 2022/01/31まで無料版からの移行にかかる経過措置として猶予期間が設けられていた ○ Rancher Desktop ■ Docker Desktopのように使えるOSS ■ 弊社社員からのおすすめ コンテナとは？(とことんDevOps - 技術情報ブログ) https://devops-blog.virtualtech.jp/entry/2022/02/14/133514

ソースコード管理 • GitHubがおすすめ。 • それ以外はCI/CDツール導入の予定や使いた いツールの連携可否を踏まえて判断を • 主なシステムやサービス • GitHub • ソースコードのホスティングサービス • GitLab • ソースコードのホスティングサービス のOSS版 • AWS/GCPが提供するもの • AWS CodeCommit • Google Cloud Source Repositories バージョン管理とソースコード管理 27 バージョン管理 • Gitをおすすめ。 • 主なツール • Git • ソースコードなどの変更履歴を記録・ 追跡するための分散バージョン管理 システム • Subversion(SVN) • 対照的なツールとして集中型バージョ ン管理システム 今さら聞けない人のための Git超入門 OSC2020 Online/Hokkaido https://event.ospn.jp/osc2020-online-do/session/100970

CI/CDツール ● GitHub内に統合されているので手軽に使いや すい ● リポジトリに参加しているユーザであれば誰で も使える ● Workflowを書けばすぐに使える ● 実行できるインフラスペックに制約があり、お金 の問題で解決できないケースがある GitHub Actions 28 Circle CI ● GitHubとの連携が必要 ● 別途アカウントを払い出す必要がある ● メトリクス系のビジュアライズが標準機能として ある ● インフラスペックを必要に応じて変更できる(料 金プランなどによる) ● いざという時のSSHデバッグできる ● ローカルで検証できるCLIツールがある ● CIを動かす点だけで見ると書き方の違いはあるものの、どちらもあまり変わらない ● クイックに時間と労力をかけずに無料枠内でサクッと使いたい場合は、GitHub Actions ● 利用状況のモニタリングや利用負荷に応じた柔軟な対応をしたい場合、 Circle CI ● 迷ったら直感的に書きやすい方で。おすすめは、Circle CI。 (参考)CI/CDとは何か(とことんDevOps - 技術情報ブログ) https://devops-blog.virtualtech.jp/entry/2022/01/19/134721 (参考)GitHubとCircleCIでCI/CDをはじめよう (とことんDevOps - 技術情報ブログ) https://devops-blog.virtualtech.jp/entry/2022/02/01/132107

しくじりと課題 29

• 🙁MacBook Pro 16GB(Intel) • 入社時に支給された端末 • エラーを調べたりする際にたくさんのタブを開きがちな人 • ネイティブアプリのエミュレーターを起動してDcoker上に立てたAPIサーバーと通信する • オンラインのペアプログラミングで画面共有したりする • ひどい時はキー入力が重くなってSlackすらまともに打てない • 😎Macbook Pro 32GB(Intel/M1) • ネイティブアプリを開発する案件を担当してから相談してスペックアップ • インフラな仕事をする上では16GBで問題なかったが、アプリ開発環境も踏まえて再検討された結果、社 内の標準スペックに • 😖MacBook Air 8GB(Intel) • ローカルな開発環境としてはDevOps時代には厳しくなっている • 仮想環境で色々と動かすようになってきた(Web、DB、セッション(Redis)、検索エンジンなど) • リモート環境開発環境を別途用意する必要が出てくる 開発端末のスペック 30

GitHub Actionsのクレジットを2日で3000分使ったしくじり 31 背景 ● Flutterを使ったネイティブアプリ開発でCIまわりの検証を行っていた ● iOS向けのアプリのビルドはAppleな環境でしか行えない ● GitHub Actionsの中で最高級インスタンスのMacインスタンスを使っていた ○ Linuxに比べて10倍のクレジット消費(10分動かすと100分が消費される) 原因 ● アンチパターンのPushデバッグを行っていた ● GitHub Actionsにはローカルデバッグツール的なものがない ○ actなどサードパーティなツールは存在するが Linuxのみで一部Actionをサポートしていない 回避策 ● 手元のMacもしくは、空き端末をローカルランナーとして登録する (登録できる人は限られる) ● コミットが汚れる問題は残るが、サブブランチを作成して Pushデバッグしてスカッシュマージで履歴を圧縮 ● (最近話題のDagger…？)

コンテナイメージをどこで管理するのか悩ましい Docker Hub • Pull数のレートリミットがある(認証していないユーザーで6時間に100pullまで) GitHub Container Registry • 保存できるイメージ数や容量、データ転送量に制限はあるが従量課金で緩和可能 • クラウドサービスと比べると1GBあたりの費用感は結構高い Amazon ECR / Google Container Registry • 基本的に最初から従量課金制(一部、初回無料特典などを除く) 32 https://docs.github.com/ja/billing/managing-billing-for-github-packages/about-billing-for-github-packages

おわり 33