在Docker中使用Flask + Nginx + MySQL + phpMyAdmin进行环境设置

1 年 ago
科, 雅
3 minutes

这篇文章的目的是什么？

我之前发布了一个标题为「Docker：用Laravel9 + Nginx + MySQL + phpMyAdmin构建环境」的文章，介绍了如何使用Docker构建Laravel的开发环境。自那以后，我开始对用Docker构建各种语言的环境产生了兴趣。

· 之前的文章

 

我最近开始学习Python的框架Flask。虽然有通过创建虚拟环境来安装Flask的方法，但我想尝试用Docker来构建学习环境，并将其作为备忘录记录下来。因为我是第一次使用Flask，所以构建的Flask Docker环境可能存在一些问题。我会不断学习并更新这篇文章。

创建容器

    • Nginx

 

    • Flask

 

    • MySQL

 

    phpMyAdmin

形成

以下是目录和文件的配置：
在docker目录下创建nginx和Python的Dockerfile文件。
使用Python版本3.10.0。

从docker Hub下载MySQL和phpMyAdmin的镜像。
容器执行的定义写在docker-compose.yml中。

docker-flask
├── docker
│   ├── nginx
│   │   ├── Dockerfile
│   │   └── nginx.conf
│   └── php
│       ├── Dockerfile
│       └── requirements.txt
├── templates
│   └── index.html
├── static
│   ├── images
│   │   └── book.jpg <=これは好きな画像でOKです
│   └── css
│       └── style.css
├── app.py
└── docker-compose.yml

创建与Nginx相关的文件

首先，创建Nginx的Dockerfile。

# コンテナベースとしてnginxを指定
FROM nginx:latest

# 次で作成するnginx.confファイルをDockerイメージにコピー
COPY nginx.conf /etc/nginx/conf.d/default.conf

# nginxをフォアグラウンドで動かすためデーモンをoff
CMD ["/usr/sbin/nginx", "-g", "daemon off;"]

创建nginx.conf文件

server {
    listen 80;
    server_name localhost;

    location / {
        proxy_pass http://localhost:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

创建与Flask（Python）相关的文件

我将创建一个Dockertfile。

FROM python:3.10.0

# 作業ディレクトリをtestに設定
WORKDIR /test

# 次で作成するrequirements.txtをDockerイメージにコピー
COPY requirements.txt .

# requirements.txt内に記載したライブラリ群をインストール
RUN pip install -r requirements.txt

CMD ["gunicorn", "-b", ":5000", "app:app"]

创建requirements.txt文件

Flask==2.3.2
gunicorn==20.0.4
sqlalchemy==2.0.15

我在requirements.txt文件中记录了要安装的库。我想考虑一下在我平常使用的Laravel中是否也可以使用。

根据一些文章的参考，人们安装了”gunicorn（独角兽）”。经过查询，它可以简单地理解为Nginx和Flask之间的桥梁角色。

创建 docker-compose.yml 文件。

version: '3.8'
services:
  nginx:
    build: ./docker/nginx/
    container_name: flask_nginx
    ports:
      - "80:80"
    depends_on:
      - python

  python:
    build: ./docker/python/
    container_name: flask_python
    volumes:
      - .:/code
    ports:
      - "5000:5000"
    depends_on:
      - db
  db:
    image: mysql:8.0
    container_name: flask_db
    hostname: mysql
    expose:
      - 3306
    ports:
      - 3306:3306
    command:
      - --sql-mode=NO_ENGINE_SUBSTITUTION
    environment:
      - MYSQL_ROOT_PASSWORD=flaskpass
      - MYSQL_DATABASE=flasktest
      - MYSQL_USER=flaskuser
      - MYSQL_PASSWORD=flaskpass

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: flask_pma
    hostname: phpmyadmin
    depends_on:
      - db
    ports:
      - "9090:80"

启动容器

我会创建一个用于启动的app.py文件。

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
@app.route("/index")
def index():
    return render_template("index.html")

if __name__ == "__main__":
    app.run(debug=True)

通过Web应用程序服务器gunicorn启动app.py，如果没有它会报错。
请随意准备templates/index.html。

请前往docker-compose.yml所在的目录，并执行以下命令来创建docker镜像并启动容器。
这一刻总是让人期待，看一次能否成功。（虽然通常都会出错……）

$ docker-compose up -d

当达到以下状态时，每个容器正在运行。

Creating flask_db  ... done                               
Creating flask_pma  ... done                                    
Creating flask_python  ... done                                   
Creating flask_nginx  ... done

整理页面

现在容器已经启动了，我们来看一下屏幕吧… 但在那之前，既然有机会，让我们把屏幕整理一下吧。

请将templates/index.html的内容修改如下。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/static/css/style.css">
        <title>Flask学習テスト</title>
    </head>
    <body>
        <header>
            <h1>Flask学習テスト</h1>
        </header>
    
        <nav>
            <ul>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">MAIN</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>
    
        <main>
            <h2>メインコンテンツ</h2>
            <img src="/static/images/book.jpg" alt="">
        </main>
    
        <footer>
            <p>© 2023 Flask TEST</p>
        </footer>
    </body>
</html>

・静态/css/风格.css

body {
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

header, nav, main, footer {
    margin: 0;
    padding: 20px;
    color: white;
}

header {
    background-color: #ADD8E6;
}

nav {
    text-align: right;
    background-color: #4169e1;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    background-color: #ADD8E6;
}

img {
    width: 65%;
    height: 65%;
}

footer {
    text-align: center;
    background-color: #4169e1;
}

请将您喜欢的图片放入 static/images/ 文件夹中。

启动Flask。

现在，我们来尝试连接到 http://localhost:5000。
如果出现以下类似的界面，那么Docker环境设置完成。

还有，请尝试连接到http://localhost:9090。
如果打开了phpMyAdmin界面，并成功输入了设置的用户名和密码进行登录，那就代表成功了。

www.jpg

关于将来

这次为了学习Flask，我们介绍了使用Docker来构建环境的例子。现在已经确认可以显示页面了，所以接下来我想尝试与MySQL进行协作。

✖
广告
将在 10 秒后关闭
bannerAds