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
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

5. Django REST framework+Next.js
   　　
   5
   

   View Slide

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

   View Slide

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
   

   View Slide

8. Application Container（単一コンテナ）
   8
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide