これまでの経緯
- ローカルに Ubuntu Server を用意した
- そこに Docker Compose をインストールした
- Django＋MySQL＋nginx の開発環境を Docker Compose で構築した
- Django を AWS Fargate で動作させようとした → 失敗した
- AbstractBaseUser を継承したカスタムユーザーで E-mail ログインができるようにした
- Git で晒すとヤバい変数を django-environ と環境変数の設定で隠蔽した
- REST 化した Django の JWT 認証を dj_rest_auth に丸投げした
私にはフロントエンドがわからぬ
Microsoft が IE で Javascript をサポートし始めた時期は、20 年以上前です。そこから Web アプリ全盛の時代を迎えて、Javascript が世界で最もよく使われる言語として君臨することになろうとは、いったい誰が予想できたでしょうか。
モダンなフロントエンドなんて、私は全然わかりません。とはいえ、Web アプリを作ろうとすれば避けて通れないので、「学習コストが低い」と噂の Vue.js を使って個人開発を進めていきたいと思います。
まずは Docker で環境構築する
とにかくまったく分からんのですが、触れる環境を持たないことには話が始まらないので、適当に環境を作っていきます。
全体のディレクトリ構造
docker-compose.dev.yml のあるプロジェクト全体のディレクトリ構造は、次のとおりです。
.
├── 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 のベースディレクトリです。このディレクトリは、今のところこうなっています。
./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 の開発環境に Vue を加えます。
よく分からんまま 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 は、こんな感じにしました。ごくシンプルです。
FROM node:15.5
WORKDIR /code
RUN npm install -g @vue/cli
ADD . /code/
ここまで設定して、ビルドします。
$ docker-compose -f docker-compose.dev.yml build
Vue のビルドって結構時間かかるのね。。
Vue のプロジェクト作成
次のコマンドで、frontend 以下に Vue のプロジェクトが新しく立ち上がります。
$ docker-compose -f docker-compose.dev.yml run vue vue create .
ちなみに、このコマンドは「docker-compose 上の『vue』という名前のサービスに『vue create .』を実行させる」という意味なので、「vue vue」と重複しているのは誤記ではありません。
これを実行すると、Vue から**「で、今回のプロジェクト、お前はどうしたいの😒 」という質問をいろいろと聞かれるのですが、よく分からんので全部 Yes！Yes！**と答えておきます。
全部の質問に答えると、frontend 以下に（私にとっては）謎のファイルがいろいろとできています。
GitHub のレポジトリを分ける
さて、前回の記事で 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 で自動化しました。
commit:
@echo "Running git on octave_docker"
git add -A .
git commit -m $(COMMENT)
git push origin master
cd "$(PWD)/src" && make commit $(COMMENT)
commit:
@echo "Running git on octave_backend"
git add -A
git commit -m $(COMMENT)
git push origin master
cd "$(PWD)/frontend" && make commit $(COMMENT)
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='**' と打てば、３つのレポジトリが同時に更新される仕組みです。
かなり雑な感じもしますが、、、まあ、とりあえずこれで運用してみよう。