Django+Next.jsアプリの VS Codeワークスペース設定作り込み Atsushi Morimoto @74th 1

Ajenda 1. 自己紹介 2. Django+Next.jsの構成 3. Debug設定 4. frontend 開発にリモートコンテナ機能は使えるか？ 2

Atsushi Morimoto @74th ● AIよりのフルスタックエンジニア ● VS Code Meetup オーガナイザ ● 自作キーボードに2年くらいはまっている ● 著書 技術書典3~12参加 3

紹介すること ● 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

Django REST framework+Next.js 　　 5

Django REST framework+Next.js（詳細） 6

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

Application Container（単一コンテナ） 8

ローカル開発環境 9 ※ Next.js の frontend の自動リロードはWebSocketのため Proxyできず動作しない

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プログラム実行の設定

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上のパス

Chromeが認識しているパスを確認する とりあえず、デバッグ起動させて Chrome Developer Tools →Sources タブ 12

TypeScriptの設定 Next.js の dev server を使う場合、 Next.js の プロジェクト生成ツール(create-next-app)の 出力のままでOK。 13

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"], }, // 略 };

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": ["/**"] } } 15

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"] } ] }

Dev Container & Github Codespaces ● VS Code リモートコンテナ機能 VS Code Server をDockerコンテナ内で起動して VS Code の UI から接続して使う ● Dev Container リモートコンテナ機能で使う開発ツールを全部収めた Dockerコンテナのこと ● Github Codespaces VS Code リモートコンテナ機能のSaaSサービス 17

リモートコンテナ機能の詳しくは… ● 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

frontend 開発にリモートコンテナ機能は使える？ ● リモートコンテナ機能　→ 使える Chromeは VS Code UI 上で起動してくれる。 ローカルからの通信を、コンテナ内に転送する ポート転送機能を使う。 19

frontend 開発に Codespaces は使える？ ● Github Codespaces　→ 使える 接続先がクラウドなだけでリモートコンテナ機能と同じ。 ● ブラウザ版 VS Code はデバッグ不可→ローカルから繋ぐ 20

まとめ ● ブラウザFrontend + backend API の構成例 ● Frontend + backend のデバッグ実行設定 launch.json ● リモートコンテナ（Github Codespaces）設定 ぜひ、Frontend開発も、VS Codeでデバッグ実行しよう！ 21