### 使用 Docker 搭建全栈项目的教程 #### 1. 后端 Flask 和 MySQL 的配置 为了实现后端服务，可以利用 `docker-compose` 来管理多个容器之间的依赖关系。以下是具体的步骤： 创建一个名为 `docker-compose.yml` 的文件来定义两个服务：一个是用于存储数据的 MySQL 容器，另一个是运行 Flask 应用程序的服务。 ```yaml version: '3' services: db: image: mysql:5.7 restart: always environment: MYSQL_ROOT_PASSWORD: examplepassword MYSQL_DATABASE: flaskdb ports: - "3306:3306" volumes: - ./data:/var/lib/mysql backend: build: ./flask-app restart: always ports: - "5000:5000" depends_on: - db environment: FLASK_APP: app.py FLASK_ENV: development DB_HOST: db DB_USER: root DB_PASS: examplepassword DB_NAME: flaskdb ``` 在此配置中，MySQL 数据库被映射到主机上的 `3306` 端口[^2]，而 Flask 应用则监听 `5000` 端口并连接到数据库实例[^1]。 #### 2. 前端 Vue3 的设置 对于前端部分，建议单独维护一个 Nginx 容器作为静态资源服务器，并通过反向代理将请求转发给后端 API 接口。 首先，在项目根目录下新建子文件夹命名为 `frontend` 并初始化 Vue CLI 脚手架工程： ```bash npm install -g @vue/cli vue create frontend/vue-app --default cd frontend/vue-app && npm run serve & ``` 接着修改默认图标样式以便于自定义展示效果[^4]: ```html <template> <div id="app"> <!-- 添加 SVG 图标 --> <svg class="icon" aria-hidden="true" style="padding: 20px 50px;"> <use xlink:href="#icon-github"></use> </svg> </div> </template> <style scoped> .icon { width: 5em; height: 5em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> ``` 最后更新 `docker-compose.yml` 文件加入新的 Web 层描述如下所示: ```yaml web: image: nginx:alpine restart: always ports: - "80:80" working_dir: /usr/share/nginx/html volumes: - ./frontend/dist:/usr/share/nginx/html command: ["nginx", "-g", "daemon off;"] ``` 这样就完成了整个系统的架构设计——即由三个主要组件构成的整体解决方案：数据库层 (MySQL),业务逻辑处理单元(Flask)，以及用户界面呈现区(Vue+Nginx)[^3]. #### 总结 综上所述,借助Docker工具链能够快速便捷地部署基于Python语言编写的RESTful风格API接口服务连同其配套使用的图形化操作面板环境. ---