Download to read offline
VS Code Remote Containersを使った Angular開発
- 1. VS Code Remote Containersを使った Angular開発 フロントエンドLT会- vol.3 #frontendlt - 2021/06 honma12345
- 2.
- 3.
- 4.
- 5.
- 6. 簡単にデモしてみる 用意しておくもの 1. docker formac / windows 2. visual studio code 3. 拡張機能remote containersインストール GitHubサンプル: https://github.com/honma12345/ng-sample
- 8.
Editor's Notes
- #2 このプレゼンテーションは5分で終わる予定です。５分を目指してご紹介します ~~~~タイトル読み上げ~~~~~~ 今回伝えたいことは「Remote Containersを使ってフロント開発を快適に！」というのがこのプレゼンの目的になります。 ■なぜ、この話が重要なのか? 普段業務で、visual studio codeの拡張機能 remote containersを使ったAngular開発をしています。 そこでこの機会に、利点を紹介し皆さんの役に立てればと思い発表することにしました。
- #3 では簡単に自己紹介します。 名前はほんましゅうへいです。アイレット株式会社に所属しており、エンジニア歴3年になります。 普段はAWSを主にサーバーレス開発をしてます。
- #4 remote containers導入前 フロント開発をするうえで、構築のセットアップに何より時間がかかっていました。 そこを解消してくれるのが今回紹介するremote containersです！
- #5 remote containersの何がいいのか？ Dockerのコンテナ内に、事前に利用言語とフレームワークを定義するだけで、コンテナをビルドするだけです。 なので、フロントの開発構築がめちゃくちゃ早く済みます。 また不要になった対象コンテナを削除するだけでいいので、ローカルマシンを汚さずにすることも利点です。
- #6 AWS Amplifyを利用したケースにも活用 普段AWSを利用した開発をしているので、Amplifyを活用したケースにも役立っています。 remote containersを使ってコンテナ内にamplify cliをインストールしておけばコンテナ上からcli経由でAWSリソースが作成できます また、amplify consolesでGitHubからコミットPush、マージすればAmplify経由でフロントのデプロイが実現可能になります。
- #7 では簡単にデモしてみます。 angularのテンプレート作成やnpm installは時間の都合上で事前に済ませています。 サンプルのコードを添付しておくので、もしよかったら使ってみてください
- #8 npm run startを実行するとローカルホストが立ち上がり、こちらの画面が表示できます。 あとは個人で利用したいライブラリなどをインストールして開発に専念できます！ では最後まとめに入ります。
- #9 remote containersでサクッと構築できるので検証などで試すことが可能になります。 もちろんAngularだけでなく、他言語も設定することが可能です。 例えばPythonやPHP、React.jsなども利用できます。 ぜひ、この機会にRemote Containersで快適なフロント開発をしてみてはいかがでしょうか 皆さんのフロント開発で、お役に立てることを願ってプレゼンを終わります ご清聴ありがとうございました。