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

技術書典3~12参加

紹介すること

• 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

}

}

​

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

},

// 略

};

14

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

frontend と backend の同時起動

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

}

]

}

16

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