Remote-Containersでnext.js環境を 作った話
- 1. VS Code Meetup #19 Remote-Containersでnext.js環境を 作った話 Author: Masaki Suzuki @makky12
- 2. VS Code Meetup #19 自己紹介 • 名前：鈴木 正樹 (Masaki Suzuki) • 在住：愛知県半田市 • 職業：フリーランスエンジニア • 業務：サーバーレス全般(主にバックエンドアーキテクチャ構築・設計・開発/インフラ) • 技術： • AWS/Serverless Framework/AWS CDK/Terraform/その他サーバーレスバックエンド全般 • TypeScript/JavaScript/Jest/Vue/Next.js(React) • CI/CD(GitHub Actions), コンテナ(Docker/ECR/ECS Fargate) etc. • SNS http://makky12.hatenablog.com/ https://github.com/smt7174 @makky12 (SUZUKI Masaki＠クラウドエンジニア)
- 3. VS Code Meetup #19 内容 • 経緯 • Remote-Containersについて • 具体的にやったこと • Typescript＆Node.js環境構築 • Next.js環境構築 • 感想＆まとめ • 参考情報
- 4. VS Code Meetup #19 リンク集 • Remote Container公式ページ • https://marketplace.visualstudio.com/items?itemName=ms-vscode- remote.remote-containers • Remote Container コンテナテンプレ一覧(GitHub) • https://github.com/microsoft/vscode-dev-containers/tree/v0.137.0/containers • 定義ファイル(devcontainer.json)リファレンス • https://code.visualstudio.com/docs/remote/devcontainerjson-reference
- 5. VS Code Meetup #19 経緯
- 6. VS Code Meetup #19 経緯1 • 業務でフロント側(next.js)に携わることになった • 本来はクラウドバックエンド＆クラウドインフラが大好きなんだけど… • next.jsなんもわからん… • プライベートでも勉強しなきゃ…と実感 • どうせ環境構築するなら、Dockerでやったほうが便利そう • 複数のPCで動かせる • よく使う環境の雛型を作っておけば、新しい環境を作る際に使い回せる • TypeScript+Node.js+Jestなど
- 7. VS Code Meetup #19 経緯2 • Twitterでフォロワーさんに下記のリプをもらった。 • 調べてみたら、確かに便利そう • しかもMicrosoft公式の拡張機能 • じゃあ、これを使ってみれば便利そう！
- 8. VS Code Meetup #19 Remote-Conatinerについて＆具体的に やったこと
- 9. VS Code Meetup #19 Remote-Containersについて • VS Codeでコンテナ作成＆開発をするのに便利な拡張機能 • 定義ファイル(devcontainer.json)からコンテナ環境を作成できる • 定義ファイルは各種テンプレートから対話形式で作成可能(※1) • 既存のDockerfileから作成も可能 • 追加で各種ツール・拡張機能もコンテナ環境に含めることが可能 • AWS CLI, GitHub CLI, Terraformなど • フォルダをコンテナとして開くことができる(dockerコマンドが不要)(※2) ※1 ※2
- 10. VS Code Meetup #19 具体的にやったこと(TS&Node.js環境構築) • Remote-Containersで定義ファイル＆Dockerfileの作成 • 定義はNode.js&TypeScriptを選択し、TSベースでの開発ができるように • Dockerfile自体はRemote-Containerが作成してくれる • docker-compose.ymlファイルの作成＆各種設定(自分で作成) • 定義ファイルに書くことも可能だが、今回はdocker-compose.ymlに記載 • 必要なnpmモジュールの追加(ts-node, ts-jest, webpack etc.) • これはDockerfileで「RUN yarn add xxx」を実行する • コンテナ環境として動作させ、TSおよびそのテストが動く事を確認
- 11. VS Code Meetup #19 具体的にやったこと(Next.js環境構築) • create-next-appのインストール • これもDockerfileで「RUN yarn add create-next-app」を実行する • その他、next.js(react)で必要そうなモジュールの追加 • testing-library/react系, axios, emotion etc. • これもDockerfileで「RUN yarn add xxx」を実行する • 下記を実施し、下記を確認できればOK • Next.jsでホスティングしたWebサイトが表示される • testing-library/react系のテストが正しく動作する • tsconfig.jsonは、共通設定はベースファイルからextendすると便利かも
- 12. VS Code Meetup #19 具体的にやったこと(Next.js環境構築:結果)
- 13. VS Code Meetup #19 感想＆まとめ
- 14. VS Code Meetup #19 感想＆まとめ • コンテナ開発をVS Codeで行うのに便利 • ベース環境が用意されているので、環境構築で一番面倒な部分が不要 • Docker同様、スクラップ＆ビルドが容易 • コンテナ作成時のエラーメッセージが結構わかりやすかった • 「xxxでエラー」とピンポイントで示してくれるのが良い • コンテナ自体の設定は、docker-compose.ymlなどに書いた方が良い？ • 「build.xxx」に設定すると、なぜか一部設定が効かない(自分の設定が悪い？) • (チームの場合)全員がVS CodeやRemote-Containersを使用するとは限らない • 一部プロパティはCodespacesでは未サポート • Remote-Containersを使う場合も、もちろんDockerに関する知識は必要
- 15. VS Code Meetup #19 参考情報
- 16. VS Code Meetup #19 (参考情報)設定可能な項目の例 • extensionsには、コンテナで適用する拡張機能のIDを配列形式で定義する • VS Codeの拡張機能の一覧で右クリックすると、その拡張機能のIDを直接 devcontainer.jsonに追加できる 項目名 説明 備考 name コンテナの名前 dockerfile/dockerComposeFile Dockerfile/docker-compose.ymlの場所 service docker-compose.ymlのserviceに付ける名前 features コンテナで適用するfeature(AWS CLI, Git CLI など、追加で適用するツールなど)の定義 settings コンテナで適用するsettings.jsonの定義 extensions コンテナで適用するVS Code拡張機能 下記参照
- 17. VS Code Meetup #19 (参考情報) Remote-Containersのインストール • Remote-Conatinesrは、下記いずれかの方法でインストールできる 1. Remote-Containersそのものをインストールする • この場合、Remote-Containersだけが単体でインストールされる 2. 「Remote Development」拡張機能パッケージをインストールする • この場合、下記3つの拡張機能が同時にインストールされる • Remote-Containers • Remote-SSH(リモートマシンのフォルダをSSH経由で扱う拡張機能) • Remote-WSL(WSLでフォルダを扱うための拡張機能)
- 18. VS Code Meetup #19 以上です ご清聴ありがとうございました