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.

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.

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

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

(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!

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!

Additional extensions

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

Remote Containers uses VS Code running on the container locally, so basically you will have to re-add the necessary extensions. However, it is difficult to add it again every time a new container is updated, so we will explain the support functions that can be made easier later.

１．Python It won't start without this.

２．Django

Practice!

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

Create a launch.json for Django debugging.

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

Debug execution! It should stop at the breakpoint.

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!

The extension ID can be obtained by selecting [Right click] → [Copy extension ID] from the extension list. Write extensions for Python and Django.

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:

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