Django+Next.jsアプリの VS Codeワークスペース設定作り込み

VS Code Meetup #19

スライド中紹介リンク
・WSL2、Visual Studio Code、DockerでグッとよくなるWindows開発環境 〜 その4：Visual Studio Code、Dockerで改善！！ 〜 SIOS TECH.LAB https://tech-lab.sios.jp/archives/21675
・Dev Container Guidebook （拙著同人誌・技術書典9) https://booth.pm/ja/items/2425642

Google Slide
https://docs.google.com/presentation/d/1tSWVNSLxeCCxFWebHAGGcSTBOf5OM6gBwwzsX2HDFvI/edit

Transcript

1. Django+Next.jsアプリの VS Codeワークスペース設定作り込み Atsushi Morimoto @74th 1
2. Ajenda 1. 自己紹介 2. Django+Next.jsの構成 3. Debug設定 4. frontend 開発にリモートコンテナ機能は使えるか？ 2
3. Atsushi Morimoto @74th • AIよりのフルスタックエンジニア • VS Code Meetup オーガナイザ • 自作キーボードに2年くらいはまっている • 著書 技術書典3~12参加 3
4. 紹介すること • Django REST Framework + Next.js アプリの ◦ x Django REST Framework の使い方 ◦ x Next.jsアプリの作り方 ◦ o ブラウザFrontend + backend API の構成例 ◦ o Frontend + backend のデバッグ実行設定 launch.json ◦ o リモートコンテナ（Github Codespaces）は 　　frontend開発で使えるのか？ 4
5. Django REST framework+Next.js 　　 5
6. Django REST framework+Next.js（詳細） 6
7. frontendとbackend apiは同一リポジトリで管理 • front/ …TypeScriptの世界 ◦ api/ … OpenAPI Generator で出力した API Client ◦ pages/ … Next.jsのReactコンテンツ ▪ {some}/{page}.tsx ◦ package.json • api/ …Pythonの世界 ◦ {some}/ … 各ドメインコンポーネント ▪ models.py ▪ views.py ◦ urls.py • pyproject.toml 7
8. Application Container（単一コンテナ） 8
9. ローカル開発環境 9 ※ Next.js の frontend の自動リロードはWebSocketのため Proxyできず動作しない
10. backend APIのデバッグ実行 // .vscode/launch.json { "version": "0.2.0", "configurations": [ { "name": "django server", "type": "python", "request": "launch", "program": "${workspaceFolder}/manage.py", "args": ["runserver", "8080"], "env": { "USING_NEXT_DEV": "true" } } } 10 Pythonプログラム実行の設定
11. frontend(browser)のデバッグ実行 // launch.json { "configurations": [{ "name": "front", "type": "chrome", "request": "launch", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/", "sourceMapPathOverrides": { "webpack://_N_E/./*": "${workspaceFolder}/front/*" } }] } 11 Chromeが認識しているパス VS Code上のパス
12. Chromeが認識しているパスを確認する とりあえず、デバッグ起動させて Chrome Developer Tools →Sources タブ 12
13. TypeScriptの設定 Next.js の dev server を使う場合、 Next.js の プロジェクト生成ツール(create-next-app)の 出力のままでOK。 13
14. TypeScriptの設定（Next.js以外の場合） // tsconfig.json { "compilerOptions": { "target": "ES2018", "module": "commonjs", "jsx": "react", "inlineSourceMap": true, "strict": true, "moduleResolution": "node", "esModuleInterop": true } } 14 // webpack.config.js module.exports = { mode: "development", entry: "./src/ts/index_ts.tsx", devtool: "inline-source-map", module: { rules: [ { test: /\.tsx?$/, use: "ts-loader", exclude: /node_modules/, }, ], }, resolve: { extensions: [".tsx", ".ts", ".js"], }, // 略 };
15. frontend(Server Side Render)のデバッグ実行 普通のnodejsプログラムの実行 // launch.json { { "name": "next dev", "type": "node", "program": "${workspaceFolder}/front/node_modules/.bin/next", "cwd": "${workspaceFolder}/front", "args": ["dev", "-p", "8081"], "request": "launch", "skipFiles": ["<node_internals>/**"] } } 15
16. frontend と backend の同時起動 16 compounds を使う // .vscode/launch.json { "configurations": [ {"name": "django server", "type": "python", ...}, {"name": "next dev", "type": "node", ...}, {"name": "django server", "type": "chrome", ...}, ], "compounds": [ { "name": "debug all", "configurations": ["django server", "front", "next dev"] } ] }
17. Dev Container & Github Codespaces • VS Code リモートコンテナ機能 VS Code Server をDockerコンテナ内で起動して VS Code の UI から接続して使う • Dev Container リモートコンテナ機能で使う開発ツールを全部収めた Dockerコンテナのこと • Github Codespaces VS Code リモートコンテナ機能のSaaSサービス 17
18. リモートコンテナ機能の詳しくは… • WSL2、Visual Studio Code、DockerでグッとよくなるWindows 開発環境 〜 その4：Visual Studio Code、Dockerで改善！！ 〜 SIOS TECH.LAB https://tech-lab.sios.jp/archives/21675 • Dev Container Guidebook （拙著同人誌・技術書典9） https://booth.pm/ja/items/2425642 18
19. frontend 開発にリモートコンテナ機能は使える？ • リモートコンテナ機能　→ 使える Chromeは VS Code UI 上で起動してくれる。 ローカルからの通信を、コンテナ内に転送する ポート転送機能を使う。 19
20. frontend 開発に Codespaces は使える？ • Github Codespaces　→ 使える 接続先がクラウドなだけでリモートコンテナ機能と同じ。 • ブラウザ版 VS Code はデバッグ不可→ローカルから繋ぐ 20
21. まとめ • ブラウザFrontend + backend API の構成例 • Frontend + backend のデバッグ実行設定 launch.json • リモートコンテナ（Github Codespaces）設定 ぜひ、Frontend開発も、VS Codeでデバッグ実行しよう！ 21