Dockerで作ったDjangoプロジェクトをVS Codeで開く

## 転載元
当記事は以下ブログからの転載です。
[TECH BACK](https://techback.info/docker-djiango-vscode-degug/)

## はじめに
今まで、Visual Studio2019でDjango開発してましたが、VS CodeだとDocker対応してるみたいなんで、やってみました。 こういったのは、多分すぐ忘れるので残しとかないとね。

## VS Codeのインストールから

サイトに行って、ダウンロードしてきましょ。 
[https://azure.microsoft.com/ja-jp/products/visual-studio-code/](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)
今回は、WindowsのUser Installer版をダウンロード 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecbaa97a0d0e.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecbaa97a0d0e.png)

インストーラ実行 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecbdc2a83895.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecbdc2a83895.png)

そのまま、次へ次へ。。。無事インストール完了。 
## Extention周りをインストールします。

VS Codeは、Extentionいっぱいあって、楽しいかも！ ここで紹介した以外にも、色々あるので、当分楽しめそうね～😁 
### Remote -WSL (結局、使わなかった)

で、起動したら、下記メッセージ そう言えば、Dockerインストールする時に、WSL2を入れてました。 便利そうなので、Installボタンクリック。 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecbe0282bc76.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecbe0282bc76.png)

### Docker

検索して、Dockerもインストールしておきましょう。 アイコンすぐ右の**Install**ボタンをクリック(緑のやつね) 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecbe8d441d7b.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecbe8d441d7b.png)

左のアイコン並んでる所に、くじら出てきましたね～

クリックしたら、CONTAINERSの所に用意したコンテナいますね。 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecbe94d00dc6.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecbe94d00dc6.png)

コンテナ上で右クリックすると、、、 ここで、コンテナの操作できるんですね。便利じゃないか！ 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecbe9aab6bb8.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecbe9aab6bb8.png)

### Remote - Containers

Dockerのコンテナに、接続するやつ！ いつもどおり、インストールして～ 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf6f39c4395.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf6f39c4395.png)

## Docker Containerに接続！

VS Codeの左下の、><をクリックすると、、、、 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf6fc152dd6.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf6fc152dd6.png)

どこに接続しますの？？と、

で、**Remote-Containers: Attach to Running Container...** をクリック 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf73857e1b7.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf73857e1b7.png)

Djangoが入ってる方(上)を選択、 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf739f96ea9.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf739f96ea9.png)

別Windowが開いて、左下の方にメッセージが。多分うまく行ってるのかな？？ 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf77409a22e.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf77409a22e.png)

### こっちはこっちで、Extention入れないとダメなのね

こっちの環境の方にも、Python Extention入れておきましょうか！ Install in Container ＊＊＊の所をクリックして、インストール 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf7e73ba5a7.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf7e73ba5a7.png)

ちょっとしたら、Install in Container ***のところが、Reload Requiredに変わったので、クリック。 再度読み直ししたとおもったら、下のメッセージ。 PythonのVersion指定しろと？？ 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf7edaa56cc.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf7edaa56cc.png)

最新の、3.8で行きます 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf7f1ec270b.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf7f1ec270b.png)

コチラも、Installします。 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf7f3200940.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf7f3200940.png)

## デバッグしてみますかね～

### Djangoプロジェクトのパス指定

ターミナルを立ち上げて、 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf7780455d3.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf7780455d3.png)

フォルダを検索してみたら、どうも /codeって所に、Djangoのフィアル郡があるもよう。 デバッグの画面に遷移して、open a folderをクリックすると、 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf742d051ea.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf742d051ea.png)

Djangoプロジェクトの設置パスを指定しろと。manage.pyがあるフォルダ。 指定して、OK 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf78dad9e85.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf78dad9e85.png)

### デバッグ用のJsonファイル作成

今度は、create a launch.json file.をクリック 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf7a209c42a.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf7a209c42a.png)

Djangoをクリック 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf7f72d7b1e.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf7f72d7b1e.png)

できた～ 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf7f88920ea.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf7f88920ea.png)

よし！早速適当な所に、ブレークポイント貼って、 Run and Debug 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf7fbf00de1.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf7fbf00de1.png)

ま、そっか～。コンテナ起動の時に、Django立ち上がってますよね～。 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecf80981f4e4.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecf80981f4e4.png)

launch.jsonに、赤字の1行追加しました。

デバッグの時は、PORTを違うので動かします。 

```
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
version: 0.2.0,
configurations: [
{
name: Python: Django,
type: python,
request: launch,
program: ${workspaceFolder}/manage.py,
args: [
runserver,
<span style="color:">0.0.0.0:8001,</span>
--noreload
],
django: true
}
]
}
```

そして、再度デバッグ実行！ 来た～～ 
[![](http://techback.info/wp-content/uploads/2020/05/img_5ecfe4de419a6.png)](http://techback.info/wp-content/uploads/2020/05/img_5ecfe4de419a6.png)

今回はここまで。 次は、AWSにDocker Container乗っけて見ますかね。