Django＋Vue.js の開発環境を docker-compose で構築する（１）

# これまでの経緯

1. [ローカルに Ubuntu Server を用意した](https://qiita.com/hajime-f/items/5d3373e98985776b4240)
2. [そこに Docker Compose をインストールした](https://qiita.com/hajime-f/items/2bd1cad93d3ae4a62be8)
3. [Django＋MySQL＋nginx の開発環境を Docker Compose で構築した](https://qiita.com/hajime-f/items/c40571647135df327aa7)
4. [Django を AWS Fargate で動作させようとした → 失敗した](https://qiita.com/hajime-f/items/4511f2aa036380249a3f)
5. [AbstractBaseUser を継承したカスタムユーザーで E-mail ログインができるようにした](https://qiita.com/hajime-f/items/c2f02306556c1ea16e5c)
6. [Git で晒すとヤバい変数を django-environ と環境変数の設定で隠蔽した](https://qiita.com/hajime-f/items/734991651d84be0c9c81)
7. [REST 化した Django の JWT 認証を dj_rest_auth に丸投げした](https://qiita.com/hajime-f/items/0b42fa3233e41a0f691d)

# 私にはフロントエンドがわからぬ
Microsoft が IE で Javascript をサポートし始めた時期は、20 年以上前です。そこから Web アプリ全盛の時代を迎えて、Javascript が世界で最もよく使われる言語として君臨することになろうとは、いったい誰が予想できたでしょうか。

モダンなフロントエンドなんて、私は全然わかりません。とはいえ、Web アプリを作ろうとすれば避けて通れないので、「学習コストが低い」と噂の Vue.js を使って個人開発を進めていきたいと思います。

# まずは Docker で環境構築する

とにかくまったく分からんのですが、触れる環境を持たないことには話が始まらないので、適当に環境を作っていきます。

## 全体のディレクトリ構造
```docker-compose.dev.yml``` のあるプロジェクト全体のディレクトリ構造は、次のとおりです。

```bash
.
├── docker-compose.dev.yml
├── Makefile
├── mysql
│   ├── Dockerfile
│   └── init.d
├── nginx
│   ├── conf
│   └── uwsgi_params
├── python
│   ├── Dockerfile
│   └── requirements.txt
├── src    ## Django のベースディレクトリ
├── static
│   ├── admin
│   ├── css
│   ├── img
│   ├── rest_framework
│   └── vendor
├── template
└── vue    ## ここを新しく作る
    └── Dockerfile
```

```src``` は、Django のベースディレクトリです。このディレクトリは、今のところこうなっています。

```bash
./src
├── frontend         ## Vue のベースディレクトリ
│   └──・・・　          ## ここに Vue 用のファイルを置きたい
├── Makefile
├── manage.py
├── octave           ## バックエンド（Django）の設定ファイルがあるディレクトリ
│   ├── asgi.py
│   ├── __init__.py
│   ├── __pycache__
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── users            ## カスタムユーザーを定義したアプリ
    ├── admin.py
    ├── apps.py
    ├── __init__.py
    ├── migrations
    ├── models.py
    ├── __pycache__
    ├── tests.py
    └── views.py
```

```frontend``` は、Vue のベースディレクトリです。docker-compose で ```vue create``` すると、ここに Vue のプロジェクトが展開されるようにしたい。

## Docker の設定

[以前に作った Django＋MySQL＋nginx の開発環境](https://qiita.com/hajime-f/items/c40571647135df327aa7)に Vue を加えます。

よく分からんまま ```docker-compose.dev.yml``` を雰囲気で書いたらこうなりました。合ってるかどうかはしらん（全文は[以前の記事](https://qiita.com/hajime-f/items/c40571647135df327aa7#docker-composeyml-%E3%81%AF%E6%9C%80%E7%B5%82%E7%9A%84%E3%81%AB%E3%81%93%E3%81%86%E3%81%AA%E3%81%A3%E3%81%9F)を見てください）

```yaml:docker-compose.dev.yml（抜粋）
vue:
  build:
    context: ./vue
    dockerfile: Dockerfile
  restart: unless-stopped
  container_name: Vue
  networks:
    - django_net
  volumes:
    - ./src/frontend:/code  ## これで frontend 以下にファイルが展開される
    - ./static:/static
    - ./template:/template
  expose:
    - "3000"
  depends_on:
    - python
```

で、Vue 用の ```Dockerfile``` は、こんな感じにしました。ごくシンプルです。

```:./vue/Dockerfile
FROM node:15.5
WORKDIR /code
RUN npm install -g @vue/cli
ADD . /code/
```

ここまで設定して、ビルドします。

```bash
$ docker-compose -f docker-compose.dev.yml build
```

Vue のビルドって結構時間かかるのね。。

# Vue のプロジェクト作成

次のコマンドで、```frontend``` 以下に Vue のプロジェクトが新しく立ち上がります。

```bash
$ docker-compose -f docker-compose.dev.yml run vue vue create .
```

ちなみに、このコマンドは「docker-compose 上の『vue』という名前のサービスに『vue create .』を実行させる」という意味なので、「vue vue」と重複しているのは誤記ではありません。

これを実行すると、Vue から**「で、今回のプロジェクト、お前はどうしたいの😒 」**という質問をいろいろと聞かれるのですが、よく分からんので**全部 Yes！Yes！**と答えておきます。

全部の質問に答えると、```frontend``` 以下に（私にとっては）謎のファイルがいろいろとできています。

# GitHub のレポジトリを分ける

さて、[前回の記事](https://qiita.com/hajime-f/items/0b42fa3233e41a0f691d)で Django を REST 化したので、フロントエンドとバックエンドが完全に切り離されました。なので、フロント・バックを１つのレポジトリで管理するより、分けて管理する方が後々見通しがいいはず。

また、Docker 関連ファイルはもともと独立していますし、当面いじらないはずなので、これも切り離したい。

というわけで、レポジトリを３つに分けました。

インフラ（Docker）：https://github.com/hajime-f/octave_docker
バックエンド（Django）：https://github.com/hajime-f/octave_backend
フロントエンド（Vue）：https://github.com/hajime-f/octave_frontend

作業しやすいように、インフラ→バックエンド→フロントエンドとシンボリックリンクを張っておきます。

```
.
├── octave_docker
│   └── src -> ../octave_backend
├── octave_backend
│   └── frontend -> ../octave_frontend
└── octave_frontend
```

# Makefile でレポジトリの更新を自動化する

レポジトリを分けるのはいいとして、絶対に commit & push を忘れます。Vue のソースコードをいじって、Django のソースコードをいじって、Django だけ push するとか。忘れないはずがない。

というわけで、いつものように Makefile で自動化しました。

```bash:./Makefile（抜粋）
commit:
	@echo "Running git on octave_docker"
	git add -A .
	git commit -m $(COMMENT)
	git push origin master
	cd "$(PWD)/src" && make commit $(COMMENT)
```

```bash:./src/Makefile
commit:
	@echo "Running git on octave_backend"
	git add -A
	git commit -m $(COMMENT)
	git push origin master
	cd "$(PWD)/frontend" && make commit $(COMMENT)
```

```bash:./src/frontend/Makefile
commit:
	@echo "Running git on octave_frontend"
	git add -A
	git commit -m $(COMMENT)
	git push origin master
```

要するに、```docker-compose.dev.yml``` のあるプロジェクトディレクトリで ```$ make commit COMMENT='**'``` と打てば、３つのレポジトリが同時に更新される仕組みです。

かなり雑な感じもしますが、、、まあ、とりあえずこれで運用してみよう。

続き：[Django＋Vue.js の開発環境を docker-compose で構築する（２）](https://qiita.com/hajime-f/items/1935068a0da802cddd10)