見出し画像

Dockerfile入門する

Dockerfileを理解するために、わたしが一番使い慣れているNuxt.jsを使って勉強していきます🙌

dockerのキャッシュを理解してビルドの最適化ができたらと思います。

最終的にやりたいこと

・Docker Hubに作成したimageをpush

ちなみにフロントエンド の開発環境にDocker不要なのでは?論がありますが、今回は勉強のためやっていきたいと思います。

イメージ図

NuxtがうごくDockerコンテナを作るには、既存のnodeイメージを使ってDockerfileに自分の設定を追加します。

そのDockerfileを元にdocker buildすることでイメージ(コンテナの元)が出来上がります!

作成したimageを元にdocker runすることでコンテナを起動することができます🌟

JPEGイメージ-ADEEEF073AC2-1

こんなかんじです。(ああ・・字が汚い・・)

Nuxtのプロジェクトを用意

すでにあるNuxtのプロジェクトにどうやってDocker環境を作っていくか?を考えるためにcreate-nuxt-appします。

$ create-nuxt-app docker-sample
$ cd docker-sample
$ yarn build
$ yarn start

ここからDockerを導入していきます。

.dockerignoreの作成

Dockerfileを作成する前に、dockerignoreを作成します。

dockerignoreは、gitignoreと一緒でdockerビルドするときに無視されるファイルを指定します。

.git
node_modules
.nuxt

たとえば、node_modulesはpackage.jsonを元にyarn installすることでコンテナ内に生成されるので、わざわざコンテナにコピーしなくてもよいファイルだと分かります。

.gitファイルと.nuxtファイルも一緒でコンテナ内には不要なファイルなのでignoreに指定します!

Dockerfileの作成

では、NuxtでHello Worldするのに必要な設定を追加しただけのDockerfileを作成していきます!(各行詳細はコメントアウトの文をみてください)

# nodeのイメージを元にoptionを追加していく
FROM node:12.4

# コンテナに全ファイルを転送
COPY . .

# RUNはdocker buildしたときに実行される
RUN yarn
RUN yarn build

# 環境変数を指定
ENV NUXT_PORT=3333
ENV NUXT_HOST=0.0.0.0

# コマンド(CMD)はdocker runの時に実行される
CMD ["yarn", "start"]

これでビルドを実行します!

$ docker build . -t kawa1228/docker-sample

-t でタグを作成しています。kawa1228にあたる部分にはDockerアカウントidを指定してください。

ではではdockerコンテナを起動してみたいと思います😊

$ docker run --rm -it -p 3333:3333 kawa1228/docker-sample

いけた🎉

スクリーンショット 2020-01-12 23.41.45

キャッシュを効かせてdocker buildを早くしてみる

先ほど作成したDockerfileではCOPY .  .することで全ファイルをコンテナにまるっとコピーしました。

これではdocker buildする度にpackage.jsonを元にyarn installしてnode_moduleを作成するのでとても重くなってしまいます・・💦

そこでDockerfileを下記のように編集します。

# nodeのイメージを元にoptionを追加していく
FROM node

# キャッシュを効かせるために先にコピー
COPY package.json yarn.lock ./

RUN yarn

# コンテナに全ファイルを転送
COPY . .

RUN yarn build

# コマンドはdocker runの時に実行
CMD ["yarn", "start"]

Dockerfileは上から下へ順番に処理されていきます。

上記の順番で指定した場合、package.jsonとyarn.lockが、コンテナ内の両ファイルと変更がない場合「RUN yarn」の処理は変更がないのでキャッシュが利くようになります。

逆に、今までのように全体をCOPYしたあとにyarn installするとpackage.jsonに変更がなかったとしても毎回yarn installが実行されることになります。

COPY . .
RUN yarn install

これでdockerビルドが少し早くなりました😊

スクリーンショット 2020-01-13 0.56.28

(Using cacheと書いてあるところはキャッシュで処理されています)

Docker Hubにpush

では今作成したイメージをdocker hubにpushしてイメージを共有してみます。

$ docker push kawa1228/docker-nuxt

githubと連携することができるので、修正後に毎回docker pushする必要なく、git pushするだけで自動的に変更がdocker hubに反映されます👀

スクリーンショット 2020-01-13 1.00.37

さいごに

なんとなく分かっていたようで分かっていなかったDockerfileでした。

さいごに書いたキャッシュの内容など知らなかったのでとても勉強になりましたっ🥰

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

息抜きのコーヒー代にさせて頂きます!!♡

わ〜〜い!
4
フロントエンドエンジニアです。 日々勉強しながらがんばってます₍ ᐢ. ̫ .ᐢ ₎
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。