【BMC】OpenBMC开发基础4：Web开发基础

逃离我推掉我的手 2023-10-14 22:16 14阅读 0赞

## 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全称**N**ode **P**ackage **M**anager，它是一个包管理工具，在构建Vue版本Web中，它的作用包括：

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

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

安装Node.js

执行npm install安装依赖包

执行npm build构建Web程序

安装Web程序到OpenBMC系统

1.  下载依赖包的代码：

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

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