Web开发基础

前面已经介绍了如何增加自定义的程序以及给开源的Web代码打补丁，但是如果后续为了进行自定义的Web开发，最好的办法还是直接将代码放到我们自己的项目中，本文首先完成这一步骤，然后简单介绍Web开发的基础。

Web代码移植

开源OpenBMC使用的Web对应的配方是meta-phosphor/recipes-phosphor/webui/webui-vue_git.bb，对应的源代码可以在git://github.com/openbmc/webui-vue.git下载到，由于之前已经正常使用过webui，所以代码可以直接在build/downloads中找到，我们将这里的源码放到自己的项目中。当然这样还不能直接使用，还需要修改对应的bb文件，这里将它重新命名为vueui.bb。最终的目录如下：

jw@HOME:~/openbmc$ tree meta-beni/ -L 3
meta-beni/
├── COPYING.MIT
├── README
├── conf
│   ├── 略
├── recipes-example
│   ├── 略
│   └── vueui
│       ├── vueui
│       └── vueui.bb
└── recipes-phosphor
    ├── 略

16 directories, 11 files

vueui目录里面存放的是webui的源码，而vueui.bb是webui-vue_git.bb的修改版，其内容如下（具体的修改点已经注明）：

LICENSE = "MIT"
LIC_FILES_CHKSUM = "file://${COREBASE}/meta/COPYING.MIT;md5=3da9cfbcb788c80a0384361b4de20420"
DEPENDS:prepend = "nodejs-native "
PV = "1.0.0"
# This recipe requires online access to build, as it uses NPM for dependency
# management and resolution.
PR = "r1"

# 使用本地的代码，位于vueui目录下
# SRC_URI = "git://github.com/openbmc/webui-vue.git;branch=master;protocol=https"
SRC_URI = "file://public/ \
           file://src/ \
           file://.eslintrc.js \
           file://babel.config.js \
           file://jest.config.js \
           file://package-lock.json \
           file://package.json \
           file://postcss.config.js \
           file://vue.config.js \
"

S = "${WORKDIR}"

inherit allarch

EXTRA_OENPM ?= ""

export CXX = "${BUILD_CXX}"
export CC = "${BUILD_CC}"
export CFLAGS = "${BUILD_CFLAGS}"
export CPPFLAGS = "${BUILD_CPPFLAGS}"
export CXXFLAGS = "${BUILD_CXXFLAGS}"

