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
00:02きっとハードコード spaces で 叶えられるシームレスな開発チーム開発が
00:07こんなにも快適に calling も デバッグもいいと羽生上で
00:14まず初めに自己上階から始めていきたいと おもいます
00:17私太平和美と申します microsoft mvp for
00:21azure のアワードを受賞しており まして普段は j アーキテクツに所属し
00:25ておりへ microsoft azure を用いた開発に携わっておりますその中で
00:30もインフラストラクチャーずコードやぎっ とハーバーくしょんずによる自動化が得意
00:34で 開発に携わったり
00:38半蔵の行使を受けもたりもしております また技術コミュニティは女性エンジニアを
00:43応援するコードポラリスという コミュニティを運営しておりますまた j
00:47アーキテクツのみんなと azure に 関するディープな話題をお届けするトーク
00:51イベントハッピーアプリスイングの運営に も携わっておりますまたこちらは初心者
00:56歓迎の子ネイティブサービシズと夫 フレームワークを扱う黒 bot という
01:01コミュニティも運営に携わっております えツイッターは dz アンダースコア
01:08きっと羽生は tj ターリーと何 カウントで活動しておりますご興味ある方
01:12は是非フォローしていただけると嬉しい です
01:15またへ最近では youtube の配信 も始めまして最近ではまだゲームの配信
01:20しかしていないんですけれどもこれから 切った羽生や汁に関する技術の話題も配信
01:26していこうと思ってますのでもしご興味が ございましたらですね
01:30サブスクライブしていただけると大変 嬉しいです
01:33はい通常はですね本編に入っていきたいと おもいます
01:38はいということですねもっと集中できる 開発環境が欲しい開発環境の話を今日はし
01:44ていきたいとおもいます
01:48visual studio 以外の開発 環境を通していますか
01:52例えばですねフロントエンドの フレームワークを利用した静的サイトで
01:57さらにですねそのフロントエンドといくつ かの api で構成された web
02:01アプリケーションだったりあとはですね 例えばあの python でちょっと
02:05解析をしたいだとかあと少し前の音 プロジェクトで psp で書かれてい
02:10たり perl で書かれているような プロジェクト
02:12最近では触っていないプロジェクトの デバッグをしたりあのねっ構造を打ったり
02:17とかしたいそんなニーズもあることもある かなと思っております
02:23それからですねこれ ぶっちゃけマシンスペック足りてますかと
02:27いうところですよ 何かたねまたせる環境って言うわねすごく
02:32苦痛なんですよね まずきっと苦労してあの回発動で始めた
02:37祈りで it クローンがすごく時間が かかるとかじゅデバッグ実行してね早く
02:42進めていきたいのにそもそもへじっ子が 遅いとか
02:46さらにですね腹痛プロジェクトを立ち上げ ている状態だともうねあの手に負えね遅
02:52さって言うようなことはあると思うんです よね
02:56でさらにこれはこれでもう本当に必要だ けれども毎回悩ましいこれです
03:02環境セットアップこれですねあのここから 逃げられる人はいないと思うんですね環境
03:07セットアップはついてもあると思います まずはですねまず自分が新しいチームに
03:12調印してきた時はもちろん環境性タップ すると思いますし新しいメンバーを受ける
03:17新しいメンバーを受け入れるときも環境 セットアップ必要になってきます
03:22でさらにですね普段まあ開発を進めてる からその環境があるんですけれども
03:27例えばあのレビューをするときとかですね あの普段自分が開発してるその環境だと
03:32まぁ自分の行動が入っちゃってるので レビューしにくいなのであのまあ
03:38机上の確認だけだったらね pull request 眺めるだけでもいいん
03:41ですけどもやはり動かしてみないと分から ないというところもあるので
03:44まあねレビュー様の環境をもう一個作るか みたいなギッとクローンしてて
03:49であの設定ファイルを置いてみたいなこと しなきゃならないというすごく大変だと
03:53思います やっぱまあコーン自分のペースで開発して
03:58いたらあの急なデバッグが必要になったと で開発そちらでもう急いでるから今開発し
04:03ているところでとりあえずでバックショー でやってるうちに開発途中のコードね変え
04:08てしまったり消してしまったりとそういう ような事故が何回かい皆さん経験あるん
04:13じゃないかと思います そんなあなたにオススメしたいのがきっと
04:18ハブ港の spaces です きっと羽生コード spaces はです
04:23ね最近リリース最近と年リリースされた英 サービスなんですけれどもこれがすごくオ
04:28ススメです きっと羽生コード spaces すると
04:31は
04:34オープンソースのエディタの visual studio コードこれがあのリモート
04:38コンテナードっていう仕組みを持ってまし てこれがベースになっております
04:41で名前の通りですねコンテナに対して アクセスして
04:45a visual studio コード
04:47エディタからその環境にアクセスして ファイルの更新であったりとか時高架橋
04:54あの visual studio 行動を通し
04:56て利用できるって言ったような仕組みが リモートコンテナーなんですけれどもギッ
05:00と羽生コードステーシーズの良いところが ですねこのコンテナの部分をきっとハブ側
05:04がホストしてくれるって言うところにあり ますあると私は思っておりますであの
05:10コンテナの環境を作るのって慣れてる人 だったらね普段からねあのドカー
05:14デスクトップで起動してあのすぐ起動 できるすぐ
05:18校 そのコンテナ環境を作れるっていいところ
05:21あると思うんですけどもられない方がね今 てだいじる時にはですねあの本当はその先
05:26の開発をしたいだけなのにコンテナーの 開発
05:29コンテナの環境性タップでへ時間を費やし てしまうみたいなことが
05:35まああると思うんですよね 底の底の部分を切っ度羽生がホストして
05:39くれて言って底が今回このサービスの味噌 になってくると思います
05:45このコンテナ環境ですねあの 決まり聞いた環境だったらそんなに使い
05:49勝手良くないと思うんですけども visual studio コードのデ
05:52ブコンテナっていうこのリモート コンテナーで扱うコンテナーの
05:56あの 環境をセットアップしておけるあの構成
06:00できるという仕組みがデブコンテナという ものがありましてそれを利用してこの
06:04ギター羽生コードスペースで保持している コンテナーの方も
06:10環境笠間 is して利用できるように なっているって言ったところがですね a
06:14とても利用しやすい体になっております もう一つですねこのポート
06:18フォワーディングっていう機能がありまし てこれはその自分のマシンではないきっと
06:23羽生がホストしているコンテナ なのであのその実行環境に圧迫するには
06:29ですねリモート環境に届かないといって ないんですけどもギッと幅講座
06:33spaces のポートフォワーディング 機能を利用するとへリモートで自己されて
06:38いるポートに対して コードスペースの環境通して
06:43ローカルホストもしくは公開した a url でアクセスできるようになります
06:47のでリモートにあることを気にせず実行 環境にアクセスできるそのまま開発を
06:52続けることができるっていう点がきっと 羽生コード spaces の良いところ
06:55になっておりますもう少し詳しく見ていき ましょうまずはですね図解するとこのよう
07:00な形になっていると思いますはいは一番 ちょっと音シンプルに分かりやすい風にし
07:06てみたんですけど切っとハーフがその コンテナの実行環境を持っていてそれに
07:10対して私たちはブラウザまたは visual studio コードで
07:13アクセスして開発をできるって言ったよう なところがおそらくね皆さんのイメージも
07:18しやすいんじゃないかなと思います でこの negicco 羽生コード
07:22スペイシーずあのすごく簡単に利用する ことができますでへとこれちょっと後ほど
07:28ご紹介するんですけどもお使いの桜が大事 しょんでコード spaces が有効化
07:33されていればすぐに使うことができます 使い方は簡単でこちらのキャプチャにある
07:39通りいつもね使うこの緑のコードのボタン これ普段はきっと苦労するときに言われる
07:45よねこのコードのボタンから表示して コピーして使うと思うんですけどもそこの
07:50猫のポップアップに行動 spaces の タブがれておりまして
07:55そこから new code spaces で新しいコードスペースを作ることができ
07:59ます この高 spaces を初めて起動する
08:03タイミングの時にこのような形ですね 真っ新タイプを選ぶことができます
08:10ニコは4個はハチ公は16コアでこちらに 載ってないんですけども32コアまで
08:15選べるようになっているということになっ ております
08:18ふう弾私だと4コアで作業をすることが 多いんですけども例えばあの簡単な
08:23レビューをする時であればにコアを選ん だりとかしてこのスペックと価格は松井に
08:30なっていてあのそれぞれ値段設定があり ますのでそのチームもしくはその時のあの
08:37状況に合わせてですねスペックを選んで 利用いただけるって言ったところになり
08:41ます で
08:44コードステーシズはですね使ってない間は 使ってない間は停止しておけるのでその間
08:51は下記が発生しません 布で安心して利用することができるかと
08:57思います で
09:00何もあの先ほどね環境カスタマイズできる お話を少ししたんですけれども
09:05カスタマイズしなくてもですねデフォルト の環境うんちですぐに利用できるように
09:08なっておりますでこの文中に多いですね a 4ような言語がインストールされていまし
09:13てロード js . net 子は python 3型 php ruby 号
09:18など a
09:19まあ恐らく皆さんが使えそうである言語が インストールされているのでまずはね
09:24デフォルトの環境で触ってみることをお 勧めいたします
09:27でねあの味ラーには嬉しい azure 茂 アヤムね実はねあのプリインストールされ
09:32ているとなのであ microsoft azure の開発をされる方はですね
09:36非常に便利なティルト環境になってるとい ます
09:41もう少し詳細をしていて方はですねこちら の資料のリンクを辿って頂ければと思い
09:46ます であの先ほどねコード spaces 停止
09:50しておけるってお話ししたんですけども 停止している間もそのファイルの変更で
09:54あったりとかは保持されるようになってい ますどういうことかというとこちらもあの
09:59コンテナの仕組みなんですけれども本当の そのインスタンスっていうのはボリューム
10:03とひも付けて立ち上げることができますで インスタンスの方は時効停止していたとし
10:08てもボリュームの方はずっとあの生かすっ ていう形になりますのでご利用は生かされ
10:13ていた状態でえっと1回停止していた コンテナをまた立ち上げてボリュームと
10:18連結して環境を提供してくれるそんな形で a子スペース有コードスペースを利用する
10:25ことができます
10:28でポートフォワーディング実際どういう ものかというともう少し説明していきます
10:33でこちらはですねえっとまずの体感として の使い方はですねローカルホストとして
10:38アクセスできる あの
10:41先ほどもお話ししましたように越冬切っと ハグ側がそのコンテナの
10:48実行環境を保持しているのでそちらに対し て自分のこのまあ手元の作業用マシンから
10:53リモートにアクセスすることになるんです けどもこれをあのこの spaces 側
10:59でポートフォワーディングしてくれて あたかもローカルホストのポートに
11:04アクセスしているような形で見せながらも リモートのえっえコードスペースの環境に
11:09アクセスできるといった形で え非常にねスムーズな開発をすることが
11:14できますまたこれですねローカルホスト だけではないんですよあの visual
11:18studio コードのリモートコーンて のはもうこのポートフォワーディングの
11:22機能があってローからホースでアクセス できるんですけども
11:25構造ステージ頭のいいところはですねこれ を
11:28へ ときっと羽生の組織オーガナイゼーション
11:32もしくはパブリックに向けて肺胞できる っていうところがこれもねえ構造
11:37spaces の良いところだなと思って おりますこれはですねこれもあのちょうど
11:40の音でもの時に少しお見せしようかなと 思っているんですけれども
11:44public リポートを共有できるって 言うことはですね
11:49他の外部サービスを使うような音開発して いる時にあのコールバック url を
11:54設定するみたいなシーンってけっこうある かなと思うんですけどもその時にねあのう
11:59自分の手元のローカルホストで動いている 開発環境にそこから安乗物が戻ってくる時
12:05ですねローカル歩数でいけるものがあるん ですけれども
12:09https でないと https の url でないとダメっ
12:15ていうようなパターンもあるわけですよ そういう時にこのパブリックん
12:19で開放したポートファーリング機能を使う とですねあの
12:23https の url を発行して くれるのでそれを
12:28コールバックのエンドポイント言われるに 設定しておけば外部サービスとの連携も
12:33へ まこのローカルで作業しているというか
12:37コード spaces で作業している 環境にスムーズに
12:40へ接続させることができるって言ってよう な使い方もすごく便利だなと私は
12:45普段裂かってぃで感じております でもう一つあの子の環境って
12:52web コンテナーの仕組みを使うと json ファイルにその構成の設定値を
12:57書いておけるんですねスローリポジトリに 入れていく置くことによってみんなで共有
13:01して利用できるんですけどもその中に シークレット角度はね全タブーですよね
13:06あの リポジトリ以上にシークレットを送って
13:09いうのは本当にも絶対やっちゃいけない ことなのでじゃああの個人で使うような
13:14シークレットの情報でどうすんの毎回 て宇宙数の毎回
13:18で何かコピペしなきゃいけないのではてて はないんですよ
13:21このね昨日はですねえっとぉ ギッと羽生元々あのギターはアクションず
13:27使われてる方がだったら 想像つきやすいと思うんですけども
13:31シークレット尾根設定できるんですよねで あの
13:35これがいくつかすことがあって 自分自身の3月から自分自身が立ち上げた
13:40secret の巣まず自分自身が 立ち上げたコードスペースの中でだけ自分
13:46が設定した c クレートを使いたいって 場合はパーソナルセッティングからその
13:50シークレット設定することができます リポジトリでリポジトリを
13:56リポジトリ全体でチークレットを設定する こともできますなぜ例えばそのままチーム
14:03で共有したようなシークレットですね開発 のプロジェクトをみんなで共有したような
14:07シークレットがあればそれはリポジトリで 同意するといいかなと思いますもしくは
14:11ですねオーガナイゼーションの中で共有 するっていう使い方もできますこれもです
14:16ねあま干支使い方は一緒でそれぞれあの リポジトリーセッティングもしくは
14:21オーガナイゼーションのセッティングから シークレッツの行動ステーシーズの項目
14:26から設定することができます でエッチしたシークレットはコード
14:31スペースの中だと え環境変数として読み込むことができます
14:35はいをこのあたりですね実際触ってみて 頂ければと思います
14:39次ですねこの着物のがこのデブコンテナー による開発
14:44このデブコンテナーによる環境の カスタマイズができる点が本当に便利だと
14:49私は感じております 先ほどもお話ししたようにデブコンテナー
14:53.ジェイソンという 無事依存ファイルにですねこのコード
14:57ステージこのコンテナの環境はこういう ふうにせタップしておきますって言うこと
15:02を真インフラストラクチャーずほどですね あの高評価して置いておける
15:07でその行動を読み込んで行動スペースを 立ち上げれば皆同じそのコードから
15:11立ち上がった環境にアクセスすることが できるそれを利用することができるように
15:15なりますいうところですね このデブコンテナジェイソンを作るの
15:20ちょっと面倒かだなーって思って方 いらっしゃるかもしれないんですけども
15:23これですねコマンドパレットからアド development コンテナ
15:27コンフィギュレーションファイルって言う コマンドを叩くとですねベースにする
15:31イメージを選択してさらに プリインストールする機能を選択して
15:36簡単に gui で設定することができ ますで作成されたそのねっ web
15:40コンテナー g ゾーンのファールをもと にへご自身のアゴ人8チームの環境に
15:47合わせてカスタマイズして利用していくっ ていうような形が最初とつきやすいんじゃ
15:51ないかなと思います詳細気になる方 いらっしゃいましたらこちらのリンクを
15:54参照してくださいいっ この web コンテナですねいくつか
15:59機能があるんですけれどもその中でも2つ ほどピックアップしてご紹介していきたい
16:03とおもいます まずはですねエクステンションズハイあの
16:08visual studio コードね 利用されている方であればピンとくるかも
16:11しれないんですけどもあのまず visual studio コード自体
16:15のセッティングに 拡張機能を
16:19リコメンデーションするっていう設定値が あるんですよ
16:22でもそれはリコメンデーションするだけな んですね
16:26でこのデブコンっていうのはあのは エクステンションずにその
16:29その x テンションの id を書いて おくとですね最初のデブコンテナーの起動
16:34時にですねそのエクステーション インストールした状態で立ち上がって
16:38くれるんですよ なのでそのリコメンデーションサイトから
16:41自分でいいストールっていうする必要が なくてもう良いストールされた状態で
16:45立ち上がってくるって言った所かね地味に これね結構楽なんじゃないかなと思います
16:51はい 次もう一つご紹介したのはね先ほども出て
16:55きましたがえヒューチャートっていう機能 がありますこれをですねあの高校 the
17:01spaces 側と言いますかあの azure cli やー
17:06寺フォームなどいくつかそのよく使われる このソフトウェアだったりを構成するため
17:13のスクリプトがですねすでに用意されて いるんですねそれをこのフューチャーズで
17:18指定するだけでその対象のソフトウェアを インストールした状態でコンテナを聞いを
17:24することができるって言ったような機能に なっております
17:26で私が最近は自分の音業務でよく使うんで あればアジル cli とか寺フォームを
17:32ぷりにソウルさせておくってことがそのね あのデブコンテナジーそうに書き込む的で
17:37これらができるって言うのはねすごく便利 であのー
17:41簡単にこのコンテナの環境をカスタマイズ できるのですごく重宝しております
17:489ねきっとほど楮 spaces を使え ば皆さんの悩みも開発解決するんじゃない
17:53かといったところです てきっと羽生コード spaces が
17:57あればね まずですよあのみなさんの手元のマシン
18:01スペックに影響されない っていう点ですねこれその厳密にはですね
18:08visual studio コード 立ち上げてもしくはまあブラウザでも
18:11ブラウザでもその状態でまあねトークで 通信してコードスペースを使うのでそんな
18:17部分だけは確かに必要なんですけれども それ以外ですね実行環境自体はきっとハブ
18:22側にあるので皆さんのマシンとえ重い重い 処理が動くってことはない空になるわけ
18:28ですよなのでかなりこれはねあの皆さん まで快適に使えるんじゃないかなと思い
18:33ます でもう一つあの
18:36本当に環境セットアップが本当に容易に なりますあの皆さんね皆さんかいたことで
18:41絶対一回はあると思うんですけど環境構築 用のドキュメントそれを書く必要はあり
18:45ません しいて言うんであれば環境構築用の g 3
18:49ファイルを書く必要はあるかもしれません ねはい
18:52でもそれだけでまぁ実際は書くときは書く んですけどもあとねそれをに従って手作業
18:58で作るみたいなことはないので間違える ことだけどなんか手順通りにやったんです
19:03けれども動きませんっていうことになら ないわけですよ
19:06これまでかなり皆さんのても新しく入って きた方自身の時間もそうですしそれを
19:12サポートするね先輩たちの時間も ちゃんと等
19:17んだそこに手間取ることなく開発を セットアップできるって言うことはすごく
19:22で有用なんじゃないかなと思いますあと ですねまぁ急なバグ解析とかレビューし
19:26たいときはこのレビューしたいと聞いとか まあほんとバッグ解析の時すごく便利で
19:33は普段開発しているこのコードスペースが あってであのもう一個建てられる良い靴で
19:40も立ち上げられるんですねなのであの レビューしたくなったらレビューように一
19:45つもう一個コードスペースの環境をつくっ て
19:48でそこであのレビューの対象の ボランティアに切り替えてで制定ファイル
19:53とかもし必要であればもうちょっと ちょっとそこだけ用意したりもしなきゃ
19:57ならないかもしれないんですけども レビューに向けて
19:59まあそれでそれするだけで新しい環境で レビューして動かして
20:05レビューが終わったらその環境を捨てる ことはあのその環境を消去することができ
20:09ますのでまた糸今までやっていた開発に 戻るって言ったところであの
20:15すごく損ねスムーズに好環境を切り替えて 使えるのでかなりねやってみるとねこれ
20:22かーみたいな 感じであのすごいんだね快適に感じるかな
20:27と思います あとはですねあのなんか21年前に行った
20:31プロジェクトででもちょっと久々に更新し なきゃいけないみたいな時にあの時どう
20:35いう環境を作っただけみたいな もしくはあのねなんかあの言語の
20:40バージョンとかがアップロー言語の バージョンとかか
20:44このアップされていて 登場環境に合わせるにはまだ自分の環境を
20:48変えなきゃいけないみたいなことをめんど くさいじゃないですかそれが必要ないわけ
20:52ですよ そういう時た後もう一つこれあの
20:58要はその切っ東部川に実行環境があるので どうも安心から接続しても同じ環境に
21:04アクセスできるってことですなので私は 普段おうちで windows の
21:08マシーンを使って開発してるんですけども さっきではですね最近あの n one
21:13バックの macbook air を 持って歩いてるんですけどそちらでも
21:16ビジュアルた事故っコード入れてあるので そこからアクセスしてさっきまで作業をし
21:21ていた環境にアクセスして撃っ え作業の続きができるで
21:26はね待ち合わせとか待っていてああきた 割っていて閉じてでまた帰ってきて
21:32windows のいつも使うてるまぁ 死んでまだその環境にアクセスしてすぐ
21:36続きを開発できるといったようなところで これはね本当に普段つか本当に私最近高の
21:43スペースしか使ってなくてもとな環境に もうプロジェクトを置いてないんくらいな
21:47んですよねすごく便利に使えているので 本当にね本当にオススメですはいもう少し
21:53ね皆さんにね見せていきたいとおもいます ということですね
21:57ちょっと文字だけだと分かりにくいところ もあると思うので実際にデモをしていき
22:01たいとおもいます でものシナリオとしては開発中の
22:05プロジェクトにあなたは参入してきました 先行してフロントエンドの開発は進んでい
22:09ますであなたの担当はバックエンドの api の開発と運用環境の整備です
22:17今回ね microsoft azure を使えるということでフロントエンドは
22:20azure static web アップ 末 api も末 static
22:23ウェーバープスが内包する味ルパン[ __ ]で 運用していこうといったところ
22:28これからちょっとやっていこうと思います ではですねまあこちらが開発に使う
22:33リポジトリになっておりますすでに開発が 進んでいる様子が見てわかるようになって
22:38おりますでここでですね新しく入ってきた 私は私はですね新しいコード spaces
22:44のインスタンスを立ち上げようと思います このようにですねワンクリックで誰じゃい
22:50ますって 私の方は visual studio
22:53行成普段使っているのでそのまま visual studio こーぜ開く
22:58f ローになりまして本のような形で visual studio コードで9
23:03個のリポジトリををクローンした状態の 官僚が開かれるって言ったところを
23:09ちょっとちょっとだけセッティングアップ の間待っているだけで環境がすぐに整う
23:14わけです じゃあこの間にですね待ってる間に
23:17ちょっと どんなような環境なんか見ておきましょう
23:21web コンテナジェイソンがありますね こちらに
23:25ちょっと記述を見ていきたいとおもいます
23:298 まあ
23:31この環境はですね濃度 js とタイプ スクリプトのイメージをベースに作って
23:36あることがうかがえますですねくす テンションにはですねえ es 凛とが
23:40既にインストールされた状態で開かれる ようです
23:44さらにですねフューチャーズでは切っ等の 最新版がインストールされるようにへ記述
23:50されておりますのでああああああ これからね環境が立ち上がったらいいとの
23:54最新版がすぐ使えるようになっていると 思います
23:59少しだけどっかファイルも見ていきたいと おもいます
24:02こちらですねこちらを読み込むようになっ ておりますでこの度かファルト先ほどの
24:07web コンテナジェイソンはですね a コードスペースが用意しているデフォルト
24:12のイメージの中から選択してポチポチ作っ たものになっております
24:18まあ えどうで
24:20どっかファイル読める方は分かると思うん ですけどもこのねイメージを展開してる
24:26だけですねうんはいこのような形のね 江戸かファイルが
24:32作成されますこれは えっとコードスペースが用意している
24:36デフォルト納竿デフォルトのイメージを 使うような設定をしたっていうところに
24:42なっております はいこんな感じですね
24:47ビルドしている要素が見えるかと思います はいそれではですね環境が立ち上がったの
24:53で見ていきましょう このようにですね
24:58リポジトリ位の内容が苦労された状態で 環境が立ち上がるようになっております
25:04ここではですねぎっとの最新版が使える ようになっていたり
25:09あとはノードカーでインストールされて いる
25:13えっとタイプクリックと環境もあると言っ たようなところですぐに開発できるように
25:17なっております試しにフランと遠藤を実行 してみましょう
25:23まずはですね npm install を しておきますもちろんですねこの npm
25:29install もしておくことはでき ます
25:32のデブコンテナーの設定で環境を作成する 前に
25:37コマンドを流すことができるのでそれで npm install 寝させておく
25:41こともできちゃったりはします はい都合もありますよねそれではランデヴ
25:46だ
25:50はいこのような形でですね このフロントエンドはポートの3000万
25:55でいく ローカル実行できるようになっております
25:57でこれを2ポートの軌道が検知されたら ポートファーリングを設定してくれるよう
26:04になっております う
26:06ローカル放送の3000倍にアクセスする と
26:09今実行中ねこのビューの 関東いう自己中の牛の環境にアクセスする
26:17ことができるようになっております count up してみません宇治動い
26:22てます言ったようなところになっており ますそれではですね
26:28国会あの私がこのチームにジョインしてき てやるべきタスクが api の開発と a
26:35運用環境の整備ですなのでその作業をした 前提でブランチをちょっと開いてみたいと
26:41思います
26:52はい でへ今ですね web コンテナーに手を
26:57入れているのでリビルドしますかって言っ たところを堅持してあの促してくれるので
27:03リビルドしようと思います
27:08はい リビルドしてる間にちょっとどのような
27:12変更を加えたか見ていきたいとおもいます
27:17ですね
27:22true 立クエストで見ていきましょう
27:26今猫の変更を加えるといったところで シナリオで進んでおります
27:33まずですねそれで部コンテノアジェイソン をどのように変更車か見ていきましょう
27:38まずはですね エクステ超いくつか追加しましたこれは
27:42スタティック web アップスだったり アジルファンクションを使うための拡張
27:46機能であったりとか あとビュー no 開発にこのボラーて
27:51いうえく拡張機能が入っているとすごく 便利なのでそれを入れたりしています
27:57さらにですね azure cli ドテラフォームの新
28:01li も一緒にインストールさせるように しておりますここまではこのデブ
28:06コンテナー g そうの変更だけでこれら の物がインストールされるようになってい
28:11ますでさらにですね実はこので母校 テナジーそんだけだとできないことが今回
28:16会ったのでそれはですね直線2どっかん ファイルを更新する形でインストールさ
28:21せることにしますひとつは azure ファンクションコアツールですねファンク
28:26コマンドをインストールする部分がこの あたりです
28:30さらに static ウェーバーぷそうローカル
28:32で実行するための swac li っていうのもあるので
28:36そちらのインストールも行なっております
28:41今この環境がリビルドしてい え今準備しようとしているところになって
28:45おります
28:48さらにですねえと visual studio コートのでバック機能も
28:52もちろん使うことができましてそのあたり の設定ファイルも今回追加しております
28:59今日はコード spaces の セッションなのでこの愛はこの辺は割愛し
29:03ますけれどもこれを合わせて設定しておく と本当にあの便利に使うことができるよう
29:09になっております あとはジェルファンクションを追加した
29:13みたいなところでおなじみのコードが書い てあるようになっています
29:21そうですねえ 6追加してね
29:24他の子のデモ用の api はですね ステータスっていうエンドポイントにええ
29:29月桃をすると まあステータス ok 減って帰ってくる
29:33だけの会 epia お試しに作っており ましてこちらね
29:38たとフロントエンドが見えるように ちょっと最高しておりますので環境が整っ
29:43たら見ていきたいとおもいます ビルドが終わって
29:49環境が今立ち上がろうとしております はい立ち上がりましたこの環境はですね
29:54先ほどを見せした環境にプラスして azure cli をまずインストール
29:59しております さらに
30:03テラフォーム cli もインストールし ています
30:06さらにパンクコマンドも入っていて swa コマンドも入ってます
30:11このような形で環境を更新しております これはあとでメインブランチにマージし
30:16たらみんなでこの環境を共有することが できるようになりますね
30:22この状態ですね私はですね ちょっとデバッグをデバッグ実行してみ
30:28たいと思います 今回はこの環境では開発をやりやすくする
30:33ためにワークスペースの設定をしており ます
30:42何バックス提訴を指定することによって 複数ものリップで複数のディレクトリーが
30:48開発最小であったも作業やデバッグをし やすくなっております
30:55ちょっとへへ 少しだけ
30:59準備をしますね まずはエフロン全土の npm
31:03install
31:08次に
31:13azure ファンクションの会ローカル セッティングファイルを
31:18準備しておきます
31:28はいこの状態でですね
31:31では9実行していきたいとおもいます
31:40のリポジトリはですね公開するのでどの ような形でこのへデバッグの設定を行って
31:45いる彼はご興味ある方は是非見てみて ください
31:48私の場合はこの デバッグ実行の実行の前にですね
31:53タイプスクリプトでこのプロジェクトを つくっているのでビルドが必要な部分に
31:58ついては先にビルドを行っています それが終わってから swa の
32:04こま同時こうしてフロントエンドの実行と api の繋ぎ込みを行っております
32:12でその場合はですねえといくつかポートが 使われていてまずフロントエンド3000
32:17番でアジル azure ファンクションのポートは
32:217007一番です でそれらを統合してスティック米パスの
32:26cli が提供しているポートがよう 280これですね
32:31これでアクセスできるようになっており ます開いてみましょう
32:39はい
32:42さっきまでとちょっと画面が違うのがお 分かりいただけるかと思います
32:46このですたちステータス ok という ところの部分を出ずね今回私の担当で
32:51api をつくって対応するといった ところのでもとして追加させていただき
32:57ました これの正体はですね
33:00こちらのログにもあるように api を 実行しに行っております
33:08試しにデバッグ事故もうしてみましょう これでばブレークポイントを張ってもう
33:13一度リロードしてみます
33:18はいこのような形でたまりましたねこれを 実行しへと進めてあげると
33:24はい無事エピエーカーのデータが取れて 画面の更新されました
33:29このような形ですね 環境を必要に応じてカスタマイズして
33:36それを得リポジトリの中で共有して みんなで使っていけるって言ったような
33:41ところが コードステージ頭のいいところになって
33:45おります
33:47それでは a スライド資料の方に戻って いきましょう
33:54次にですねをノールプロジェクトについて ももう少しご紹介していきたいとおもい
33:58ます先ほどお見せしたワークスペースを 活用して
34:03環境をつくっております まずこのへ参考としてご紹介するのがこの
34:08音声回すというプロジェクトがありません そそこでですねタクシー配車システムの
34:14デモを行ないましたでこれはですね line のに風と呼ばれるこのチャット
34:19画面の下の方に表示されるリッチメニュー みたいなそれ
34:24とえそれからタクシーの配車を頼めて テーマタクシーの配車の管理してる側とし
34:30ては管理システムで敗者の
34:34歯医者の予約が入っていたら歯医者のて早 を行うみたいが2つのシステムを一つの
34:40リポジトリで開発をしておりました もう少しちょっと図解しますとですねこの
34:45ような形でクライアントはそのリフの立地 メリーの部分はこれはスタティック
34:50ウェーブアップスで静的サイトをホストを していていくつかの api だけ持って
34:55いる形になっていますで管理サイトのほう もアドミンという形でこちらもフロント
35:01遠藤といくつかの api で構成されて いてどちらもスティックウェバープスで
35:06動いているような状態ですこれを一つのい ポジトリで干すとして
35:11さらに開発も両方とも動かした状態で
35:18開発でバッグができるようにっていいこと をしました
35:23どういうことかというとですね まあ先ほどお見せしたようにあのう
35:29static web アップすっで フロントエンドとファンクションをホスト
35:33しているをから実行できることはお見せし た通りなんですけどこれを
35:40それぞれ マルチルートワークスペースにそれぞれ
35:43設定してそれぞれでデバッグ実行の設定を しておきますで
35:48マルチルートワークスペースは それぞれのワークスペースのでは久慈工
35:54まとめておくっていう設定ができるので それでそのデバッグ実行を起用すると両方
36:00とものデバッグ事故が起用されるような 作りに設定をしております
36:06えっとポートが被っちゃうので越冬 クライアントの方はデフォルトの冒頭で
36:10アドウィンの方は1個ずつポーズをずらす という形両方共存できるように作ってい
36:15ます
36:21このまあラインが関わって line の ログインの部分を使っているんですね
36:25line のログインそのリフの作りとし ては
36:28ログインしたら戻る先のエンドポイント url を
36:33ライン川に設定しなきゃいけないんです けども
36:35あの普段ローカルで開発している時って それはたとえばえんぐれっくか何かを使っ
36:40て港トンネルしてあげなきゃいけない状況 になると思うけどまあここで線ポート
36:45フォワーディングの公開範囲をパプリック に変えてurl を発行することでその
36:51エンドポイントにそのポート フォワーディングのパブリックの url
36:54を設定して
36:57まあそのトンネルを行うことなく ラインのコールバックを受け付けてこの
37:03ローカル実行 を動かすことができるそういうような構成
37:08になっております でも少し実物を見ていきたいとおもいます
37:14こちらがへその温泉マーサプロジェクトの リポジトリのワークスペースを開いた状態
37:19になっていますワークスペースでは クライアントと admi にそれぞれを
37:24へ それぞれ二つのワークスペースとして設定
37:28しておりますと
37:32この状態ですね
37:35どっちのワークスペースにもそれぞれ デバッグ実行のタスクを設定してあるん
37:42ですけどもこれを両方を起動するという やり方があります
37:47はいそれでは両方立ち上がったので ちょっと敗者のでもをしてみたいと思い
37:51ます
38:02その前にサポート4頭の子で4280って いうのがええ
38:08利府の に不要のスタティック web アップさ
38:11んですけれども こちらを一家パブリックにしておきます
38:18パプリックにしたこの url を ラインの
38:23利府のエンドポイントに指定します
38:35はいこの状態で 開いてみましょう
38:46そうするとラミーログインが促されてログ インするとタクシーの配車釉薬の画面が
38:51協議されますこれは実際にはリフトして あのライン上に表示されるものになって
38:58おります
39:01いい所5 腕予約
39:10でこの上大事ですねさらに管理画面を開い てみたいと思いますこちらはローカル放送
39:14で開きましょう
39:17ぽっぷいんぷらうどあ
39:23はいこのような形でこれは今さっきへ この収録時はですね1月10日今
39:299:51なんですけれどもこのような形で 星いま
39:32今予約したタクシーの一覧が管理画面で 見えるそして a こちらで操作すると
39:37いったようなデモが行えるようになって おります
39:42まあ今のような形でですねわりかし風複雑 がプロジェクトでもコード spaces
39:47上で開発が進めていけるといったような ことがおわかりいただけたかなと思います
39:55それでは このような形ですね短い時間でしたけれど
39:58もきっと羽生コード spaces の私 が気に入っている機能をご紹介させて
40:03いただきましたってですね今この技と羽生 コードステーシーズはですね使えるのは
40:08切っと羽生チームもしくはギター羽生 エンタープライズのクラウドの方で利用
40:13できるように既になっておりますで個人で 利用されているまたは実はですね今まだ
40:17ベータ版の申請が 必要になっておりましてこちらはベータ版
40:22申請するとですね この個人アカウントのベータ版の時だけ今
40:28いつまでか分からんですけど今この時点で はベータ版は無料で使えるようになって
40:32おりますなので少しでも気になった方は ですねまずはこのベータ申し込もやって
40:37いただいて使えるようにしていただければ と思います
40:41ねっ 逆にんえすでにギター部チームやギター部
40:45エンタープライズクラウドをご利用の方 でしたら管理者の方がですねコード
40:50spaces を有効にすることによって 利用できるようになるはずですのでぜひ
40:53あの管理者の方に音がへお問い合わせ いただき利用していただければと思って
40:58おりますはいそれではですねもし疑問等 ございましたらですねえこのセッションの
41:03宮重のところに渡しておりますし 普段のあのちったぁであったりとか声を
41:08かけていただければ何なりと ご協力できることは今あると思いますので
41:14ぜひ宜しくお願い致します
41:18ご清聴いただきありがとうございました
5.0 / 5 (0 votes)
