实验介绍:
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