これまでの経緯

私にはフロントエンドがわからぬ

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 を雰囲気で書いたらこうなりました。合ってるかどうかはしらん（全文は以前の記事を見てください）

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/

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

$ 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 で自動化しました。

./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)

./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)

./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 で構築する（２）

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