来源：转载自https://mp.weixin.qq.com/s/UtPAYQ1frLEb4ceG739cdQ，原作者 RVBoards
实验介绍：
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上。
参考资料：Docker