Submit Search
Upload
VS Code Remote Containersを使った Angular開発
•
Download as PPTX, PDF
•
0 likes
•
4,623 views
S
ShuheiHonma
Follow
フロントエンドLt会 vol.3 #frontendlt
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 8
Download now
Recommended
Blazor Web Assembly (C#) を触ってみた
Blazor Web Assembly (C#) を触ってみた
Naito Oshima
Blazor Web Assembly (C#) を触ってみた 発表資料 : フロントエンドLT会 vol.1 -2020夏祭り- #frontendlt https://rakus.connpass.com/event/183881/presentation/ Hello World のハンズオンはこちら -> 5 分で Hello World できる Blazor WebAssembly (C#)https://qiita.com/nt_tn/items/97c0bc75e3afe9e02997
React + Amplifyで アプリ開発
React + Amplifyで アプリ開発
虎の穴 開発室
https://rakus.connpass.com/event/214484/ フロントエンドLT会 - vol.3での発表資料になります
AWS amplify studioが変えるフロントエンド開発の未来とは
AWS amplify studioが変えるフロントエンド開発の未来とは
Koitabashi Yoshitaka
Tech-in awsでのre:Invent2021のre:cap登壇資料です。 https://techplay.jp/event/838745?pw=65IiXlag
【PlayFab】UnityAdsのリワード広告を統合する方法
【PlayFab】UnityAdsのリワード広告を統合する方法
TakuyaNakajo
ユーザーに短い動画を見てもらうことで報酬を付与する「リワード広告」について、UnityAdsを例に挙げ、PlayFabに統合する方法について解説した資料です。
GCPの画像認識APIの紹介
GCPの画像認識APIの紹介
虎の穴 開発室
GCPの画像認識APIの紹介
Lt 20150711
Lt 20150711
Tomoyuki Obi
2015/07/11 に開催された Microsoft Azureで描く未来 !CLR/H &Windows女子部(http://kokucheese.com/event/index/308411/) で行った LT のスライド
Visual Studio 2019 Updates Pickup!
Visual Studio 2019 Updates Pickup!
Hiroyuki Mori
2021年3月に開催されたIgniteに合わせて発表されたVisual Studioの新機能を紹介します。 Microsoft Ignite Recap Community Dayの登壇で使用した登壇資料です。
はじめてのAWS CLI
はじめてのAWS CLI
Nobuhiro Nakayama
はじめてのAWS CLI
Recommended
Blazor Web Assembly (C#) を触ってみた
Blazor Web Assembly (C#) を触ってみた
Naito Oshima
Blazor Web Assembly (C#) を触ってみた 発表資料 : フロントエンドLT会 vol.1 -2020夏祭り- #frontendlt https://rakus.connpass.com/event/183881/presentation/ Hello World のハンズオンはこちら -> 5 分で Hello World できる Blazor WebAssembly (C#)https://qiita.com/nt_tn/items/97c0bc75e3afe9e02997
React + Amplifyで アプリ開発
React + Amplifyで アプリ開発
虎の穴 開発室
https://rakus.connpass.com/event/214484/ フロントエンドLT会 - vol.3での発表資料になります
AWS amplify studioが変えるフロントエンド開発の未来とは
AWS amplify studioが変えるフロントエンド開発の未来とは
Koitabashi Yoshitaka
Tech-in awsでのre:Invent2021のre:cap登壇資料です。 https://techplay.jp/event/838745?pw=65IiXlag
【PlayFab】UnityAdsのリワード広告を統合する方法
【PlayFab】UnityAdsのリワード広告を統合する方法
TakuyaNakajo
ユーザーに短い動画を見てもらうことで報酬を付与する「リワード広告」について、UnityAdsを例に挙げ、PlayFabに統合する方法について解説した資料です。
GCPの画像認識APIの紹介
GCPの画像認識APIの紹介
虎の穴 開発室
GCPの画像認識APIの紹介
Lt 20150711
Lt 20150711
Tomoyuki Obi
2015/07/11 に開催された Microsoft Azureで描く未来 !CLR/H &Windows女子部(http://kokucheese.com/event/index/308411/) で行った LT のスライド
Visual Studio 2019 Updates Pickup!
Visual Studio 2019 Updates Pickup!
Hiroyuki Mori
2021年3月に開催されたIgniteに合わせて発表されたVisual Studioの新機能を紹介します。 Microsoft Ignite Recap Community Dayの登壇で使用した登壇資料です。
はじめてのAWS CLI
はじめてのAWS CLI
Nobuhiro Nakayama
はじめてのAWS CLI
Flash Professional CS6 の新機能のご紹介 AIR編
Flash Professional CS6 の新機能のご紹介 AIR編
KinkumaDesign
Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!
一希 大田
Microsoft Ignite Recap Community Day 2021 での登壇資料です。
Capacitor
Capacitor
Masayuki KaToH
ありがとう Cordova よろしくね Capacitor
WebWorker and Atomics
WebWorker and Atomics
Taketoshi 青野健利
Ecmascript2017の SharedArrayBuffer Atomics について
V8 Iginition Interpreter
V8 Iginition Interpreter
Taketoshi 青野健利
V8のIgnitionインタープリタについてです。
事前準備の手引書
事前準備の手引書
Makoto Oya
Ansible実行環境の構築手順
.NET Core 3.0 で Blazor を使用したフルスタック C# Web アプリの構築
.NET Core 3.0 で Blazor を使用したフルスタック C# Web アプリの構築
Joni
.NET Conf 2019 資料 「.NET Core 3.0 で Blazor を使用したフルスタック C# Web アプリの構築」
PhysXを使って 揺れものやってみた~UE版~
PhysXを使って 揺れものやってみた~UE版~
poko ponmaru
2018年12月開催したおおさかクリエイティブミーティングSP にて発表したスライドになります。
明日からはじめられる Docker + さくらvpsを使った開発環境構築
明日からはじめられる Docker + さくらvpsを使った開発環境構築
MILI-LLC
Amazon EC2 Container Service をはじめ、 Docker ベースのサービスが徐々に本番環境に導入されはじめてきています。 改めて Docker とはどのようなものなのか、 VMWare や VirtualBox など、従来の仮想環境と何が違うのかについて触れていきます。 また、開発環境を VPS 上に構築することで、チーム全体のパフォーマンスを向上させたり、ローカルマシンとサーバー上のデータをリアルタイムで同期させる他、マルチドメインに対応させることで、複数の開発メンバーが同時に開発環境にアクセスできるようにするなど、 Docker を使った開発がより楽しく便利になる方法についてお話しました。
React native vol3
React native vol3
dcubeio
Nov. 24, 2016 React Native vol.3 GraphQL & Relay
仮想サーバは、もう不要?!今からIoTやるなら「サーバレス・コンピューティング」
仮想サーバは、もう不要?!今からIoTやるなら「サーバレス・コンピューティング」
真吾 吉田
2019.7.2におこなわれた SORACOM Discovery 2019 G2トラックの資料です。
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
Yasunori Kirimoto
PyCon mini Sapporo 2019 発表資料
Realm,rx swift,repro を使ってみて
Realm,rx swift,repro を使ってみて
Daisuke Nagata
メルカリ様登壇内容
Kubernetesのない世界 すべてがサーバーレスになる
Kubernetesのない世界 すべてがサーバーレスになる
真吾 吉田
2018.4.19 Japan Container Days で話した漫談です
APIモック3分クッキング
APIモック3分クッキング
政雄 金森
https://connpass.com/event/52103/ こちらのイベントのLT資料です。 http://dev.classmethod.jp/cloud/aws/apigateway_mock_dev/ クラウドメソッドさんのブログでも取り上げていただきました。
Visual Studio 2019 Features & Tips @kosmosebi
Visual Studio 2019 Features & Tips @kosmosebi
Keiji Kamebuchi
Visual Studio 2019 Features & Tips Visual Studio 2019 Launch at Kansai
C# 7 New Features
C# 7 New Features
Takaaki Suzuki
//build/ 2016 で発表された C# 7 の新機能についてご紹介
JavaScriptでパワポを作ろう
JavaScriptでパワポを作ろう
Saki Homma
2018/02/22 We Are JavaScripters! @16th のセッションの資料です。
Visual Studio Live Share で猛暑を乗り切ろう!
Visual Studio Live Share で猛暑を乗り切ろう!
Saki Homma
Visual Studio Live Share はVSとVSCode 間、OSが違っても遠隔ペアプロ、モブプロができる機能です。これを使って遠隔で仕事をしましょう(`・∀・´)
Realm meet up #17
Realm meet up #17
Daisuke Nagata
Realm meet up
More Related Content
What's hot
Flash Professional CS6 の新機能のご紹介 AIR編
Flash Professional CS6 の新機能のご紹介 AIR編
KinkumaDesign
Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!
一希 大田
Microsoft Ignite Recap Community Day 2021 での登壇資料です。
Capacitor
Capacitor
Masayuki KaToH
ありがとう Cordova よろしくね Capacitor
WebWorker and Atomics
WebWorker and Atomics
Taketoshi 青野健利
Ecmascript2017の SharedArrayBuffer Atomics について
V8 Iginition Interpreter
V8 Iginition Interpreter
Taketoshi 青野健利
V8のIgnitionインタープリタについてです。
事前準備の手引書
事前準備の手引書
Makoto Oya
Ansible実行環境の構築手順
.NET Core 3.0 で Blazor を使用したフルスタック C# Web アプリの構築
.NET Core 3.0 で Blazor を使用したフルスタック C# Web アプリの構築
Joni
.NET Conf 2019 資料 「.NET Core 3.0 で Blazor を使用したフルスタック C# Web アプリの構築」
PhysXを使って 揺れものやってみた~UE版~
PhysXを使って 揺れものやってみた~UE版~
poko ponmaru
2018年12月開催したおおさかクリエイティブミーティングSP にて発表したスライドになります。
明日からはじめられる Docker + さくらvpsを使った開発環境構築
明日からはじめられる Docker + さくらvpsを使った開発環境構築
MILI-LLC
Amazon EC2 Container Service をはじめ、 Docker ベースのサービスが徐々に本番環境に導入されはじめてきています。 改めて Docker とはどのようなものなのか、 VMWare や VirtualBox など、従来の仮想環境と何が違うのかについて触れていきます。 また、開発環境を VPS 上に構築することで、チーム全体のパフォーマンスを向上させたり、ローカルマシンとサーバー上のデータをリアルタイムで同期させる他、マルチドメインに対応させることで、複数の開発メンバーが同時に開発環境にアクセスできるようにするなど、 Docker を使った開発がより楽しく便利になる方法についてお話しました。
React native vol3
React native vol3
dcubeio
Nov. 24, 2016 React Native vol.3 GraphQL & Relay
仮想サーバは、もう不要?!今からIoTやるなら「サーバレス・コンピューティング」
仮想サーバは、もう不要?!今からIoTやるなら「サーバレス・コンピューティング」
真吾 吉田
2019.7.2におこなわれた SORACOM Discovery 2019 G2トラックの資料です。
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
Yasunori Kirimoto
PyCon mini Sapporo 2019 発表資料
Realm,rx swift,repro を使ってみて
Realm,rx swift,repro を使ってみて
Daisuke Nagata
メルカリ様登壇内容
Kubernetesのない世界 すべてがサーバーレスになる
Kubernetesのない世界 すべてがサーバーレスになる
真吾 吉田
2018.4.19 Japan Container Days で話した漫談です
APIモック3分クッキング
APIモック3分クッキング
政雄 金森
https://connpass.com/event/52103/ こちらのイベントのLT資料です。 http://dev.classmethod.jp/cloud/aws/apigateway_mock_dev/ クラウドメソッドさんのブログでも取り上げていただきました。
Visual Studio 2019 Features & Tips @kosmosebi
Visual Studio 2019 Features & Tips @kosmosebi
Keiji Kamebuchi
Visual Studio 2019 Features & Tips Visual Studio 2019 Launch at Kansai
C# 7 New Features
C# 7 New Features
Takaaki Suzuki
//build/ 2016 で発表された C# 7 の新機能についてご紹介
JavaScriptでパワポを作ろう
JavaScriptでパワポを作ろう
Saki Homma
2018/02/22 We Are JavaScripters! @16th のセッションの資料です。
Visual Studio Live Share で猛暑を乗り切ろう!
Visual Studio Live Share で猛暑を乗り切ろう!
Saki Homma
Visual Studio Live Share はVSとVSCode 間、OSが違っても遠隔ペアプロ、モブプロができる機能です。これを使って遠隔で仕事をしましょう(`・∀・´)
Realm meet up #17
Realm meet up #17
Daisuke Nagata
Realm meet up
What's hot
(20)
Flash Professional CS6 の新機能のご紹介 AIR編
Flash Professional CS6 の新機能のご紹介 AIR編
Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!
Capacitor
Capacitor
WebWorker and Atomics
WebWorker and Atomics
V8 Iginition Interpreter
V8 Iginition Interpreter
事前準備の手引書
事前準備の手引書
.NET Core 3.0 で Blazor を使用したフルスタック C# Web アプリの構築
.NET Core 3.0 で Blazor を使用したフルスタック C# Web アプリの構築
PhysXを使って 揺れものやってみた~UE版~
PhysXを使って 揺れものやってみた~UE版~
明日からはじめられる Docker + さくらvpsを使った開発環境構築
明日からはじめられる Docker + さくらvpsを使った開発環境構築
React native vol3
React native vol3
仮想サーバは、もう不要?!今からIoTやるなら「サーバレス・コンピューティング」
仮想サーバは、もう不要?!今からIoTやるなら「サーバレス・コンピューティング」
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
Realm,rx swift,repro を使ってみて
Realm,rx swift,repro を使ってみて
Kubernetesのない世界 すべてがサーバーレスになる
Kubernetesのない世界 すべてがサーバーレスになる
APIモック3分クッキング
APIモック3分クッキング
Visual Studio 2019 Features & Tips @kosmosebi
Visual Studio 2019 Features & Tips @kosmosebi
C# 7 New Features
C# 7 New Features
JavaScriptでパワポを作ろう
JavaScriptでパワポを作ろう
Visual Studio Live Share で猛暑を乗り切ろう!
Visual Studio Live Share で猛暑を乗り切ろう!
Realm meet up #17
Realm meet up #17
VS Code Remote Containersを使った Angular開発
1.
VS Code Remote Containersを使った Angular開発 フロントエンドLT会
- vol.3 #frontendlt - 2021/06 honma12345
2.
自己紹介 ほんま しゅうへい アイレット株式会社に在籍 エンジニア歴3年 サーバーレス開発を主にやってます
3.
remote containers導入前の問題点 フロント開発の環境構築に時間がかかる
4.
remote containersの何がいいのか? フロントの開発構築がなにより早い ローカルマシンの構成に影響を与えない
5.
AWS Amplifyを利用したケースにも活用
6.
簡単にデモしてみる 用意しておくもの 1. docker for
mac / windows 2. visual studio code 3. 拡張機能remote containersインストール GitHubサンプル: https://github.com/honma12345/ng-sample
7.
8.
まとめ Remote Containersで 快適なフロント開発を!
Editor's Notes
このプレゼンテーションは5分で終わる予定です。5分を目指してご紹介します ~~~~タイトル読み上げ~~~~~~ 今回伝えたいことは「Remote Containersを使ってフロント開発を快適に!」というのがこのプレゼンの目的になります。 ■なぜ、この話が重要なのか? 普段業務で、visual studio codeの拡張機能 remote containersを使ったAngular開発をしています。 そこでこの機会に、利点を紹介し皆さんの役に立てればと思い発表することにしました。
では簡単に自己紹介します。 名前はほんましゅうへいです。アイレット株式会社に所属しており、エンジニア歴3年になります。 普段はAWSを主にサーバーレス開発をしてます。
remote containers導入前 フロント開発をするうえで、構築のセットアップに何より時間がかかっていました。 そこを解消してくれるのが今回紹介するremote containersです!
remote containersの何がいいのか? Dockerのコンテナ内に、事前に利用言語とフレームワークを定義するだけで、コンテナをビルドするだけです。 なので、フロントの開発構築がめちゃくちゃ早く済みます。 また不要になった対象コンテナを削除するだけでいいので、ローカルマシンを汚さずにすることも利点です。
AWS Amplifyを利用したケースにも活用 普段AWSを利用した開発をしているので、Amplifyを活用したケースにも役立っています。 remote containersを使ってコンテナ内にamplify cliをインストールしておけばコンテナ上からcli経由でAWSリソースが作成できます また、amplify consolesでGitHubからコミットPush、マージすればAmplify経由でフロントのデプロイが実現可能になります。
では簡単にデモしてみます。 angularのテンプレート作成やnpm installは時間の都合上で事前に済ませています。 サンプルのコードを添付しておくので、もしよかったら使ってみてください
npm run startを実行するとローカルホストが立ち上がり、こちらの画面が表示できます。 あとは個人で利用したいライブラリなどをインストールして開発に専念できます! では最後まとめに入ります。
remote containersでサクッと構築できるので検証などで試すことが可能になります。 もちろんAngularだけでなく、他言語も設定することが可能です。 例えばPythonやPHP、React.jsなども利用できます。 ぜひ、この機会にRemote Containersで快適なフロント開発をしてみてはいかがでしょうか 皆さんのフロント開発で、お役に立てることを願ってプレゼンを終わります ご清聴ありがとうございました。
Download now