BS13 # チーム開発がこんなにも快適に ! コーディングもデバッグも GitHub 上で。GitHub Codespaces で叶えられるシームレスな開発 | 日本マイクロソフト
Summary
TLDRこの動画は、開発者がコードを快適に書くためのクラウドベースの開発環境「GitHub Codespaces」の紹介です。従来の環境構築の手間がなく、すぐに開発に取り掛かれます。マシンスペックの影響を受けず、必要な言語やツールがプリインストールされています。ブランチを切るときも新しい環境を簡単に作成できます。マルチルートワークスペースを使えば、複数のプロジェクトを同時に実行できる便利な機能も備えています。開発の効率化と快適さを実感できる、開発者必見の動画です。
Takeaways
- 😊 GitHub Codespaces は、マシンスペックに影響されずに快適な開発環境を提供できるサービスです。
- 🚀 環境設定の手間が省け、新しいメンバーの参加時やレビュー時にも簡単に新しい開発環境を用意できます。
- ✨ リモートコンテナ技術とカスタマイズ可能な devcontainer.json により、チームで共有できる開発環境を構築できます。
- 🔑 シークレットの設定を個人、リポジトリ、組織レベルで管理できるため、機密情報を安全に扱えます。
- 🔩 ポートフォワーディング機能により、リモート環境にあるサービスにローカルホストからアクセスできます。
- 🧑💻 Visual Studio Code 拡張機能やツールをあらかじめインストールしておける便利な機能があります。
- 🌐 公開 URL の発行により、外部サービスとのローカル統合開発が容易になります。
- 🔄 複数のワークスペースを作成し、並行してデバッグ実行できるマルチルートのサポートがあります。
- 💰 個人での利用は現在ベータ版の無料申し込みが可能で、チームでの利用にはGitHub Teamまたは Enterpriseが必要です。
- 📢 YouTube 配信の予定があり、GitHub Codespaces に関する技術的な話題を扱う予定です。
Q & A
Q1: Gitコードスペースとはどのようなサービスですか?
-A1: Gitコードスペースは、Gitが提供する新しいクラウドベースの開発環境サービスです。コンテナ技術を活用し、設定済みの開発環境をクラウド上で即座に利用できるようになっています。開発者は自分の環境を構築する必要がなく、すぐに開発に取り掛かれます。
Q2: Gitコードスペースを利用するメリットは何ですか?
-A2: Gitコードスペースのメリットは、(1)マシンスペックに左右されずに常に高速な開発環境が得られること、(2)環境セットアップが容易なため、時間を無駄にしないこと、(3)レビューや別プロジェクトのデバッグ時に新しい環境を簡単に作れること、(4)どこからでも同じ開発環境にアクセスできることなどが挙げられます。
Q3: Gitコードスペースではどのように環境をカスタマイズできますか?
-A3: Gitコードスペースでは、devcontainer.jsonというファイルに設定を記述することで、開発環境をカスタマイズできます。必要な拡張機能のインストール、ツールのインストール、起動スクリプトの設定などが可能です。このファイルをリポジトリに含めることで、チーム全体で同じ環境を共有できます。
Q4: Gitコードスペースではシークレット情報はどのように扱われますか?
-A4: Gitコードスペースでは、シークレット情報をリポジトリに直接含めるのではなく、個人設定、リポジトリ設定、またはOrganization設定で環境変数として登録します。この情報はコードスペース内から参照でき、外部に漏れるリスクを低減できます。
Q5: デモで紹介されたタクシー配車システムはどのような構成になっていましたか?
-A5: タクシー配車システムは、クライアント側がStatic Web Appsでホストされたフロントエンド+APIで構成され、管理側もStatic Web Apps+APIで構成されていました。1つのリポジトリで両方の開発が行われ、マルチルートワークスペースを使ってローカルでのデバッグ実行が可能になっていました。
Q6: ポートフォワーディング機能はどのような利点がありますか?
-A6: ポートフォワーディング機能を使うと、クラウド上のコードスペース環境に対してローカルホストのようにアクセスできます。さらに、パブリックURLを発行することで、外部サービスとの連携時にコールバックURLを設定しやすくなります。従来のNGROKなどを使うよりも手軽に利用できる点がメリットです。
Q7: Gitコードスペースのベータ版はどのように利用できますか?
-A7: Gitコードスペースの個人アカウントのベータ版を利用するには、ベータ版の申請が必要です。申請を行うと、現時点ではベータ版が無料で利用できます。一方、Gitチームやエンタープライズクラウドを既に利用している場合は、管理者がコードスペースを有効にすれば利用可能になります。
Q8: Visual Studio Codeの拡張機能は、Gitコードスペースではどのように扱われますか?
-A8: devcontainer.jsonファイルに拡張機能のIDを記述することで、コードスペース環境で自動的にインストールされるようになります。開発者が手動でインストールする必要がなく、チームで共有された環境でも同じ拡張機能が利用できます。
Q9: Gitコードスペースを利用する際の課金はどのようになっていますか?
-A9: Gitコードスペースは使っていない間は課金されず、利用時間に応じて課金されます。利用者は必要に応じてインスタンスのスペックを選択できるため、適切なコストコントロールが可能です。
Q10: Gitコードスペースはどのような開発者に最適でしょうか?
-A10: Gitコードスペースは、複数のプロジェクトや言語を扱う開発者、チーム開発を行う開発者、環境セットアップに時間を割きたくない開発者、モバイル/リモート開発を求める開発者などに最適なサービスです。簡単な設定で、すぐに開発に取り掛かれる点が大きなメリットです。
Outlines
👩💻 プロフィールと開発者の活動紹介
この段落では、話者の自己紹介と開発者としての経歴や活動が説明されています。Microsoft MVP for Azureの受賞経験があり、J Architektsに所属し、Azureを利用した開発に携わっています。また、コミュニティ活動としてコードポラリス(女性エンジニア支援)、ハッピーアプリスイング(Azure関連イベント)、NuxtKuroBot(Nuxt.js/NestJSコミュニティ)の運営にも関わっています。Twitter(@tn_tori)とYouTubeチャンネルでも情報を発信しています。
🥳 開発が捗る理由とGitHub Codespaces
この段落では、開発環境の悩みを解決するGitHub CodespacesについてGitHub側がホストするコンテナ環境であり、リモートコンテナ機能を利用できることが説明されています。また、ポートフォワーディングによりローカルホストやパブリックURLからアクセスできる点、シークレットの設定ができる点、デフォルトで主要な開発言語がインストールされている点が紹介されています。
🛠️ dev containerの機能とカスタマイズ
この段落では、dev containerを使ったコンテナ環境のカスタマイズ方法が説明されています。dev container configファイルを使って、必要な拡張機能をインストールしたり、ビルド時のフューチャーを指定できることが紹介されています。また、環境構築の際にdev containerを利用することで、手作業によるミスを防ぐことができると強調されています。
🚀 複数環境を柔軟に切り替える利点
この段落では、GitHub Codespacesを使うことでレビュー環境や古いプロジェクトのデバッグ環境を別途用意できる点が説明されています。ワンクリックで新しい環境を作成でき、レビュー後は環境を捨てて本番環境に戻れるため、スムーズな作業が可能になります。また、異なる開発環境(言語バージョンなど)が必要な場合も、Codespacesなら簡単に切り替えられると強調しています。
💻 デモ:フロントエンド開発の様子
この段落は、実際にCodespacesを使ってフロントエンド開発を行うデモの様子が記されています。リポジトリをクローンした状態でVisual Studio Codeが開き、dev containerによる環境設定が適用されている様子が説明されています。また、npm installやフロントエンドのビルド、ローカル実行の手順が示されています。
🔍 バックエンドAPIの開発とデバッグ
この段落では、バックエンドAPIの開発とデバッグの様子が紹介されています。dev containerへのAzure CLIやTerraform、関連ツールのインストールなど、環境設定の変更点が説明されています。また、ワークスペースを活用したデバッグ実行の方法や、フロントエンドとバックエンドの連携テストの様子が示されています。
🌐 マルチプロジェクトのシナリオデモ
この段落では、複数のフロントエンドとバックエンドAPIから構成されるプロジェクトを、GitHub Codespacesで開発する事例が紹介されています。マルチルートワークスペースを使い、それぞれのコンポーネントをデバッグ実行できるよう設定した点や、ポートフォワーディングによる外部サービス連携の実装方法が説明されています。実際のデモの様子も記載されています。
🌐 デモの続きとサマリ
この段落では、前の段落で紹介したデモの続きが示されており、管理画面の起動や予約状況の確認などの操作が行われています。その後、GitHub Codespacesの利用方法と今後の展望について説明しています。現在、GitHub Teamや Enterprise Cloudではデフォルトで利用可能ですが、個人アカウントではベータ版の申請が必要であることが述べられています。
🙏 まとめと問い合わせ情報
最後の段落では、本セッションのまとめとして、GitHub Codespacesの利点が改めて強調されています。また、質問があれば、セッションのQ&Aや話者の公開連絡先に問い合わせることが推奨されています。最後に、視聴者への感謝の言葉で締めくくられています。
Mindmap
Keywords
💡コード spaces
💡デブコンテナー
💡ポートフォワーディング
💡シークレット管理
💡マルチルートワークスペース
💡開発環境
💡デバッグ
💡レビュー
💡エクステンション
💡フューチャー
Highlights
きっとハードコード spaces でシームレスな開発チーム開発が、こんなにも快適に calling もデバッグもいいと羽生上で、まず初めに自己上階から始めていきたい
microsoft mvp for, azure のアワードを受賞しており、普段は j アーキテクツに所属し、microsoft azure を用いた開発に携わっている
インフラストラクチャーずコードやぎっとハーバーくしょんずによる自動化が得意
女性エンジニアを応援するコードポラリスというコミュニティを運営している
native サービシズと夫フレームワークを扱う黒 bot というコミュニティも運営に携わっている
はい通常はですね本編に入っていきたい。もっと集中できる開発環境が欲しい
visual studio 以外の開発環境を使っている例として、フロントエンドのフレームワークを使った静的サイト、Web アプリ、Python や Perl で書かれた旧プロジェクトなどを挙げている
マシンスペック不足で開発が遅れがちな問題があると指摘
環境セットアップの手間が避けられない点を問題視
きっと羽生コード spaces を使えば、マシンスペックに影響されずに快適な開発ができる
環境セットアップが容易になり、ドキュメントを書く必要がない
レビューや旧プロジェクトの作業の際に、別の空の環境を立ち上げて使える利点を説明
デブコンテナを使って環境のカスタマイズができ、チームで共有できる
ポートフォワーディングの機能で、リモート環境にローカルホストでアクセスできる
シークレットをコード spaces 上で安全に管理・共有できる
Transcripts
きっとハードコード spaces で 叶えられるシームレスな開発チーム開発が
こんなにも快適に calling も デバッグもいいと羽生上で
まず初めに自己上階から始めていきたいと おもいます
私太平和美と申します microsoft mvp for
azure のアワードを受賞しており まして普段は j アーキテクツに所属し
ておりへ microsoft azure を用いた開発に携わっておりますその中で
もインフラストラクチャーずコードやぎっ とハーバーくしょんずによる自動化が得意
で 開発に携わったり
半蔵の行使を受けもたりもしております また技術コミュニティは女性エンジニアを
応援するコードポラリスという コミュニティを運営しておりますまた j
アーキテクツのみんなと azure に 関するディープな話題をお届けするトーク
イベントハッピーアプリスイングの運営に も携わっておりますまたこちらは初心者
歓迎の子ネイティブサービシズと夫 フレームワークを扱う黒 bot という
コミュニティも運営に携わっております えツイッターは dz アンダースコア
きっと羽生は tj ターリーと何 カウントで活動しておりますご興味ある方
は是非フォローしていただけると嬉しい です
またへ最近では youtube の配信 も始めまして最近ではまだゲームの配信
しかしていないんですけれどもこれから 切った羽生や汁に関する技術の話題も配信
していこうと思ってますのでもしご興味が ございましたらですね
サブスクライブしていただけると大変 嬉しいです
はい通常はですね本編に入っていきたいと おもいます
はいということですねもっと集中できる 開発環境が欲しい開発環境の話を今日はし
ていきたいとおもいます
visual studio 以外の開発 環境を通していますか
例えばですねフロントエンドの フレームワークを利用した静的サイトで
さらにですねそのフロントエンドといくつ かの api で構成された web
アプリケーションだったりあとはですね 例えばあの python でちょっと
解析をしたいだとかあと少し前の音 プロジェクトで psp で書かれてい
たり perl で書かれているような プロジェクト
最近では触っていないプロジェクトの デバッグをしたりあのねっ構造を打ったり
とかしたいそんなニーズもあることもある かなと思っております
それからですねこれ ぶっちゃけマシンスペック足りてますかと
いうところですよ 何かたねまたせる環境って言うわねすごく
苦痛なんですよね まずきっと苦労してあの回発動で始めた
祈りで it クローンがすごく時間が かかるとかじゅデバッグ実行してね早く
進めていきたいのにそもそもへじっ子が 遅いとか
さらにですね腹痛プロジェクトを立ち上げ ている状態だともうねあの手に負えね遅
さって言うようなことはあると思うんです よね
でさらにこれはこれでもう本当に必要だ けれども毎回悩ましいこれです
環境セットアップこれですねあのここから 逃げられる人はいないと思うんですね環境
セットアップはついてもあると思います まずはですねまず自分が新しいチームに
調印してきた時はもちろん環境性タップ すると思いますし新しいメンバーを受ける
新しいメンバーを受け入れるときも環境 セットアップ必要になってきます
でさらにですね普段まあ開発を進めてる からその環境があるんですけれども
例えばあのレビューをするときとかですね あの普段自分が開発してるその環境だと
まぁ自分の行動が入っちゃってるので レビューしにくいなのであのまあ
机上の確認だけだったらね pull request 眺めるだけでもいいん
ですけどもやはり動かしてみないと分から ないというところもあるので
まあねレビュー様の環境をもう一個作るか みたいなギッとクローンしてて
であの設定ファイルを置いてみたいなこと しなきゃならないというすごく大変だと
思います やっぱまあコーン自分のペースで開発して
いたらあの急なデバッグが必要になったと で開発そちらでもう急いでるから今開発し
ているところでとりあえずでバックショー でやってるうちに開発途中のコードね変え
てしまったり消してしまったりとそういう ような事故が何回かい皆さん経験あるん
じゃないかと思います そんなあなたにオススメしたいのがきっと
ハブ港の spaces です きっと羽生コード spaces はです
ね最近リリース最近と年リリースされた英 サービスなんですけれどもこれがすごくオ
ススメです きっと羽生コード spaces すると
は
オープンソースのエディタの visual studio コードこれがあのリモート
コンテナードっていう仕組みを持ってまし てこれがベースになっております
で名前の通りですねコンテナに対して アクセスして
a visual studio コード
エディタからその環境にアクセスして ファイルの更新であったりとか時高架橋
あの visual studio 行動を通し
て利用できるって言ったような仕組みが リモートコンテナーなんですけれどもギッ
と羽生コードステーシーズの良いところが ですねこのコンテナの部分をきっとハブ側
がホストしてくれるって言うところにあり ますあると私は思っておりますであの
コンテナの環境を作るのって慣れてる人 だったらね普段からねあのドカー
デスクトップで起動してあのすぐ起動 できるすぐ
校 そのコンテナ環境を作れるっていいところ
あると思うんですけどもられない方がね今 てだいじる時にはですねあの本当はその先
の開発をしたいだけなのにコンテナーの 開発
コンテナの環境性タップでへ時間を費やし てしまうみたいなことが
まああると思うんですよね 底の底の部分を切っ度羽生がホストして
くれて言って底が今回このサービスの味噌 になってくると思います
このコンテナ環境ですねあの 決まり聞いた環境だったらそんなに使い
勝手良くないと思うんですけども visual studio コードのデ
ブコンテナっていうこのリモート コンテナーで扱うコンテナーの
あの 環境をセットアップしておけるあの構成
できるという仕組みがデブコンテナという ものがありましてそれを利用してこの
ギター羽生コードスペースで保持している コンテナーの方も
環境笠間 is して利用できるように なっているって言ったところがですね a
とても利用しやすい体になっております もう一つですねこのポート
フォワーディングっていう機能がありまし てこれはその自分のマシンではないきっと
羽生がホストしているコンテナ なのであのその実行環境に圧迫するには
ですねリモート環境に届かないといって ないんですけどもギッと幅講座
spaces のポートフォワーディング 機能を利用するとへリモートで自己されて
いるポートに対して コードスペースの環境通して
ローカルホストもしくは公開した a url でアクセスできるようになります
のでリモートにあることを気にせず実行 環境にアクセスできるそのまま開発を
続けることができるっていう点がきっと 羽生コード spaces の良いところ
になっておりますもう少し詳しく見ていき ましょうまずはですね図解するとこのよう
な形になっていると思いますはいは一番 ちょっと音シンプルに分かりやすい風にし
てみたんですけど切っとハーフがその コンテナの実行環境を持っていてそれに
対して私たちはブラウザまたは visual studio コードで
アクセスして開発をできるって言ったよう なところがおそらくね皆さんのイメージも
しやすいんじゃないかなと思います でこの negicco 羽生コード
スペイシーずあのすごく簡単に利用する ことができますでへとこれちょっと後ほど
ご紹介するんですけどもお使いの桜が大事 しょんでコード spaces が有効化
されていればすぐに使うことができます 使い方は簡単でこちらのキャプチャにある
通りいつもね使うこの緑のコードのボタン これ普段はきっと苦労するときに言われる
よねこのコードのボタンから表示して コピーして使うと思うんですけどもそこの
猫のポップアップに行動 spaces の タブがれておりまして
そこから new code spaces で新しいコードスペースを作ることができ
ます この高 spaces を初めて起動する
タイミングの時にこのような形ですね 真っ新タイプを選ぶことができます
ニコは4個はハチ公は16コアでこちらに 載ってないんですけども32コアまで
選べるようになっているということになっ ております
ふう弾私だと4コアで作業をすることが 多いんですけども例えばあの簡単な
レビューをする時であればにコアを選ん だりとかしてこのスペックと価格は松井に
なっていてあのそれぞれ値段設定があり ますのでそのチームもしくはその時のあの
状況に合わせてですねスペックを選んで 利用いただけるって言ったところになり
ます で
コードステーシズはですね使ってない間は 使ってない間は停止しておけるのでその間
は下記が発生しません 布で安心して利用することができるかと
思います で
何もあの先ほどね環境カスタマイズできる お話を少ししたんですけれども
カスタマイズしなくてもですねデフォルト の環境うんちですぐに利用できるように
なっておりますでこの文中に多いですね a 4ような言語がインストールされていまし
てロード js . net 子は python 3型 php ruby 号
など a
まあ恐らく皆さんが使えそうである言語が インストールされているのでまずはね
デフォルトの環境で触ってみることをお 勧めいたします
でねあの味ラーには嬉しい azure 茂 アヤムね実はねあのプリインストールされ
ているとなのであ microsoft azure の開発をされる方はですね
非常に便利なティルト環境になってるとい ます
もう少し詳細をしていて方はですねこちら の資料のリンクを辿って頂ければと思い
ます であの先ほどねコード spaces 停止
しておけるってお話ししたんですけども 停止している間もそのファイルの変更で
あったりとかは保持されるようになってい ますどういうことかというとこちらもあの
コンテナの仕組みなんですけれども本当の そのインスタンスっていうのはボリューム
とひも付けて立ち上げることができますで インスタンスの方は時効停止していたとし
てもボリュームの方はずっとあの生かすっ ていう形になりますのでご利用は生かされ
ていた状態でえっと1回停止していた コンテナをまた立ち上げてボリュームと
連結して環境を提供してくれるそんな形で a子スペース有コードスペースを利用する
ことができます
でポートフォワーディング実際どういう ものかというともう少し説明していきます
でこちらはですねえっとまずの体感として の使い方はですねローカルホストとして
アクセスできる あの
先ほどもお話ししましたように越冬切っと ハグ側がそのコンテナの
実行環境を保持しているのでそちらに対し て自分のこのまあ手元の作業用マシンから
リモートにアクセスすることになるんです けどもこれをあのこの spaces 側
でポートフォワーディングしてくれて あたかもローカルホストのポートに
アクセスしているような形で見せながらも リモートのえっえコードスペースの環境に
アクセスできるといった形で え非常にねスムーズな開発をすることが
できますまたこれですねローカルホスト だけではないんですよあの visual
studio コードのリモートコーンて のはもうこのポートフォワーディングの
機能があってローからホースでアクセス できるんですけども
構造ステージ頭のいいところはですねこれ を
へ ときっと羽生の組織オーガナイゼーション
もしくはパブリックに向けて肺胞できる っていうところがこれもねえ構造
spaces の良いところだなと思って おりますこれはですねこれもあのちょうど
の音でもの時に少しお見せしようかなと 思っているんですけれども
public リポートを共有できるって 言うことはですね
他の外部サービスを使うような音開発して いる時にあのコールバック url を
設定するみたいなシーンってけっこうある かなと思うんですけどもその時にねあのう
自分の手元のローカルホストで動いている 開発環境にそこから安乗物が戻ってくる時
ですねローカル歩数でいけるものがあるん ですけれども
https でないと https の url でないとダメっ
ていうようなパターンもあるわけですよ そういう時にこのパブリックん
で開放したポートファーリング機能を使う とですねあの
https の url を発行して くれるのでそれを
コールバックのエンドポイント言われるに 設定しておけば外部サービスとの連携も
へ まこのローカルで作業しているというか
コード spaces で作業している 環境にスムーズに
へ接続させることができるって言ってよう な使い方もすごく便利だなと私は
普段裂かってぃで感じております でもう一つあの子の環境って
web コンテナーの仕組みを使うと json ファイルにその構成の設定値を
書いておけるんですねスローリポジトリに 入れていく置くことによってみんなで共有
して利用できるんですけどもその中に シークレット角度はね全タブーですよね
あの リポジトリ以上にシークレットを送って
いうのは本当にも絶対やっちゃいけない ことなのでじゃああの個人で使うような
シークレットの情報でどうすんの毎回 て宇宙数の毎回
で何かコピペしなきゃいけないのではてて はないんですよ
このね昨日はですねえっとぉ ギッと羽生元々あのギターはアクションず
使われてる方がだったら 想像つきやすいと思うんですけども
シークレット尾根設定できるんですよねで あの
これがいくつかすことがあって 自分自身の3月から自分自身が立ち上げた
secret の巣まず自分自身が 立ち上げたコードスペースの中でだけ自分
が設定した c クレートを使いたいって 場合はパーソナルセッティングからその
シークレット設定することができます リポジトリでリポジトリを
リポジトリ全体でチークレットを設定する こともできますなぜ例えばそのままチーム
で共有したようなシークレットですね開発 のプロジェクトをみんなで共有したような
シークレットがあればそれはリポジトリで 同意するといいかなと思いますもしくは
ですねオーガナイゼーションの中で共有 するっていう使い方もできますこれもです
ねあま干支使い方は一緒でそれぞれあの リポジトリーセッティングもしくは
オーガナイゼーションのセッティングから シークレッツの行動ステーシーズの項目
から設定することができます でエッチしたシークレットはコード
スペースの中だと え環境変数として読み込むことができます
はいをこのあたりですね実際触ってみて 頂ければと思います
次ですねこの着物のがこのデブコンテナー による開発
このデブコンテナーによる環境の カスタマイズができる点が本当に便利だと
私は感じております 先ほどもお話ししたようにデブコンテナー
.ジェイソンという 無事依存ファイルにですねこのコード
ステージこのコンテナの環境はこういう ふうにせタップしておきますって言うこと
を真インフラストラクチャーずほどですね あの高評価して置いておける
でその行動を読み込んで行動スペースを 立ち上げれば皆同じそのコードから
立ち上がった環境にアクセスすることが できるそれを利用することができるように
なりますいうところですね このデブコンテナジェイソンを作るの
ちょっと面倒かだなーって思って方 いらっしゃるかもしれないんですけども
これですねコマンドパレットからアド development コンテナ
コンフィギュレーションファイルって言う コマンドを叩くとですねベースにする
イメージを選択してさらに プリインストールする機能を選択して
簡単に gui で設定することができ ますで作成されたそのねっ web
コンテナー g ゾーンのファールをもと にへご自身のアゴ人8チームの環境に
合わせてカスタマイズして利用していくっ ていうような形が最初とつきやすいんじゃ
ないかなと思います詳細気になる方 いらっしゃいましたらこちらのリンクを
参照してくださいいっ この web コンテナですねいくつか
機能があるんですけれどもその中でも2つ ほどピックアップしてご紹介していきたい
とおもいます まずはですねエクステンションズハイあの
visual studio コードね 利用されている方であればピンとくるかも
しれないんですけどもあのまず visual studio コード自体
のセッティングに 拡張機能を
リコメンデーションするっていう設定値が あるんですよ
でもそれはリコメンデーションするだけな んですね
でこのデブコンっていうのはあのは エクステンションずにその
その x テンションの id を書いて おくとですね最初のデブコンテナーの起動
時にですねそのエクステーション インストールした状態で立ち上がって
くれるんですよ なのでそのリコメンデーションサイトから
自分でいいストールっていうする必要が なくてもう良いストールされた状態で
立ち上がってくるって言った所かね地味に これね結構楽なんじゃないかなと思います
はい 次もう一つご紹介したのはね先ほども出て
きましたがえヒューチャートっていう機能 がありますこれをですねあの高校 the
spaces 側と言いますかあの azure cli やー
寺フォームなどいくつかそのよく使われる このソフトウェアだったりを構成するため
のスクリプトがですねすでに用意されて いるんですねそれをこのフューチャーズで
指定するだけでその対象のソフトウェアを インストールした状態でコンテナを聞いを
することができるって言ったような機能に なっております
で私が最近は自分の音業務でよく使うんで あればアジル cli とか寺フォームを
ぷりにソウルさせておくってことがそのね あのデブコンテナジーそうに書き込む的で
これらができるって言うのはねすごく便利 であのー
簡単にこのコンテナの環境をカスタマイズ できるのですごく重宝しております
9ねきっとほど楮 spaces を使え ば皆さんの悩みも開発解決するんじゃない
かといったところです てきっと羽生コード spaces が
あればね まずですよあのみなさんの手元のマシン
スペックに影響されない っていう点ですねこれその厳密にはですね
visual studio コード 立ち上げてもしくはまあブラウザでも
ブラウザでもその状態でまあねトークで 通信してコードスペースを使うのでそんな
部分だけは確かに必要なんですけれども それ以外ですね実行環境自体はきっとハブ
側にあるので皆さんのマシンとえ重い重い 処理が動くってことはない空になるわけ
ですよなのでかなりこれはねあの皆さん まで快適に使えるんじゃないかなと思い
ます でもう一つあの
本当に環境セットアップが本当に容易に なりますあの皆さんね皆さんかいたことで
絶対一回はあると思うんですけど環境構築 用のドキュメントそれを書く必要はあり
ません しいて言うんであれば環境構築用の g 3
ファイルを書く必要はあるかもしれません ねはい
でもそれだけでまぁ実際は書くときは書く んですけどもあとねそれをに従って手作業
で作るみたいなことはないので間違える ことだけどなんか手順通りにやったんです
けれども動きませんっていうことになら ないわけですよ
これまでかなり皆さんのても新しく入って きた方自身の時間もそうですしそれを
サポートするね先輩たちの時間も ちゃんと等
んだそこに手間取ることなく開発を セットアップできるって言うことはすごく
で有用なんじゃないかなと思いますあと ですねまぁ急なバグ解析とかレビューし
たいときはこのレビューしたいと聞いとか まあほんとバッグ解析の時すごく便利で
は普段開発しているこのコードスペースが あってであのもう一個建てられる良い靴で
も立ち上げられるんですねなのであの レビューしたくなったらレビューように一
つもう一個コードスペースの環境をつくっ て
でそこであのレビューの対象の ボランティアに切り替えてで制定ファイル
とかもし必要であればもうちょっと ちょっとそこだけ用意したりもしなきゃ
ならないかもしれないんですけども レビューに向けて
まあそれでそれするだけで新しい環境で レビューして動かして
レビューが終わったらその環境を捨てる ことはあのその環境を消去することができ
ますのでまた糸今までやっていた開発に 戻るって言ったところであの
すごく損ねスムーズに好環境を切り替えて 使えるのでかなりねやってみるとねこれ
かーみたいな 感じであのすごいんだね快適に感じるかな
と思います あとはですねあのなんか21年前に行った
プロジェクトででもちょっと久々に更新し なきゃいけないみたいな時にあの時どう
いう環境を作っただけみたいな もしくはあのねなんかあの言語の
バージョンとかがアップロー言語の バージョンとかか
このアップされていて 登場環境に合わせるにはまだ自分の環境を
変えなきゃいけないみたいなことをめんど くさいじゃないですかそれが必要ないわけ
ですよ そういう時た後もう一つこれあの
要はその切っ東部川に実行環境があるので どうも安心から接続しても同じ環境に
アクセスできるってことですなので私は 普段おうちで windows の
マシーンを使って開発してるんですけども さっきではですね最近あの n one
バックの macbook air を 持って歩いてるんですけどそちらでも
ビジュアルた事故っコード入れてあるので そこからアクセスしてさっきまで作業をし
ていた環境にアクセスして撃っ え作業の続きができるで
はね待ち合わせとか待っていてああきた 割っていて閉じてでまた帰ってきて
windows のいつも使うてるまぁ 死んでまだその環境にアクセスしてすぐ
続きを開発できるといったようなところで これはね本当に普段つか本当に私最近高の
スペースしか使ってなくてもとな環境に もうプロジェクトを置いてないんくらいな
んですよねすごく便利に使えているので 本当にね本当にオススメですはいもう少し
ね皆さんにね見せていきたいとおもいます ということですね
ちょっと文字だけだと分かりにくいところ もあると思うので実際にデモをしていき
たいとおもいます でものシナリオとしては開発中の
プロジェクトにあなたは参入してきました 先行してフロントエンドの開発は進んでい
ますであなたの担当はバックエンドの api の開発と運用環境の整備です
今回ね microsoft azure を使えるということでフロントエンドは
azure static web アップ 末 api も末 static
ウェーバープスが内包する味ルパン[ __ ]で 運用していこうといったところ
これからちょっとやっていこうと思います ではですねまあこちらが開発に使う
リポジトリになっておりますすでに開発が 進んでいる様子が見てわかるようになって
おりますでここでですね新しく入ってきた 私は私はですね新しいコード spaces
のインスタンスを立ち上げようと思います このようにですねワンクリックで誰じゃい
ますって 私の方は visual studio
行成普段使っているのでそのまま visual studio こーぜ開く
f ローになりまして本のような形で visual studio コードで9
個のリポジトリををクローンした状態の 官僚が開かれるって言ったところを
ちょっとちょっとだけセッティングアップ の間待っているだけで環境がすぐに整う
わけです じゃあこの間にですね待ってる間に
ちょっと どんなような環境なんか見ておきましょう
web コンテナジェイソンがありますね こちらに
ちょっと記述を見ていきたいとおもいます
8 まあ
この環境はですね濃度 js とタイプ スクリプトのイメージをベースに作って
あることがうかがえますですねくす テンションにはですねえ es 凛とが
既にインストールされた状態で開かれる ようです
さらにですねフューチャーズでは切っ等の 最新版がインストールされるようにへ記述
されておりますのでああああああ これからね環境が立ち上がったらいいとの
最新版がすぐ使えるようになっていると 思います
少しだけどっかファイルも見ていきたいと おもいます
こちらですねこちらを読み込むようになっ ておりますでこの度かファルト先ほどの
web コンテナジェイソンはですね a コードスペースが用意しているデフォルト
のイメージの中から選択してポチポチ作っ たものになっております
まあ えどうで
どっかファイル読める方は分かると思うん ですけどもこのねイメージを展開してる
だけですねうんはいこのような形のね 江戸かファイルが
作成されますこれは えっとコードスペースが用意している
デフォルト納竿デフォルトのイメージを 使うような設定をしたっていうところに
なっております はいこんな感じですね
ビルドしている要素が見えるかと思います はいそれではですね環境が立ち上がったの
で見ていきましょう このようにですね
リポジトリ位の内容が苦労された状態で 環境が立ち上がるようになっております
ここではですねぎっとの最新版が使える ようになっていたり
あとはノードカーでインストールされて いる
えっとタイプクリックと環境もあると言っ たようなところですぐに開発できるように
なっております試しにフランと遠藤を実行 してみましょう
まずはですね npm install を しておきますもちろんですねこの npm
install もしておくことはでき ます
のデブコンテナーの設定で環境を作成する 前に
コマンドを流すことができるのでそれで npm install 寝させておく
こともできちゃったりはします はい都合もありますよねそれではランデヴ
だ
はいこのような形でですね このフロントエンドはポートの3000万
でいく ローカル実行できるようになっております
でこれを2ポートの軌道が検知されたら ポートファーリングを設定してくれるよう
になっております う
ローカル放送の3000倍にアクセスする と
今実行中ねこのビューの 関東いう自己中の牛の環境にアクセスする
ことができるようになっております count up してみません宇治動い
てます言ったようなところになっており ますそれではですね
国会あの私がこのチームにジョインしてき てやるべきタスクが api の開発と a
運用環境の整備ですなのでその作業をした 前提でブランチをちょっと開いてみたいと
思います
はい でへ今ですね web コンテナーに手を
入れているのでリビルドしますかって言っ たところを堅持してあの促してくれるので
リビルドしようと思います
はい リビルドしてる間にちょっとどのような
変更を加えたか見ていきたいとおもいます
ですね
true 立クエストで見ていきましょう
今猫の変更を加えるといったところで シナリオで進んでおります
まずですねそれで部コンテノアジェイソン をどのように変更車か見ていきましょう
まずはですね エクステ超いくつか追加しましたこれは
スタティック web アップスだったり アジルファンクションを使うための拡張
機能であったりとか あとビュー no 開発にこのボラーて
いうえく拡張機能が入っているとすごく 便利なのでそれを入れたりしています
さらにですね azure cli ドテラフォームの新
li も一緒にインストールさせるように しておりますここまではこのデブ
コンテナー g そうの変更だけでこれら の物がインストールされるようになってい
ますでさらにですね実はこので母校 テナジーそんだけだとできないことが今回
会ったのでそれはですね直線2どっかん ファイルを更新する形でインストールさ
せることにしますひとつは azure ファンクションコアツールですねファンク
コマンドをインストールする部分がこの あたりです
さらに static ウェーバーぷそうローカル
で実行するための swac li っていうのもあるので
そちらのインストールも行なっております
今この環境がリビルドしてい え今準備しようとしているところになって
おります
さらにですねえと visual studio コートのでバック機能も
もちろん使うことができましてそのあたり の設定ファイルも今回追加しております
今日はコード spaces の セッションなのでこの愛はこの辺は割愛し
ますけれどもこれを合わせて設定しておく と本当にあの便利に使うことができるよう
になっております あとはジェルファンクションを追加した
みたいなところでおなじみのコードが書い てあるようになっています
そうですねえ 6追加してね
他の子のデモ用の api はですね ステータスっていうエンドポイントにええ
月桃をすると まあステータス ok 減って帰ってくる
だけの会 epia お試しに作っており ましてこちらね
たとフロントエンドが見えるように ちょっと最高しておりますので環境が整っ
たら見ていきたいとおもいます ビルドが終わって
環境が今立ち上がろうとしております はい立ち上がりましたこの環境はですね
先ほどを見せした環境にプラスして azure cli をまずインストール
しております さらに
テラフォーム cli もインストールし ています
さらにパンクコマンドも入っていて swa コマンドも入ってます
このような形で環境を更新しております これはあとでメインブランチにマージし
たらみんなでこの環境を共有することが できるようになりますね
この状態ですね私はですね ちょっとデバッグをデバッグ実行してみ
たいと思います 今回はこの環境では開発をやりやすくする
ためにワークスペースの設定をしており ます
何バックス提訴を指定することによって 複数ものリップで複数のディレクトリーが
開発最小であったも作業やデバッグをし やすくなっております
ちょっとへへ 少しだけ
準備をしますね まずはエフロン全土の npm
install
次に
azure ファンクションの会ローカル セッティングファイルを
準備しておきます
はいこの状態でですね
では9実行していきたいとおもいます
のリポジトリはですね公開するのでどの ような形でこのへデバッグの設定を行って
いる彼はご興味ある方は是非見てみて ください
私の場合はこの デバッグ実行の実行の前にですね
タイプスクリプトでこのプロジェクトを つくっているのでビルドが必要な部分に
ついては先にビルドを行っています それが終わってから swa の
こま同時こうしてフロントエンドの実行と api の繋ぎ込みを行っております
でその場合はですねえといくつかポートが 使われていてまずフロントエンド3000
番でアジル azure ファンクションのポートは
7007一番です でそれらを統合してスティック米パスの
cli が提供しているポートがよう 280これですね
これでアクセスできるようになっており ます開いてみましょう
はい
さっきまでとちょっと画面が違うのがお 分かりいただけるかと思います
このですたちステータス ok という ところの部分を出ずね今回私の担当で
api をつくって対応するといった ところのでもとして追加させていただき
ました これの正体はですね
こちらのログにもあるように api を 実行しに行っております
試しにデバッグ事故もうしてみましょう これでばブレークポイントを張ってもう
一度リロードしてみます
はいこのような形でたまりましたねこれを 実行しへと進めてあげると
はい無事エピエーカーのデータが取れて 画面の更新されました
このような形ですね 環境を必要に応じてカスタマイズして
それを得リポジトリの中で共有して みんなで使っていけるって言ったような
ところが コードステージ頭のいいところになって
おります
それでは a スライド資料の方に戻って いきましょう
次にですねをノールプロジェクトについて ももう少しご紹介していきたいとおもい
ます先ほどお見せしたワークスペースを 活用して
環境をつくっております まずこのへ参考としてご紹介するのがこの
音声回すというプロジェクトがありません そそこでですねタクシー配車システムの
デモを行ないましたでこれはですね line のに風と呼ばれるこのチャット
画面の下の方に表示されるリッチメニュー みたいなそれ
とえそれからタクシーの配車を頼めて テーマタクシーの配車の管理してる側とし
ては管理システムで敗者の
歯医者の予約が入っていたら歯医者のて早 を行うみたいが2つのシステムを一つの
リポジトリで開発をしておりました もう少しちょっと図解しますとですねこの
ような形でクライアントはそのリフの立地 メリーの部分はこれはスタティック
ウェーブアップスで静的サイトをホストを していていくつかの api だけ持って
いる形になっていますで管理サイトのほう もアドミンという形でこちらもフロント
遠藤といくつかの api で構成されて いてどちらもスティックウェバープスで
動いているような状態ですこれを一つのい ポジトリで干すとして
さらに開発も両方とも動かした状態で
開発でバッグができるようにっていいこと をしました
どういうことかというとですね まあ先ほどお見せしたようにあのう
static web アップすっで フロントエンドとファンクションをホスト
しているをから実行できることはお見せし た通りなんですけどこれを
それぞれ マルチルートワークスペースにそれぞれ
設定してそれぞれでデバッグ実行の設定を しておきますで
マルチルートワークスペースは それぞれのワークスペースのでは久慈工
まとめておくっていう設定ができるので それでそのデバッグ実行を起用すると両方
とものデバッグ事故が起用されるような 作りに設定をしております
えっとポートが被っちゃうので越冬 クライアントの方はデフォルトの冒頭で
アドウィンの方は1個ずつポーズをずらす という形両方共存できるように作ってい
ます
このまあラインが関わって line の ログインの部分を使っているんですね
line のログインそのリフの作りとし ては
ログインしたら戻る先のエンドポイント url を
ライン川に設定しなきゃいけないんです けども
あの普段ローカルで開発している時って それはたとえばえんぐれっくか何かを使っ
て港トンネルしてあげなきゃいけない状況 になると思うけどまあここで線ポート
フォワーディングの公開範囲をパプリック に変えてurl を発行することでその
エンドポイントにそのポート フォワーディングのパブリックの url
を設定して
まあそのトンネルを行うことなく ラインのコールバックを受け付けてこの
ローカル実行 を動かすことができるそういうような構成
になっております でも少し実物を見ていきたいとおもいます
こちらがへその温泉マーサプロジェクトの リポジトリのワークスペースを開いた状態
になっていますワークスペースでは クライアントと admi にそれぞれを
へ それぞれ二つのワークスペースとして設定
しておりますと
この状態ですね
どっちのワークスペースにもそれぞれ デバッグ実行のタスクを設定してあるん
ですけどもこれを両方を起動するという やり方があります
はいそれでは両方立ち上がったので ちょっと敗者のでもをしてみたいと思い
ます
その前にサポート4頭の子で4280って いうのがええ
利府の に不要のスタティック web アップさ
んですけれども こちらを一家パブリックにしておきます
パプリックにしたこの url を ラインの
利府のエンドポイントに指定します
はいこの状態で 開いてみましょう
そうするとラミーログインが促されてログ インするとタクシーの配車釉薬の画面が
協議されますこれは実際にはリフトして あのライン上に表示されるものになって
おります
いい所5 腕予約
でこの上大事ですねさらに管理画面を開い てみたいと思いますこちらはローカル放送
で開きましょう
ぽっぷいんぷらうどあ
はいこのような形でこれは今さっきへ この収録時はですね1月10日今
9:51なんですけれどもこのような形で 星いま
今予約したタクシーの一覧が管理画面で 見えるそして a こちらで操作すると
いったようなデモが行えるようになって おります
まあ今のような形でですねわりかし風複雑 がプロジェクトでもコード spaces
上で開発が進めていけるといったような ことがおわかりいただけたかなと思います
それでは このような形ですね短い時間でしたけれど
もきっと羽生コード spaces の私 が気に入っている機能をご紹介させて
いただきましたってですね今この技と羽生 コードステーシーズはですね使えるのは
切っと羽生チームもしくはギター羽生 エンタープライズのクラウドの方で利用
できるように既になっておりますで個人で 利用されているまたは実はですね今まだ
ベータ版の申請が 必要になっておりましてこちらはベータ版
申請するとですね この個人アカウントのベータ版の時だけ今
いつまでか分からんですけど今この時点で はベータ版は無料で使えるようになって
おりますなので少しでも気になった方は ですねまずはこのベータ申し込もやって
いただいて使えるようにしていただければ と思います
ねっ 逆にんえすでにギター部チームやギター部
エンタープライズクラウドをご利用の方 でしたら管理者の方がですねコード
spaces を有効にすることによって 利用できるようになるはずですのでぜひ
あの管理者の方に音がへお問い合わせ いただき利用していただければと思って
おりますはいそれではですねもし疑問等 ございましたらですねえこのセッションの
宮重のところに渡しておりますし 普段のあのちったぁであったりとか声を
かけていただければ何なりと ご協力できることは今あると思いますので
ぜひ宜しくお願い致します
ご清聴いただきありがとうございました
5.0 / 5 (0 votes)