Enviar búsqueda
Cargar
VS Code Remote Containersを使った Angular開発
•
Descargar como PPTX, PDF
•
0 recomendaciones
•
4,571 vistas
S
ShuheiHonma
Seguir
フロントエンドLt会 vol.3 #frontendlt
Leer menos
Leer más
Ingeniería
Denunciar
Compartir
Denunciar
Compartir
1 de 8
Descargar ahora
Recomendados
Blazor Web Assembly (C#) を触ってみた
Blazor Web Assembly (C#) を触ってみた
Naito Oshima
React + Amplifyで アプリ開発
React + Amplifyで アプリ開発
虎の穴 開発室
AWS amplify studioが変えるフロントエンド開発の未来とは
AWS amplify studioが変えるフロントエンド開発の未来とは
Koitabashi Yoshitaka
【PlayFab】UnityAdsのリワード広告を統合する方法
【PlayFab】UnityAdsのリワード広告を統合する方法
TakuyaNakajo
GCPの画像認識APIの紹介
GCPの画像認識APIの紹介
虎の穴 開発室
Lt 20150711
Lt 20150711
Tomoyuki Obi
Visual Studio 2019 Updates Pickup!
Visual Studio 2019 Updates Pickup!
Hiroyuki Mori
はじめてのAWS CLI
はじめてのAWS CLI
Nobuhiro Nakayama
Recomendados
Blazor Web Assembly (C#) を触ってみた
Blazor Web Assembly (C#) を触ってみた
Naito Oshima
React + Amplifyで アプリ開発
React + Amplifyで アプリ開発
虎の穴 開発室
AWS amplify studioが変えるフロントエンド開発の未来とは
AWS amplify studioが変えるフロントエンド開発の未来とは
Koitabashi Yoshitaka
【PlayFab】UnityAdsのリワード広告を統合する方法
【PlayFab】UnityAdsのリワード広告を統合する方法
TakuyaNakajo
GCPの画像認識APIの紹介
GCPの画像認識APIの紹介
虎の穴 開発室
Lt 20150711
Lt 20150711
Tomoyuki Obi
Visual Studio 2019 Updates Pickup!
Visual Studio 2019 Updates Pickup!
Hiroyuki Mori
はじめてのAWS CLI
はじめてのAWS CLI
Nobuhiro Nakayama
Flash Professional CS6 の新機能のご紹介 AIR編
Flash Professional CS6 の新機能のご紹介 AIR編
KinkumaDesign
Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!
一希 大田
Capacitor
Capacitor
Masayuki KaToH
WebWorker and Atomics
WebWorker and Atomics
Taketoshi 青野健利
V8 Iginition Interpreter
V8 Iginition Interpreter
Taketoshi 青野健利
事前準備の手引書
事前準備の手引書
Makoto Oya
.NET Core 3.0 で Blazor を使用したフルスタック C# Web アプリの構築
.NET Core 3.0 で Blazor を使用したフルスタック C# Web アプリの構築
Joni
PhysXを使って 揺れものやってみた~UE版~
PhysXを使って 揺れものやってみた~UE版~
poko ponmaru
明日からはじめられる Docker + さくらvpsを使った開発環境構築
明日からはじめられる Docker + さくらvpsを使った開発環境構築
MILI-LLC
React native vol3
React native vol3
dcubeio
仮想サーバは、もう不要?!今からIoTやるなら「サーバレス・コンピューティング」
仮想サーバは、もう不要?!今からIoTやるなら「サーバレス・コンピューティング」
真吾 吉田
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
Yasunori Kirimoto
Realm,rx swift,repro を使ってみて
Realm,rx swift,repro を使ってみて
Daisuke Nagata
Kubernetesのない世界 すべてがサーバーレスになる
Kubernetesのない世界 すべてがサーバーレスになる
真吾 吉田
APIモック3分クッキング
APIモック3分クッキング
政雄 金森
Visual Studio 2019 Features & Tips @kosmosebi
Visual Studio 2019 Features & Tips @kosmosebi
Keiji Kamebuchi
C# 7 New Features
C# 7 New Features
Takaaki Suzuki
JavaScriptでパワポを作ろう
JavaScriptでパワポを作ろう
Saki Homma
Visual Studio Live Share で猛暑を乗り切ろう!
Visual Studio Live Share で猛暑を乗り切ろう!
Saki Homma
Realm meet up #17
Realm meet up #17
Daisuke Nagata
Más contenido relacionado
La actualidad más candente
Flash Professional CS6 の新機能のご紹介 AIR編
Flash Professional CS6 の新機能のご紹介 AIR編
KinkumaDesign
Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!
一希 大田
Capacitor
Capacitor
Masayuki KaToH
WebWorker and Atomics
WebWorker and Atomics
Taketoshi 青野健利
V8 Iginition Interpreter
V8 Iginition Interpreter
Taketoshi 青野健利
事前準備の手引書
事前準備の手引書
Makoto Oya
.NET Core 3.0 で Blazor を使用したフルスタック C# Web アプリの構築
.NET Core 3.0 で Blazor を使用したフルスタック C# Web アプリの構築
Joni
PhysXを使って 揺れものやってみた~UE版~
PhysXを使って 揺れものやってみた~UE版~
poko ponmaru
明日からはじめられる Docker + さくらvpsを使った開発環境構築
明日からはじめられる Docker + さくらvpsを使った開発環境構築
MILI-LLC
React native vol3
React native vol3
dcubeio
仮想サーバは、もう不要?!今からIoTやるなら「サーバレス・コンピューティング」
仮想サーバは、もう不要?!今からIoTやるなら「サーバレス・コンピューティング」
真吾 吉田
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
Yasunori Kirimoto
Realm,rx swift,repro を使ってみて
Realm,rx swift,repro を使ってみて
Daisuke Nagata
Kubernetesのない世界 すべてがサーバーレスになる
Kubernetesのない世界 すべてがサーバーレスになる
真吾 吉田
APIモック3分クッキング
APIモック3分クッキング
政雄 金森
Visual Studio 2019 Features & Tips @kosmosebi
Visual Studio 2019 Features & Tips @kosmosebi
Keiji Kamebuchi
C# 7 New Features
C# 7 New Features
Takaaki Suzuki
JavaScriptでパワポを作ろう
JavaScriptでパワポを作ろう
Saki Homma
Visual Studio Live Share で猛暑を乗り切ろう!
Visual Studio Live Share で猛暑を乗り切ろう!
Saki Homma
Realm meet up #17
Realm meet up #17
Daisuke Nagata
La actualidad más candente
(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で 快適なフロント開発を!
Notas del editor
このプレゼンテーションは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で快適なフロント開発をしてみてはいかがでしょうか 皆さんのフロント開発で、お役に立てることを願ってプレゼンを終わります ご清聴ありがとうございました。
Descargar ahora