RISC-V公测平台发布 · 在SG2042上玩转docker

实验介绍：

Docker 是一个开源的应用容器引擎，基于Go语言并遵从Apache2.0协议开源。可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。容器完全使用沙箱机制，相互之间不会有任何接口（类似iPhone的app）,更重要的是容器性能开销极低。Docker 从 17.03 版本之后分为 CE（Community Edition: 社区版）和 EE（Enterprise Edition: 企业版）。在此次教程中，我们只要使用社区版即可。

实验材料：

HS-2服务器一台

服务器配置：

CPU：SG2042

内存：128GB

操作系统：Ubuntu 22.10 (GNU/Linux 6.1.31 riscv64)

实验步骤：

安装docker： sudo apt install docker.io 接下来拉取一个Ubuntu镜像（我这里使用的是22.04的镜像）： sudo docker pull riscv64/ubuntu:22.04 新建一个测试用的容器并启动： sudo docker run --name ubuntu -itd riscv64/ubuntu:22.04 sudo docker start ubuntu 查看容器状态： sudo docker ps

访问该容器中的shell： sudo docker exec -it ubuntu /bin/bash

由于目前docker绝大多数的包都只支持x86和ARM架构，而支持RISC-V的容器非常少，要了解所有支持riscv64的容器，可以参考Docker Hub上的riscvV64专区，在这篇文章中我们就直接新建一个Ubuntu 20.04镜像来运行两个服务：Flask和Nginx。

新建一个名叫ubuntu-web的容器，但是开放并转发两个端口（5000转5050，80转8008），并创建共享文件夹（便于将静态网站传入容器内）： sudo docker run -p 5050:5000 -p 8008:80 -v /home/sputnik/ubuntu_web_share:/root --name ubuntu-web -itd riscv64/ubuntu:22.04

启动容器： sudo docker start ubuntu-web

进入容器： sudo docker exec -it ubuntu-web /bin/bash

进入容器中的home目录然后更新库： 先将系统升级到完整版（如果嫌官方Ubuntu Ports镜像下载速度慢的话可以参考清华大学Tuna镜像站上的教程，但是需要先要更新apt缓存才能安装vim和ca-certificates，然后才能按照镜像站上的教程操作，当然其他国内镜像站也行，只要有Ubuntu Ports镜像就行） unminimize

安装所需的软件包（如果之前没有安装vim，需要在后面加上vim）： apt install python3 python3-pip libpython3-dev libffi-dev unzip

使用Tuna PyPi源： pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple

安装Flask及其他必备组件： pip install flask gevent flask-cors

新建一个app.py文件,编写以下代码： from flask import Flask import platform app = Flask(name) @app.route('/') def hello_world(): return "Greeting from a container({} {} {})!".format(platform.uname()[0],platform.uname()[2],platform.uname()[-1]) if name == 'main': app.run(host="0.0.0.0", port=5000)

保存并运行： python3 app.py

访问[你的ip地址]:[你的flask端口号]即可看到以下内容：

接下来我们来搭建一个简易网站，该网站采用Vue.js+Nginx+Flask组合。 首先我们安装Nginx： apt install nginx

启动Nginx服务： service nginx start

访问[服务器地址]:[你的Nginx端口号]：

接下来咱们就写一个简单的网站，这次我们使用Vite来构建（使用cnpm会更快）： cnpm create vite@latest cd riscv-site cnpm install

测试一下： cnpm run dev

接下来就是参考Vite或Vue文档来编写前端内容（内容自定，也可以直接修改Vite官方例子）如果直接使用Axios发起请求，这时就会提示因CORS限制拒绝访问。 先引入flask_cors中的CORS： from flask_cors import CORS

然后在app.py中的“app = Flask(name)”下添加下列两行代码： CORS(app, resources={"/": {"origins": "http://"}}) CORS(app, resources={"/": {"origins": "https://"}})

剩下的可根据需要自行修改，也可以参考下面的代码。 最终代码如下（Flask）： from flask import Flask from flask_cors import CORS import platform from gevent import pywsgi app = Flask(name) CORS(app, resources={"/": {"origins": "http://"}}) CORS(app, resources={"/": {"origins": "https://"}}) @app.route('/') def hello_world(): return "Greeting from {} ({} {})!".format(platform.uname()[0],platform.uname()[2],platform.uname()[-1]) if name == 'main': server = pywsgi.WSGIServer(('0.0.0.0',5000), app) server.serve_forever() # app.run()

注意：可以搭配pywsgi使用以用于生产环境。 前端部分（Vue.js）代码如下：

App.vue：
<script setup>
import axios from 'axios'
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue'
let text = ref("")
const show_text = async () => {
try {
const response = await axios.get("[你的Flask服务器地址]");
console.log(response.data)
text.value = response.data
} catch (error) {
console.error(error);
}
}
show_text()
</script>
<template>
<div>
<a href="https://riscv.org" target="_blank">
<img src="./assets/RISC-V_Stacked_Color.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld :msg="text" />
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #003262);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
HelloWorld.vue：
<script setup>
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<p>
Check out
<a href="http://blog.rvv.top:8002/"
>RISC-V Growth Diary</a
> for further information
</p>
<p class="read-the-docs">Click on the RISC-V and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>

注意：在Vite项目中，可以根据自身需求安装其他npm包（如Echarts，Element+等） 接下来就是将网站部署到Web容器中。 首先，我们将Vite项目打包成静态文件：

cnpm run build

打包成功后会出现以下内容：

会出现一个dist文件夹。 打包dist文件夹并上传到服务器，然后将dist.zip传进服务器上的共享文件夹内： sudo cp dist.zip ./ubuntu_web_share/ 清空/var/www/html/下的内容： rm -rf /var/www/html/ 将dist文件夹下的内容全部复制到/var/www/html/下： cp -R ./ /var/www/html/ 浏览器访问[服务器地址]:[NGINX服务器端口]：

实验总结： 通过此次试验，我们快速上手了Docker，得益于Docker的沙箱机制，我们可以在不影响宿主机的环境下配置独立的开发环境，然后打包成镜像以便部署到生产环境中。 同时，使用Vite，可以更方便地调试Vue.js网站，并且还支持打包生成静态文件以便部署到Nginx服务器或Github Pages上。 参考资料： https://hub.docker.com/u/riscv64/ https://mirror.tuna.tsinghua.edu.cn/help/ubuntu-ports/ https://juejin.cn/post/7220696133730811960 https://blog.csdn.net/dreamerrrrrr/article/details/107030289