Build a development environment using Jupyter and Flask with Python in Docker (supports both VS Code / code-server)

I thought I'd use Python a little, but I didn't want to install various things to build the environment. So I tried to build an environment using Docker.

We aim to create an environment where you can develop with VS Code (or code-server), using both an interactive environment and the Web. In particular, I was addicted to connecting VS Code's Python extension to Jupyter that runs on Python in Docker, so I will leave the environment construction procedure as a memo in this article.

Requirements

--Python program can be executed with CLI -Python can be executed interactively using Jupyter -Using Flask, you can output Python on the Web. -Code completion using Python runtime with Visual Studio Code or code \ -server Etc. can be done

Build a development environment that can do all of the above.

environment

Operation confirmed in the following environment

Windows 10 WSL 2 Ubuntu 16.04.5 + docker 18.09.6 + docker desktop 2.3.0.3
ChromeOS Crostini (Linux) Debian 9.11 + docker 19.03.4

Environment construction procedure

First, cut a suitable working directory.

$ mkdir python-dev && cd $_

Initialize Git if you like.

$ git init .
$ wget https://raw.githubusercontent.com/github/gitignore/master/Python.gitignore --output-document=.gitignore

Use Poetry for package management. Write Dockerfile and docker-compose.yml for building the environment with Poetry.

`Dockerfile`


FROM python:3.8.3-slim
WORKDIR /app

RUN pip install poetry

Specify the container image that contains the version of Python you want to use. In the future, I will use the slim image because I want to reduce the size of the image at first, while keeping in mind that I will want to install various dependent packages in the image.

`docker-compose.yml`


version: '3.4'
services:
  web:
    build: .
    volumes:
      - .:/app
    environment:
      - FLASK_APP=index.py
    ports:
      - 127.0.0.1:5000:5000
    command: "poetry run flask run --host=0.0.0.0"
  note:
    build: .
    volumes:
      - .:/app
    ports:
      - 127.0.0.1:8888:8888
    command: "poetry run jupyter notebook --no-browser --ip=0.0.0.0 --port=8888 --allow-root --NotebookApp.token='' --NotebookApp.password='' --NotebookApp.disable_check_xsrf=True"

This time, for the convenience of accessing Jupyter in the container from the host, some settings are included to disable the security function of Jupyter.

--NotebookApp.token=''
--NotebookApp.password=''
--NotebookApp.disable_check_xsrf=True

If you run it on a public server rather than on your computer's local environment, you should avoid this setting.

Once docker is ready, set up Poetry.

$ docker-compose run --rm web poetry init --no-interaction
$ docker-compose run --rm web poetry add jupyter notebook flask

Add a command to $ poetry install when building Docker.

`Dockerfile`


FROM python:3.8.3-slim
WORKDIR /app

RUN pip install poetry
COPY pyproject.toml ./
RUN poetry install

Place index.py to launch in Flask.

`index.py`


from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello, World!"

Build and you're done.

$ docker-compose build

How to Use

After $ docker-compose up

--Use with CLI - $ docker-compose run --rm web python --version --Use on the Web --Go to http://127.0.0.1:5000. --Use with Jupyter --Go to http://127.0.0.1:8888.

Use Python in Docker with VS Code

First, install the following in VS Code.

-Remote Development Extension (ms-vscode-remote.vscode-remote-extensionpack)

Docker Extensions (ms-azuretools.vscode-docker)

Select the target container with the Docker extension on VS Code and click "Attach Visual Studio Code".

For Windows, VS Code that remotely accesses WSL2 with Remote -WSL Extension will be in the container. I can't access it. Open a VS Code window (not using Remote) on Windows and do "Attach Visual Studio Code".

Open the VS Code window to access the container remotely and install Python Extension (ms-python.python) "Install on Container" Install with the button and reload VS Code.

Success if the Python displayed in VS Code > Python: Select Interpreter etc. is in Docker (Python 3.8.3 in / usr / local / bin / python in this example) is.

Use Jupyter on VS Code

In VS Code attached to the container as above, in > Python: Specify local or remote Jupyter server for connections, select ʻExisting and enter http: // localhost: 8888 / . Alternatively, create a file called .vscode/settings.json`.

`json:.vscode/settings.json`


{
  "python.dataScience.jupyterServerURI": "http://localhost:8888/"
}

You can use Jupyter on VSCode by reloading VSCode and doing > Python: Create New Blank Jupyter Notebook.

If you are asked for a password, just type Enter with the empty string.

Use Python in Docker with code-server

If you use code \ -server instead of VSCode, it will work in the browser, so especially in the case of Chromebook, it will work lightly on Chrome instead of Linux GUI environment. I will. Since extensions such as Python can be included in the container, there is also the advantage that it can be coded for each development environment.

The disadvantage is that the image capacity is large. (Requires an additional 1GB)

To use code-server, make sure to build the container with code-server and extensions.

`Dockerfile`


FROM python:3.8.3-slim AS python
WORKDIR /app

RUN pip install poetry
COPY pyproject.toml ./
RUN poetry install

FROM python AS code-server

RUN apt-get update && apt-get install -y curl
RUN curl -fsSL https://code-server.dev/install.sh | sh
RUN code-server \
  --install-extension ms-python.python \
  --install-extension ms-ceintl.vscode-language-pack-ja

Add a service that starts code-server to docker-compose as well.

`docker-compose.yml`


version: '3.4'
services:
  web:
    build:
      context: .
      target: python
    volumes:
      - .:/app
    environment:
      - FLASK_APP=index.py
    ports:
      - 127.0.0.1:5000:5000
    command: "poetry run flask run --host=0.0.0.0"
  note:
    build:
      context: .
      target: python
    volumes:
      - .:/app
    ports:
      - 127.0.0.1:8888:8888
    command: "poetry run jupyter notebook --no-browser --ip=0.0.0.0 --port=8888 --allow-root --NotebookApp.token='' --NotebookApp.password='' --NotebookApp.disable_check_xsrf=True"
  code:
    build:
      context: .
      target: code-server
    ports:
      - 127.0.0.1:8080:8080
    volumes:
      - ./:/app
    entrypoint: "code-server --auth none --bind-addr=0.0.0.0:8080 /app"

Now do $ docker-compose build and you're done. (It will take some time) You can use VS Code on your browser by visiting http://127.0.0.1:8080.

To use Jupyter with code-server, use > Python: Specify local or remote Jupyter server for connections to specify the container where jupyter is running, such ashttp: // note: 8888 /.

`json:.vscode/settings.json`


{
  "python.dataScience.jupyterServerURI": "http://note:8888/"
}

References

In addition, the full text of the code created in this article is in the following repository.

https://github.com/s2terminal/python-dev