初めに

自分の作ったアプリとコードを見せたら、Dockerもかけないの？
そんなんじゃやっていけないよ見たいなことを言われたので

最近作っていたアプリの開発環境を整えるために勉強を始めた

Docker

Dockerfile

FROM node:lts-alpine
RUN npm install -g "@vue/cli"
WORKDIR /app
COPY .  .
RUN yarn install 
EXPOSE 8080
CMD ["yarn","serve"]

Vue.jsで作ったアプリの開発環境を整えるついでにDockerfileの理解をまとめてみる
FROM　ベースの言語とか環境を引っ張ってくるらしい(phpとかpythonとか)
RUN　コマンドを実行する。今回はvue-cliを使うのでnpm install を書く
WORKDIR　コンテナ上のディレクトリを示す
COPY ローカルパス コンテナ上のパス　cpコマンドみたいなもんローカルのファイルをコンテナに移動する感じ
EXPOSE　portの解放をする。vueはlocalhost:8080のため8080を書く
CMD　起動時に実行するコマンドを書く。yarn serveで起動するため、["yarn","serve"]とかく。シェルとかも書けるらしい

コンテナを立ち上げするのにはこんな感じでコマンドを打つらしい

docker run -it -p 8080:8080 --rm --name コンテナ名　イメージ名

さっき書いたコンテナをビルドした後はこんな感じでつらつらコマンドを書く。
オプションが多くて意味が分からなかったが、
p はポートで、rmはコンテナを停止すると削除、nameはコンテナ名を指すみたい

ただこんなにコマンドを毎回書くのは面倒だし、覚えるのが大変と思っていた。

そこで役に立つのが

Docker-Compose

上のコマンドを打つ手間を省略する
=>複数のコンテナをまとめて起動することができる

こうっぽいね
いまいちdockerとcomposeやymlがよくわからんかったが、

ようやく理解できてきた。

docker-compose.yml
version: "3"
services:
 web:
   container_name: population-of-prefecture-app
   build:
     context: .
     dockerfile: Dockerfile
   ports:
     - 8080:8080
   volumes:
     - .:/app/
     - /app/node_modules

version　コンテナのバージョン
services　ここにさっき書いたdockerのコマンドを必要な数だけまとめる
container_name　docker runのコンテナ名を意味する。これを書くと--nameを打つ必要がなくなる
build　自分で書いたdockerfileを読み込みたいときに書く。これを書くとimage名を書かずに済む
context　Dockerfileが置いてあるディレクトリを示す。
dockerfile　Dockerfileのファイル名を記述する
ports 　-p オプションを書かずに済む。ローカル：コンテナのポートを記載する？
volumes　ローカルのファイルを反映したとき、コンテナにも反映させたい場合書く。例えば、コンテナを起動してアクセスできるようにしつつ、開発して、確認したいときに使えるっぽい

これらを書くと

docker run -it -p 8080:8080 --rm --name コンテナ名　イメージ名

が

docker-compose up -d 

こうなる。(-d はデーモンで起動させる)

まとめ

開発環境を整えていくことで、Dockerfileやymlの書き方をなんとなく理解し始めることができた。
とりあえずdotenv使ってるアプリの開発環境をこれで整えてみようかしら