[Django] Use VS Code + Remote Containers to quickly build a Django container (Docker) development environment.

Introduction

RemoteContainers are very convenient, aren't they? Thanks to that, PyCharm seems to be cheating on VS Code. I didn't have an article about Django + Remote Containers, so I'll post the steps to build a Django development environment with minimal configuration.

What is Remote Containers?

This is a VS Code extension that allows you to create and connect containers very easily. You can finish the environment construction without touching any Docker command. There is no problem with that level of understanding for reading this article.

Advance preparation

1. 1. Prepare a Dockerfile

If you use the image of python: 3.8, there are no special packages required to start Django, If you have any required packages, feel free to install them.

FROM python:3.8

#Install if you have the required packages
# RUN apt install ~~~

2. Prepare docker-compose.yml

docker-compose.yml


version: '3'
services:
  app:
    build: .
    ports:
      - "8000:8000"
    volumes:
      - './:/app/sampleApp'
    working_dir: '/app/sampleApp'
    container_name: sampleApp
    privileged: true
    tty: true

Directory structure up to this point

Django-docker-sample #This workspace folder
        ├─ docker-compose.yml
        └─ Dockerfile

3. 3. Add extensions with VS Code

Open the workspace folder with VS Code and add the extension "Remote --Containers". If you search for "remote containers", it will probably appear at the top. image.png

Now you are ready!

Now container connection!

When you add Remote Containers, an icon will be displayed at the bottom left of the VS Code screen, so click it. image.png

Select Remote-Containers: Reopen in Container from the pull-down menu. image.png

Select From'docker-compose.yml' from the pull-down. image.png

(At the first startup, the container build will run, so wait for a while ...: cat2 :) It's OK if the container connection information is displayed at the bottom left of the VS Code screen! image.png

You are now connected to VS Code running inside the container from your local machine. This means that subsequent commands executed in the terminal will be executed in the container instead of the host machine.

Run Django

Execute the following command from the terminal.

/workspace# pip install django
/workspace# django-admin startproject sampleApp
/workspace# cd sampleApp
/workspace/sampleApp# python manage.py migrate
/workspace/sampleApp# python manage.py runserver

Open the URL displayed in the terminal with [Ctrl + left click], and when the Django sample screen is displayed, it's OK! image.png image.png

Additional extensions

In actual development, I would like to use breakpoints and watch formulas, but these can be done by following the steps below.

1.Python It won't start without this. image.png

2.Django image.png

Practice!

You will be able to put breakpoints in your code, so try putting them somewhere. image.png

Create a launch.json for Django debugging. image.png

You will be asked for the path of manage.py, so change it to "$ {workspaceFolder} /sampleApp/manage.py". image.png

Debug execution! It should stop at the breakpoint. image.png

Extension management

I think there is an unfamiliar folder called ".devcontainer" in the workspace folder and json and yml files in it. This is a file created by Remote Containers. By describing the extension ID in list format in "extensions" of ".devcontainer/devcontainer.json", it will be installed without permission when the container is created. Convenient!

This eliminates the need to manually re-install the extension even if the container is recreated. Let's add your favorite extension.

that's all. Thank you for your hard work: cat2:

Recommended Posts

[Django] Use VS Code + Remote Containers to quickly build a Django container (Docker) development environment.
[Django] Build a Django container (Docker) development environment quickly with PyCharm
Build a Go development environment with VS Code's Remote Containers
[Python] Build a Django development environment with Docker
Use Docker development container conveniently with VS Code
How to build a Django (python) environment on docker
Build a development environment with Poetry Django Docker Pycharm
How to run a Django application on a Docker container (development and production environment)
Build a Django development environment with Docker! (Docker-compose / Django / postgreSQL / nginx)
[Memo] Build a development environment for Django + Nuxt.js with Docker
Create a VS Code + Docker development environment on a Linux VM
[No venv required] The strongest Python development environment created with Remote Containers [VS Code / Docker]
Create a simple Python development environment with VS Code and Docker
Learn how to use Docker through building a Django + MySQL environment
[DynamoDB] [Docker] Build a development environment for DynamoDB and Django with docker-compose
Build a C language development environment with a container
Build Django + NGINX + PostgreSQL development environment with Docker
Build a Django development environment with Doker Toolbox
Quickly build a Python Django environment with IntelliJ
Build a python execution environment with VS Code
How to debug a Python program by remotely connecting to a Docker container in WSL2 environment with VS Code
Build a development environment using Jupyter and Flask with Python in Docker (supports both VS Code / code-server)
Python local development environment construction template [Flask / Django / Jupyter with Docker + VS Code]
Introduce VS Code and Remote Development to an offline environment to make linux development comfortable
Build a Django development environment using pyenv-virtualenv on Mac
I want to easily build a model-based development environment
[Go + Gin] I tried to build a Docker environment
How to build a development environment for TensorFlow (1.0.0) (Mac)
Remote debug Django environment created with docker-compose with VS Code
Build a lightweight Fast API development environment using Docker
I tried to build an environment with WSL + Ubuntu + VS Code in a Windows environment
How to use Docker to containerize your application and how to use Docker Compose to run your application in a development environment
Build a Docker environment that can use PyTorch and JupyterLab
How to use VS Code in venv environment on windows
Build a comfortable development environment with VSCode x Remote Development x Pipenv
How to build a python2.7 series development environment with Vagrant
Create a Todo app with Django ① Build an environment with Docker
Build a Flask development environment at low cost using Docker
UpNext2 Development Record # 1 Build Python CI environment in VS Code
Build a Python environment with WSL + Pyenv + Jupyter + VS Code
I tried to build an environment where work in the Docker container on the remote server can be done directly from the local VS Code with SSH connection
Learning history to participate in team application development with Python ~ Build Docker / Django / Nginx / MariaDB environment ~
How to develop containers on remote servers with VS Code Remote-Containers
How to delete a Docker container
I made a development environment for Django 3.0 with Docker, Docker-compose, Poetry
How to build Python and Jupyter execution environment with VS Code
I made a Docker container to use JUMAN ++, KNP, python (for pyKNP).
After buying a new Mac, use pyenv + poetry to build a Python environment.
I was addicted to creating a Python venv environment with VS Code
Create a Python development environment on Windows (Visual Studio Code remote WSL).
Steps to create a Python virtual environment with VS Code on Windows
Start multiple containers in VS Code's Remote Container to switch between tasks
I tried to build a Mac Python development environment with pythonz + direnv
Steps to build a Django environment with Win10 WSL Ubuntu18.04 + Anaconda + Apache2
Easily build a development environment with Laragon
How to build a sphinx translation environment
I want to build a Python environment
How to use tensorflow under docker environment
Use WebDAV in a Portable Docker environment
[Linux] Build a Docker environment with Amazon Linux 2
Build a local development environment with WSL + Docker Desktop for Windows + docker-lambda + Python