Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

74th(Atsushi Morimoto)

April 11, 2022
Tweet

More Decks by 74th(Atsushi Morimoto)

Other Decks in Programming

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