[DOCKER] I tried Flask with Remote-Containers of VS Code

Overview

This is a memo because you can create a Python environment in a Docker container with an extension called Remote-Containers of VS Code.

Purpose of using Docker container

There are two purposes.

The first is that the local environment is clean. There are things such as pyenv and anaconda that switch the environment, but in the end it becomes locally dependent. Even if I make requirements, what is the Python version? I don't know if it's a command, I can't enter it for some reason, I can't mix pip and conda, and sometimes I don't know what it is, but I feel like I want to graduate.

The second is easy to deploy. These days, I sometimes calculate and provide services on the cloud instead of on my local PC, so I'd like to do that with a few Dockerfiles.

That's why you won't get these right away, but in this article I'll record up to Flask in Remote-Container.

First result

I put the final file on github. yo16 / simple_flask

Final file structure.

/simple_flask
    /.devcontainer
        Dockerfile
        devcontainer.json
    /simple_app
        /templates
            default.html
        app.py
    requirements.txt

But in this article, I don't want to tell you the result or contents of the creation, it's a procedure in VS Code, so it doesn't really matter. If you are tired of making a simple source of Flask, please download and use it.

Step 0: Prepare the folder

Create a folder to create this environment. This time "simple_flask".

File structure up to this point.

/simple_app

Step 1: Prepare Flask

Anything is fine, so I will make a simple one.

File structure up to this point.

/simple_flask
    /simple_app
        /templates
            default.html
        app.py

I won't explain the contents of Flask, but app.py has ʻapp.run ()or@ app.route ('/'). Doing this python app.py` will launch the Flask site.

Step 2: Open with VS Code and prepare Docker-Containers

1. Open the top / simple_flask folder with VS Code
2. Search for "remote-containers" in the extension on the left toolbar.
3. Installation

Step 3: Create a Docker environment

1. Click on the green area like> <at the bottom left of VS Code

2. Select "Remote-Containers: Open Folder in Container ..." from the ones that appear on the screen.

3. Select the "simple_flask" folder and open it

4. Select "Python 3" as it will appear above again

5. It will come out again, so select the appropriate Python version

6. It will come out again, so it's OK (this is the last) By the way, if you check off here and even if 0 is selected, something will be installed, so check it in the later procedure.

7. If you can do so far, the screen below will be displayed. The point is a linux-like screen at the lower right terminal. (It really is) This is already in the Docker container and bash is running.

So when I try ls there, it looks like this, and "simple_app" is also firmly placed.

root@c249cd5c6b06:/workspaces/simple_flask# ls -la
total 4
drwxrwxrwx 1 root root 4096 Sep 26 14:49 .
drwxr-xr-x 3 root root 4096 Sep 26 13:54 ..
drwxrwxrwx 1 root root 4096 Sep 26 14:49 .devcontainer
drwxrwxrwx 1 root root 4096 Sep 26 14:08 simple_app

Python is also included.

root@c249cd5c6b06:/workspaces/simple_flask# python -V
Python 3.8.5

Step 4: Install Flask

Since the Docker image of python was selected in step 3-4, Python is included, but since it is in its original state, there is no Flask. So I will put it in. First, put this on the console.

root@c249cd5c6b06:/workspaces/simple_flask# pip install flask
Requirement already satisfied: flask in /usr/local/lib/python3.8/site-packages (1.1.2)
Requirement already satisfied: Werkzeug>=0.15 in /usr/local/lib/python3.8/site-packages (from flask) (1.0.1)
Requirement already satisfied: click>=5.1 in /usr/local/lib/python3.8/site-packages (from flask) (7.1.2)
Requirement already satisfied: itsdangerous>=0.24 in /usr/local/lib/python3.8/site-packages (from flask) (1.1.0)
Requirement already satisfied: Jinja2>=2.10.1 in /usr/local/lib/python3.8/site-packages (from flask) (2.11.2)
Requirement already satisfied: MarkupSafe>=0.23 in /usr/local/lib/python3.8/site-packages (from Jinja2>=2.10.1->flask) (1.1.1)

That's in ... (sweat Well, I think that I may want to put other things in, so in that case I will proceed with this procedure, so I will proceed with the tay that was not included.

Next, create requirements.txt so that the modules that are currently included will be installed automatically when the Docker container is created.

root@c249cd5c6b06:/workspaces/simple_flask# pip freeze > requirements.txt

If you do this, you can of course do it in the Docker container, but you can also do it in VS Code. You can open it normally with VS Code to check and edit it.

Use this in the next step.

Step 5: Check and modify the Dockerfile

The one that works when creating a container is ./dockercontainer/Dockerfile.

If you open this file with VS Code, you'll see a lot of things that work when you open a Docker container. (I'm using the image of microsoft.)

Here, as explained in step 2-6, Node.js is to be installed with or without installation, so comment out that area and use nodejs. I will try not to. You don't need the simple Flask in this article, but if you need it, use it.

On the contrary, the requirements.txt created in step 4 is not used, so uncomment it. Copy it to / tmp / pip-tmp /, pip install, and delete it when you're done.

The modified Dockerfile is below.

# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.140.1/containers/python-3/.devcontainer/base.Dockerfile

# [Choice] Python version: 3, 3.8, 3.7, 3.6
ARG VARIANT="3"
FROM mcr.microsoft.com/vscode/devcontainers/python:0-${VARIANT}

# [Option] Install Node.js
#### comment out
# ARG INSTALL_NODE="true"
# ARG NODE_VERSION="lts/*"
# RUN if [ "${INSTALL_NODE}" = "true" ]; then su vscode -c "source /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi

# [Optional] If your pip requirements rarely change, uncomment this section to add them to the image.
#### removed "#"
COPY requirements.txt /tmp/pip-tmp/
RUN pip3 --disable-pip-version-check --no-cache-dir install -r /tmp/pip-tmp/requirements.txt \
   && rm -rf /tmp/pip-tmp

# [Optional] Uncomment this section to install additional OS packages.
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
#     && apt-get -y install --no-install-recommends <your-package-list-here>

# [Optional] Uncomment this line to install global node packages.
# RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1

Step 6: Start the Docker container again

Recreate the container again using the modified Dockerfile.

1. Click on the green area at the bottom left

2. Select "Remote-Containers: Rebuild Container" from the pull-down above

That's all! Thank you for your hard work.

Operation check

If you start app.py with python from the lower right terminal, the usual Flask server will start up.

root@acebfd6333f5:/workspaces/simple_flask# python ./simple_app/app.py
 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

That's it!