Vue開発環境を作った時の備忘録

はじめに

Vueの開発環境を作った。この手の記事はいくらでもある。ただその過程で、.envファイルにのみ変数を閉じ込めたものは自分は見つけられなかった。その際に詰まった過程を残しておく。

成果物

gitへのリンク：https://github.com/yCroma/VueEnv.git

.
├── .env
├── Dockerfile
├── Makefile
├── README.md
├── commands
│   ├── copyenv.sh
│   └── create.sh
├── docker-compose.yml
└── spa

spaフォルダ下にマウントされるようになっている。ちなみにアプリ名を変更すると、そのアプリ名に変わる。

使い方

$ git clone https://github.com/yCroma/VueEnv.git
$ cd VueEnv
$ make vue-create

http://localhost:8080にWelcomeページが表示される。

詰まったもの

• Makefileで.envを利用したい
• bashで.envを読み込む方法
• Makefile内でのdocker-compose run exec の違い

Makefileで.envを利用したい

結論から言うと、適していないらしい。代わりにbashを書いて、Makefileで動かすのが筋だそうだ。

bashで.envを読み込む方法

.
├── .env
└── commands
    ├── copyenv.sh
    └── create.sh

今回のようなツリー構造の場合、commands下にあるbashでは以下のようにして読み込んだ。

.env

APP_NAME=spa

test.sh

# !/bin/bash
. ../.env
echo ${APP_NAME}

結果

spa

参考は以下のとおり

・Bashで=で区切られたファイルを変数の設定ファイルとして読み込む
・シェルスクリプトで外部ファイルに記述された変数を利用する方法

Makefile内でのdocker-compose run exec の違い

これは、runにするだけで別のコンテナが立つというものだ。指定したコンテナに対して動かしているようで、できていないということが起こる。これにはまった。

おわりに

以前からずっとやりたかった、環境変数を.envのみで完了させるということができたことは嬉しかった。ただ、メンテナンスや可読性は良いとは言えない代物なので今後も勉強していこうと思う。

おまけ

docker run / exec や docker-compose の command / entrypoint で複数コマンドを連続して実行するには？ #docker