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

Fc815be82d09a2e922d4000b65b9f83b?s=128

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

  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