vagrant上にdockerコンテナを立ち上げる方法メモ（docker-compose利用）

はじめに

この後追加で勉強したので以下記事に整理し直しました。（2021/10/31追記）
tomiko0404.hatenablog.com

本記事の目的

Vagrant上にdockerコンテナを立ち上げる。

Node.jsのアプリを作りたいので、ベースはNode.jsとする。
また、docker-composeというツールも利用する。

はじめに
- 本記事の目的
vagrantを立ち上げる
dockerイメージの作成・dockerコンテナの起動
【補足】今回のフォルダ構成とソースコードの場所について
おわりに
関連記事
- この後やったこと
dockerのコマンド参考サイト

vagrantを立ち上げる

vagrantの環境構築は既に実施したので、できている前提とする。
（別途、復習しながらメモする予定。。。）

Powershell（Window標準）を管理者権限で立ち上げる

Vagrantfileのあるフォルダに移動する

PS C:\WINDOWS\system32> cd C:\Users\User\vagrant\ubuntu64_18

vagrantの起動とssh接続

> vagrant up
> vagrant ssh

ちなみに、vagrantのシャットダウンは

> vagrant halt

（メモ） Vagrantfileの中身

Vagrant.configure("2") do |config|
  config.vm.box = "ubuntu/bionic64"
  config.vm.network "forwarded_port", guest: 8000, host: 8000
  config.vm.network "forwarded_port", guest: 3000, host: 3000
  config.vm.synced_folder "./workspace", "/home/vagrant/workspace"
  config.vm.provider :virtualbox do |vb|
    vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/home/vagrant/workspace","1"]
  end

  config.vm.provider "virtualbox" do |vb|
    vb.memory = "1024"
  end

end

workspaceフォルダに移動し、作りたいアプリのフォルダを作る

ローカルのworkspaceをvagrant上のworkspaceと共有する設定もできている前提。（別途、復習しながらメモする予定。。。）

$ cd workspace
$ mkdir /aws-amplify-app

dockerイメージの作成・dockerコンテナの起動

dockerをインストールする

以下サイトを参考に実施した。
Vagrantの上にDockerを載せて開発環境を作成する（おそらくこちらを見ながらやったはず）
Ubuntuにdockerをインストールする - Qiita

パラメータファイルの作成

docker-compose.yml とDockerfileを作成してaws-amplify-app内のdockerフォルダに入れる。

Dockerfileとは？

Dockerイメージファイルを作るときに元ネタとなる設定値を記載するファイル。
イメージをbuildするときに実行するスクリプト。

FROM node:14.15.4-slim

RUN apt-get update && apt-get install -y locales \
    && locale-gen en_US.UTF-8 \
    && localedef -i en_US -f UTF-8 en_US.UTF-8 \
    && echo "export LC_ALL=en_US.UTF-8" >> ~/.bashrc \
    && ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime

RUN apt-get install -y \
    wget \
    curl \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

このうち以下の部分が、イメージの種類を表している。

FROM node:14.15.4-slim

イメージは公式から展開されている。
認定Dockerイメージ一覧 of オープンソースソフトウェアの悩みを解決する ossplaza.com

他は日本語にする設定など。

docker-compose.ymlとは？

各種docker-composeコマンドを実行するときにつけるオプションを省略するために、設定ファイルとして外出ししたもの。

version: '3'

networks:
  react_net:
    driver: bridge

services:
  front:
    build: ./
    image: react00
    container_name: front
    tty: true
    volumes:
      - ../:/app
    working_dir: "/app"
    ports:
      - 8000:8000
    networks:
      - react_net

dockerイメージをビルドする

Dockerfileとdocker-compose.ymlが置いてあるフォルダで実行する。

$ sudo docker-compose build

ビルドしたイメージを確認する

$ sudo docker images
REPOSITORY   TAG            IMAGE ID       CREATED        SIZE
react00      latest         812778fdc1ef   2 weeks ago    216MB
node         14.15.4-slim   2f75d89d8162   6 months ago   167MB

同じdocker-compose.ymlファイルを使い、"react01"をbuildすると、IMAGE IDが同じになるのはなぜ？

コンテナを立ち上げる

docker-compose.ymlファイルが存在するフォルダでコマンドを実行する。

$ sudo docker-compose up -d

ｄは、バックグラウンドで立ち上げる設定（そのままターミナルで操作できる）。
ちなみに、終了するときは

$ sudo docker-compose down

コンテナの立ち上げ状況確認

$ sudo docker ps
CONTAINER ID   IMAGE     COMMAND                  CREATED         STATUS         PORTS                                       NAMES
31b9d55b373f   react00   "docker-entrypoint.s…"   5 minutes ago   Up 5 minutes   0.0.0.0:8000->8000/tcp, :::8000->8000/tcp   front

コンテナのターミナルを開く

docker上での操作は基本的にdocker execで実施するが、毎回書くのは大変なので以下コマンドでターミナルを立ち上げることができる。（イメージ）

$ sudo docker exec -u node -it front /bin/bash -l
node@31b9d55b373f:/app$ ls
amplifyapp  docker

execコマンドのフォーマットはこちらのよう。

docker exec [オプション] [コンテナ] [コマンド] [引数...]

-u nodeはユーザの指定
-itは対話型で開く際のオプション（よくわかってない）。
frontは自分でつけたコンテナの名前。
/bin/bash -lがコマンド。

【補足】今回のフォルダ構成とソースコードの場所について

本記事のやりかたは、ローカル（vagrant）とdockerコンテナでフォルダを共有し、ソースコードや必要なモジュールは共有フォルダ内に配置する構成としている。

具体的にはdocker-compose.ymlの以下の部分で、

volumes:
      - ../:/app
    working_dir: "/app"

vagrantのプロジェクトフォルダとdockerの/appフォルダを共有している。また、dockerのworking_dirを/appとしているので、dockerに入ってnpm startすればプロジェクトフォルダ内のアプリが起動できる。

以下はあくまで個人的イメージ。

一方で実際の開発で利用する際は、フォルダの共有ではなく、dockerコンテナにソースコードをコピーして、docker内にnodeをインストールする方法のほうがよさそう。
tomiko0404.hatenablog.com