Dockerで環境構築してみるその１
今回の目標
DockerFileを作成し、Docker内でVueが動くようにする
次回 docker-compose を使い複数のコンテナを制御できるようにする為記事を分割
環境
Dockerやnode、vue-cliはインストール済みとするとりあえずバージョンだけ記載
Docker version 20.10.5, build 55c4c88
node:v10.24.0
@vue/cli 4.5.12
vueのプロジェクトを作成
適当な名前でプロジェクトを作成
vue create webserver
起動してローカルで動いているかどうか確認
$ cd webserver $ yarn serve
http://localhost:8080/ へアクセス
Dockerfile作成
基本的に「Vue.js アプリケーションを Docker 化する」
を参考にファイルを作成していく。
プロジェクト直下に DockerFile を作成し下記のように記載
イメージはこちらを参考に node:lts-slim を指定
#nodeイメージ取得 FROM node:lts-slim # カレントワーキングディレクトリとして 'app' フォルダを指定する WORKDIR /app # `package.json` と `yarn.lock` が（あれば）を両方コピーする # yarn を使っているので COPY package.json ./ COPY yarn.lock ./ # プロジェクトの依存ライブラリをインストールする RUN yarn install # カレントワーキングディレクトリ(つまり 'app' フォルダ)にプロジェクトのファイルやフォルダをコピー COPY . . #外部に公開するポートを指定 EXPOSE 8080 #起動 CMD [ "yarn", "serve" ]
イメージの作成
Dockerfileがある場所で下記コマンドを打ち込む
docker build -t webserver .
docker build -t <作成するイメージ名> .
ディレクトリ構成はこんな感じ
tree -L 1 -a . ├── .git ├── .gitignore ├── Dockerfile ├── README.md ├── babel.config.js ├── node_modules ├── package.json ├── public ├── src └── yarn.lock
コンテナ作成
次に下記コマンドでコンテナを作成し、起動する
docker run -p 8080:8080 --rm --name webserverContainer -it webserver
docker run -p <コンテナのポート>:<ホスト側にバインドしたいポート> --rm --name <コンテナ名> -it <イメージ名>
http://localhost:8080/ にアクセスし起動できていることを確認
補足
今回 --rm をしているので終了時自動的にコンテナがなくなるが、 --rm をしない場合は、
docker start webserverContainer で起動する。
また、すでに作られたイメージ名でビルドすると下記のように <none> が作られごみになるので削除する必要がある
(ちなみに先にコンテナを消さないと削除できない)
docker images REPOSITORY TAG IMAGE ID CREATED SIZE webserver latest 7f2fd0699e28 16 seconds ago 476MB <none> <none> 8d3a8fe2af01 55 minutes ago 476MB
削除するには下記コマンドで一括で削除できる
docker image prune
綺麗になったら再度 run コマンドを走らせると更新できる
コードを更新するたびにコンテナを作るとか流石にアホらしいので次回使う docker-compose の volumes
を使ってこの辺の更新は監視するけど今回はやりません
参考記事
docker hub:node
Vue.js アプリケーションを Docker 化する
Docker-docs-ja
Dockerfileを極めて、Dockerマスターになろう！
コマンド古いらしいわw（なお３年前）
docker container / image コマンド新旧比較
