The Things Network LoRaWAN Stack V3 学习笔记 2.7.1 Web 前端开发调试

前言

上一篇研究了如果编译运行 Web 前端，这一篇研究如何在开发模式下调试 Web 前端。

小能手这段时间在学习 The Things Network LoRaWAN Stack V3，从使用和代码等角度对该 Stack 进行了分析，详细可点此查看。

1 官方介绍

For development purposes, the frontend can be run using webpack-dev-server. After following the Getting Started section to initialize the stack and doing an initial build of the frontend via mage js:build, it can be served using:

export NODE_ENV=development
mage js:serve

The development server runs on http://localhost:8080 and will proxy all api calls to port 1885. The serve command watches any changes inside pkg/webui and refreshes automatically.
In order to set up the stack to support running the frontend via webpack-dev-server, the following environment setup is needed:

NODE_ENV=development
TTN_LW_LOG_LEVEL=debug
TTN_LW_IS_OAUTH_UI_JS_FILE=libs.bundle.js,oauth.js
TTN_LW_CONSOLE_UI_JS_FILE=libs.bundle.js,console.js
TTN_LW_CONSOLE_UI_CANONICAL_URL=http://localhost:8080/console
TTN_LW_CONSOLE_OAUTH_AUTHORIZE_URL=http://localhost:8080/oauth/authorize
TTN_LW_CONSOLE_OAUTH_TOKEN_URL=http://localhost:8080/oauth/token
TTN_LW_IS_OAUTH_UI_CANONICAL_URL=http://localhost:8080/oauth
TTN_LW_IS_EMAIL_NETWORK_IDENTITY_SERVER_URL=http://localhost:8080/oauth.js
TTN_LW_CONSOLE_UI_ASSETS_BASE_URL=http://localhost:8080/assets

Note: We recommend using an environment switcher like direnv to help you setting up environments for different tasks easily.
All of the configuration options above can also be set using configuration files or runtime flags. For more info in this regard, see this guide.

2 本地实践

2.1 脚本准备

我是将这么多环境变量整合到一个脚本 frontend_dev.sh 里。

export NODE_ENV=development
export TTN_LW_LOG_LEVEL=debug
export TTN_LW_IS_OAUTH_UI_JS_FILE=libs.bundle.js,oauth.js
export TTN_LW_CONSOLE_UI_JS_FILE=libs.bundle.js,console.js
export TTN_LW_CONSOLE_UI_CANONICAL_URL=http://localhost:8080/console
export TTN_LW_CONSOLE_OAUTH_AUTHORIZE_URL=http://localhost:8080/oauth/authorize
export TTN_LW_CONSOLE_OAUTH_TOKEN_URL=http://localhost:8080/oauth/token
export TTN_LW_IS_OAUTH_UI_CANONICAL_URL=http://localhost:8080/oauth
export TTN_LW_IS_EMAIL_NETWORK_IDENTITY_SERVER_URL=http://localhost:8080/oauth.js
export TTN_LW_CONSOLE_UI_ASSETS_BASE_URL=http://localhost:8080/assets

2.2 操作步骤

此前官方介绍的操作步骤有一定的误导作用，环境变量设置之后必须重新编译前端和stack才行，具体见我提的 issue。

1. source ./frontend_dev.sh
2. ./mage js:build
3. go build ./cmd/ttn-lw-stack
4. Identity Server 配置

$ ./ttn-lw-stack is-db init
$ ./ttn-lw-stack is-db create-admin-user --id admin --email admin@localhost
$ ./ttn-lw-stack is-db create-admin-user --id admin --email admin@localhost --password admin
# ./ttn-lw-stack is-db create-oauth-client --id console --name "Console" --owner admin --secret console --redirect-uri 'https://localhost:8080/console/oauth/callback' --redirect-uri 'http://localhost:8080/console/oauth/callback' --redirect-uri '/console/oauth/callback'

5. ./cmd/ttn-lw-stack start all
6. 直接浏览器访问 http://localhost:8080/console

END

---