OpenBMC笔记4：在镜像中添加Web界面

1. 背景

在上一篇《OpenBMC笔记3：内核的PHY芯片适配》文章中，我们的机器刷入OpenBMC后，已经可以获取到IP地址了，但是当我们在浏览器里面输入IP地址，尝试打开OpenBMC的Web界面时，发现是空的，只提示了：Unauthorized，如下图所示。所以，本文目的是添加OpenBMC的Web界面。

2. 功能配置

前期，我们的代码是基于meta-evb/meta-evb-aspeed/meta-evb-ast2600做的开发，按理说，我们应该参考OpenBMC其他博文里面介绍的，创建我们机器的layer。但是，考虑到本人还是OpenBMC的初学者，我们先继续使用meta-evb-ast2600做后续开发。等时机成熟了，我们再创建自己的layer。

这样的话，我们来看一下meta-evb-ast2600项目当前的目录结构，如下图所示。

我们可以看到，meta-evb-ast2600是一个最简单的layer，只有一个conf目录和README.md文件。

(1) 参考其他layer配置

我们通过grep命令，来看一下哪些layer里面增加了webui-vue，具体命令如下，检索结果如下图所示。

grep -nri "webui-vue" --exclude-dir=build

通过上图的结果，我们发现大部分项目是在自己的layer/recipes-phosphor/packagegroups目录下，通过packagegroup-obmc-apps.bbappend配置文件增加webui-vue。

我们以meta-qualcomm/recipes-phosphor/packagegroups/packagegroup-obmc-apps.bbappend为例，看一下里面的配置，如下图所示。

(2) 增加我们的配置

我们参考上图，在meta-evb/meta-evb-aspeed/meta-evb-ast2600目录下创建recipes-phosphor/packagegroups目录，如下所示

mkdir -p recipes-phosphor/packagegroups

我们将meta-qualcomm/recipes-phosphor/packagegroups/packagegroup-obmc-apps.bbappend拷贝到meta-evb/meta-evb-aspeed/meta-evb-ast2600/recipes-phosphor/packagegroups目录下，并且只保留webui-vue，如下所示

RDEPENDS:${PN}-extras:append =" \
    webui-vue \
    "

到此，我们就完成了webui-vue的配置，是不是感觉挺简单的。这样在完成编译后， 镜像中就会包含OpenBMC的Web界面了。

(3) 编译镜像

bitbake obmc-phosphor-image

通过上述命令进行OpenBMC的镜像编译，这个过程中会下载webui-vue及相关软件的代码，编译过程中可能会报错，主要是下载失败导致，可以反复执行bitbake obmc-phosphor-image命令，进行下载编译，最终会编译成功。这个过程主要与网络环境相关，可以切换多种网络尝试。

3. 功能验证

编译完成后，我们通过u-boot使用tftp的方式，将OpenBMC镜像刷到flash中，然后执行reset命令。等BMC重启完成后，我们在浏览器里面输入BMC的IP地址，就可以看到OpenBMC的登录界面了，如下图所示。

然后，我们输入用户名：root，密码：0penBmc。注意：密码第一个字符是数字0。登录成功后，会显示OpenBMC的主界面，如下图所示。