# Workaround
# Network access from task are disabled by default on Yocto 3.5
# https://git.yoctoproject.org/poky/tree/documentation/migration-guides/migration-3.5.rst#n25
do_compile[network] = "1"
do_compile () {
    cd ${S}
    # node_modules存放的是Web开发使用到的依赖库，不用每次都删除再重新下载
    # rm -rf node_modules
    # 需要加上--legacy-peer-deps，否则会报错
    # 实际上并不需要每次都install，只需要install一次就可以了，但是关系不大
    # npm --loglevel info --proxy=${http_proxy} --https-proxy=${https_proxy} install
    npm --loglevel info --proxy=${http_proxy} --https-proxy=${https_proxy} install --legacy-peer-deps
    npm run build ${EXTRA_OENPM}
}
do_install () {
   # create directory structure
   install -d ${D}${datadir}/www
   cp -r ${S}/dist/** ${D}${datadir}/www
   find ${D}${datadir}/www -type f -exec chmod a=r,u+w '{}' +
   find ${D}${datadir}/www -type d -exec chmod a=rx,u+w '{}' +
}

FILES:${PN} += "${datadir}/www/*"

此时通过bitbake可以看到新增的vueui：

jw@HOME:~/openbmc/build$ bitbake -s | grep vueui
vueui                                               :1.0.0-r1

然后通过bitbake编译该模块：

jw@HOME:~/openbmc/build$ bitbake vueui
Loading cache: 100% |###############################################################################################################| Time: 0:00:00
Loaded 4387 entries from dependency cache.
Parsing recipes: 100% |###############################################################################################################| Time: 0:00:00
Parsing of 2711 .bb files complete (2710 cached, 1 parsed). 4386 targets, 566 skipped, 0 masked, 0 errors.
NOTE: Resolving any missing task queue dependencies

Build Configuration:
BB_VERSION           = "2.4.0"
BUILD_SYS            = "x86_64-linux"
NATIVELSBSTRING      = "ubuntu-20.04"
TARGET_SYS           = "arm-openbmc-linux-gnueabi"
MACHINE              = "beni-ast2500"
DISTRO               = "openbmc-phosphor"
DISTRO_VERSION       = "nodistro.0"
TUNE_FEATURES        = "arm thumb arm1176jzs"
TARGET_FPU           = "soft"
meta
meta-poky
meta-oe
meta-networking
meta-python
meta-phosphor
meta-aspeed          = "HEAD:67c9d4e715c705cd05fd04f7c8cd4fad300a4666"
meta-beni            = "master:ce757c7232d1ffcf0d74155bc283aba0591325ce"
workspace            = "HEAD:67c9d4e715c705cd05fd04f7c8cd4fad300a4666"

Initialising tasks: 100% |###############################################################################################################| Time: 0:00:00
Sstate summary: Wanted 1 Local 0 Mirrors 0 Missed 1 Current 104 (0% match, 99% complete)
Removing 1 stale sstate objects for arch allarch: 100% |###############################################################################################################| Time: 0:00:00
NOTE: Executing Tasks
NOTE: Tasks Summary: Attempted 460 tasks of which 458 didn't need to be rerun and all succeeded.

到这里说明本地代码版本的Web已经可以使用了，后续就可以构建BMC二进制并调试其中的Web，不过再次之前还需要替换meta-beni/recipes-phosphor/packagegroups/packagegroup-obmc-apps.bbappend中的Web内容：

RDEPENDS:${PN}-extras:append = "helloworld memtester vueui" # webui-vue改成vueui

Vue版本Web开发基础

下面介绍Vue版本Web的开发基础。

OpenBMC最初使用的是基于AngularJS框架的Web（当下的版本还能找到它的配方meta-phosphor/recipes-phosphor/webui/phosphor-webui_git.bb），不过由于该框架已经停止维护，所以OpenBMC才转到了Vue框架，且使用的是Vue2版本。

Vue版本Web的构建依赖于Node.js，所以在配方中有如下的代码：

DEPENDS:prepend = "nodejs-native "

Node.js是一个开源且跨平台的JavaScript运行时平台，它包含另外一个工具NPM。NPM全称Node Package Manager，它是一个包管理工具，在构建Vue版本Web中，它的作用包括：

• 下载当前Web的依赖包。
• 从Web源码构建最终的Web程序。

对应到配方中，流程大致如下：

1. 下载依赖包的代码：

npm --loglevel info --proxy=${http_proxy} --https-proxy=${https_proxy} install

执行该命令后会根据meta-beni/recipes-example/vueui/vueui/package.json的内容来进行下载。

这里需要说明，Web的开发依赖于很多现成的库，在开发过程中可以利用这些库简化开发，如果需要什么库，只要在package.json中指定库名称和版本信息即可。

2. 构建Web程序的代码：

npm run build ${EXTRA_OENPM}

该命令的来源也是package.json文件，最终依赖的是Vue脚手架来执行构建操作：

    "scripts": {
        "build": "check-node-version --package && vue-cli-service build",
        // 其它略
    },

生成的Web程序位于dist目录下，其入口是一个index.html文件。

3. 当生成程序之后就将它放到OpenBMC系统的固定位置：

   install -d ${D}${datadir}/www
   cp -r ${S}/dist/** ${D}${datadir}/www

这个位置实际上是Web服务器（OpenBMC中使用了bmcweb作为服务器端，对应配方meta-phosphor/recipes-phosphor/interfaces/bmcweb_git.bb）确定的，所以两者需要保持一致。

以上就是Web开发的简单流程，这里涉及到Node.js和npm的使用，Vue框架的基础，等等知识，需要了解这些内容才能进行后续的开发。