The Things Network LoRaWAN Stack V3 学习笔记 2.7 编译运行 Web 前端

前言

此前一直使用命令行来测试，最近 Stack 终于逐步上线了前端功能，来做个研究。

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

1 Stack 前端简介

Stack 包含了两个前端应用： Console 和 OAuth Provider。

Both applications use React as frontend framework. The console and oauth packages of the backend expose their respective web servers and handle all logic that cannot be done in the browser. Otherwise both applications are single page applications (SPA) that run entirely in the browser.

Console

The Console is the official management application of the stack. It can be used to register applications, end devices or gateways, monitor network traffic, or configure network related options, among other things. The console uses an OAuth access token to communicate with the stack.

OAuth

The OAuth app provides the necessary frontend for the OAuth provider of the stack. It is used e.g. to display the authorization screen that users get prompted with when they want to authorize a third-party app to access the stack.

2 编译 Stack 前端

Stack提供了 production 和 development 这两种模式的前端，可以通过环境变量 $NODE_ENV 来控制。编译命令为：

mage js:build

默认情况下，该 $NODE_ENV 为 production。本节笔记先按照 production 走，下一篇笔记再记录 development 的实践。

3 总体操作流程

这里有个需要额外关注的，就是命令操作的步骤不能乱。基本上是 build frontend -> build stack -> stack start all -> browser。具体参考步骤如下：

1. ./mage init
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-oauth-client --id console --name "Console" --owner admin --secret console --redirect-uri 'https://localhost:8885/console/oauth/callback' --redirect-uri 'http://localhost:1885/console/oauth/callback' --redirect-uri '/console/oauth/callback'

5. ./cmd/ttn-lw-stack start all
6. 如果是在本地上跑的话，那么直接浏览器访问 http://localhost:1885/console

4 部署在CVM上的操作

i. 访问 console

我是部署在腾讯云服务器上，所以浏览器访问URL要调整下IP。http://yourip:1885/console

ii. OAuth 认证

点击登录之后，会提示先认证，由于此前配置的 redirect-uri 是 localhost，因此需要手动调整下这个URL，将 localhost 替换为我们的 CVM IP。

http://localhost:1885/oauth/authorize?client_id=console&redirect_uri=http%3A%2F%2Flocalhost%3A1885%2Fconsole%2Foauth%2Fcallback&response_type=code&state=7xPGxvC05y3zbfYv

先替换第一个localhost，之后填入用户名和密码。

iii. 登录 console

在重定向的第二次URL上将 localhost 调整为 CVM IP。

END

---