Rails6・Nuxt.js・PostgreSQLを動かすdocker-compose.ymlファイルを作成する
  • 2020.06.14に公開
  • 2020.12.09に更新
  • Udemy
  • 3. Dockerを使ったRails+Nuxt.js環境構築
  • No.6 / 8

今回達成すること

3つのファイルを作成し編集していきます。

  1. .gitignore
  2. .env
  3. docker-compose.yml

今回の作業ディレクトリはrootです。お間違えのないように!

003 Docker div06

必要なファイルたちを作成する

まずは作業ディレクトリに移動しましょう。

今、frontディレクトリにいる方は一個上のディレクトリに戻ります。

front $ cd ..

3つのファイルを作成します。

  1. .gitignore
  2. .env
  3. docker-compose.yml
root $ touch {.gitignore,.env,docker-compose.yml}

確認しておきましょう。

root $ ls -a

.	.env	.gitignore	docker-compose.yml
..	.git	api	front
  • -aオプション ... 隠しファイルも表示するオプション。

.gitignoreを編集する

Gitの管理下に置きたくないファイルやディレクトリを管理するためのファイルです。

ここに記述したファイルは、Gitのpushで公開できなくなり、ローカルだけで参照できるファイルとなります。

今回は「.env」のファイルを管理下に置かないよう指定します。

.gitignore
/.env

.envを編集する

「.env」は環境変数を管理するために使われるファイルです。

環境変数とは、開発・テスト・本番などの環境ごとに変化する値を入れる変数となります。

ただ今回は、環境変数を管理すると言うよりか「docker-composeファイル、Dockerfile、コンテナ間で共通する値を変数化してDocker管理を楽にする」ことを目的として.envファイルを使用します。

もっと詳しく .envファイルを使ったdocker-compose.ymlの環境変数設計

下記のように編集しましょう。

.env
# commons
WORKDIR=app
CONTAINER_PORT=3000
API_PORT=3000
FRONT_PORT=8080

# db
POSTGRES_PASSWORD=password

docker-compose.ymlを編集する

ちょっとまって!!docker-compose.ymlってなんだよ!という方はこちらを先にお読みください。

分かりみDocker解説。DockerComposeとは何か?

下記のように編集しましょう。

docker-compose.yml
version: '3.8'

services:
  db:
    image: postgres:12.3-alpine
    environment:
      TZ: UTC
      PGTZ: UTC
      POSTGRES_PASSWORD: $POSTGRES_PASSWORD
    volumes:
      - ./api/tmp/db:/var/lib/postgresql/data

  api:
    build:
      context: ./api
      args:
        WORKDIR: $WORKDIR
    environment:
      POSTGRES_PASSWORD: $POSTGRES_PASSWORD
    volumes:
      - ./api:/$WORKDIR
    depends_on:
      - db
    ports:
      - "$API_PORT:$CONTAINER_PORT"

  front:
    build:
      context: ./front
      args:
        WORKDIR: $WORKDIR
        CONTAINER_PORT: $CONTAINER_PORT
    command: yarn run dev
    volumes:
      - ./front:/$WORKDIR
    ports:
      - "$FRONT_PORT:$CONTAINER_PORT"
    depends_on:
      - api

docker-compose.ymlを一つ一つ説明するぞう

分かる方はすっ飛ばしてください。

version: '3.8'

Composeファイルのバージョンを指定しています。

ここのバージョンはdockerのバージョンに依存します。

3.8の場合、必要なdockerのバージョンはv 19.03.0以上です。ターミナルから確認しておきましょう。

root $ docker -v

Docker version 19.03.8

Composeファイルは、バージョンによって書き方が変わります。

バージョンを確認した上でリファレンスをお読みください。

Compose file versions and upgrading - docker docs

services:

この下で各コンテナの設定を行います。

ちなみにdbapifrontサービス名と言います。

dbサービス

Railsに必要なDBコンテナを立ち上げています。

このコンテナは開発環境でしか利用しません。

本番環境ではHerokuのアドオンのPostgreSQLを使用します。

images: <ベースイメージ>

dbサービスはDockerfileを持っていませんので、ここでベースイメージを指定しています。

environment: <環境変数キー: 環境変数の値>

環境変数をキー: 値で指定しています。

ここで指定した環境変数はコンテナ内に直接渡すことができます。

  • TZ: UTC

    OSのタイムゾーンを指定しています。

    PostgreSQLのタイムゾーンを指定しています。

    本番環境に合わせ世界標準時間を設定します。

    Herokuが推奨しているタイムゾーンはUTC

    Heroku Postgresのタイムゾーン設定を変更するにはどうすればよいですか? - Heroku

  • PGTZ: UTC

    PostgreSQLのタイムゾーンを指定しています。

    PGTZ環境変数は、接続時にサーバにSET TIME ZONEコマンドを送信するために、libpqクライアントが使用します。

    引用: Documentation: 9.1: Date/Time Types - PostgreSQL

    2020年12月09日 追記

    PostgreSQLは、タイムゾーンが、コマンドオプション、もしくは「postgresql.conf」で指定されていない場合、OSのTZ環境変数を参照し、タイムゾーンを設定します。

    AlipneLinuxのPostgreSQLの場合、「postgresql.conf」内でtimezone = 'UTC'と設定されているため、PGTZ環境変数を設定しないとタイムゾーンを変更することができません。

    なお、デフォルトの値はUTCで変わりはないですが、第三者から見ても明示的になるよう、UTCを設定しています。

    postgresql.confの確認方法
    # コンテナに入る
    $ docker-compose run --rm db sh
    
    # postgresql.confのファイパスの検索
    $ find . -name postgresql.conf
    
    => ./var/lib/postgresql/data/postgresql.conf
    
    # ファイル内容の確認
    $ cat /var/lib/postgresql/data/postgresql.conf
    

    本来TZだけでタイムゾーンが設定できるはずですが、うまくいかなかったのでPGTZも設定しています。

    PGTZ環境変数は、libpqクライアントが接続時にサーバにSET TIME ZONEコマンドを送信するために用いられます。つまり接続時にコマンドを実行してタイムゾーンを変更しているってことだね!(汗


    libpq ... クライアントプログラムからPostgreSQLのバックエンドサーバに問い合わせを渡し、その結果を受け取るためのライブラリ関数の集合体のことです。

    PostgreSQLにリクエストを渡す関数ってことかな?よく分からん!

    libpq - C ライブラリ

  • POSTGRES_PASSWORD: $POSTGRES_PASSWORD

    POSTGRES_PASSWORDというキーはRails内でも使用するため、environmentに指定してコンテナに渡しています。

    $POSTGRES_PASSWORDは.envファイルの値を展開しています。

    ここは「password」という値に展開されます。

volumes: <ローカルのパス : コンテナのパス>

ここでデータベースの値を永続化しています。


そもそもローカルマシン(PCを指す)とDockerコンテナは別空間にあります。

ですので、DBコンテナにデータを保存しても、コンテナを削除してしまえば保存したデータは全て消えてしまいます。


そこでデータベースの値やファイルなどのデータを永続化する仕組みがこのvolumes(ボリューム)となります。

ボリュームで指定したデータはコンテナを削除しても消されることはなく、次コンテナが立ち上がったときに既存のデータをコピーします。

この仕組みのおかげでコンテナを削除しても続きから作業が行えるのですね。


参考

コンテナでデータを管理する - Dcker-docs-ja

Docker入門 〜Docker-compose, ネットワーク, ボリューム編〜 - Qiita

build: <Dockerfileパス>

サービスのベースイメージにDockerfileを指定する場合には、このbuildを使用します。

ここには参照するDockerfileのパスを指定します。

本来build: ./apiという形で構いませんが、下で記述するargsオプションを使用するのでcontextでファイルパスを指定しています。

  • . ... ファイルパスを指定するピリオドは、docker-compose.ymlのあるディレクトリを表します。

    Dockerfileが同列にある場合は.のみの指定となります。

args: <変数キー: 変数の値>

ここにはDockerfileに渡す値を指定します。(正確にはDockerイメージをビルドする際に渡す引数)

ここで指定した値をDockerfileで受け取るにはARG命令を使用します。

今回は下記の流れで環境変数を受け渡ししています。

1. .env
WORKDIR=app
2. docker-compose.yml
  args:
    WORKDIR: $WORKDIR
3. Dockerfile
ARG WORKDIR

RUN echo ${WORKDIR}
=> app

depends_on: - <依存先のサービス名>

サービスの依存関係を定義します。

ここで指定したサービスは、対象のサービスを起動すると自動で起動します。


例えば下記のケースだと、apiサービスを起動するとdbサービスも連動して起動します。

また、「apiサービスより先にdbサービスを起動してくれ」といった起動の順番も指定されます。

  • 今回のComposeファイルの起動順序 ... 1. db => 2. api => 3. front
  api:
    ...
    depends_on:
      - db

ports: - "ホストマシンのポート番号:コンテナのポート番号"

公開ポート番号を指定します。

下記の場合は「コンテナの3000ポートを、ブラウザ上で8080で参照する」という指定になります。

  ports:
    - "8080:3000"
  • 注意点

    YAMLファイルはaa:bbを時刻として解釈するので、必ずダブルクォーテーションで囲むようにしてください。

    と本にありましたが、実際囲まなくても正常に動きました。ただ囲んでおく方が間違い無いでしょう。

command: <コンテナで実行するコマンド>

コンテナに対して実行したいコマンドを記述します。

DockerfileのCMD命令と同じ扱いです。


なぜfrontサービスだけ指定しているのか?

Nuxt.jsの場合は、開発環境と本番環境で起動コマンドが変わるためです。

  • 開発 ... $ yarn run dev

    package.jsonのnuxtスクリプトが実行される

  • 本番 ... $yarn run start

    package.jsonのnuxt startスクリプトが実行される

本番環境の起動コマンドは、のちに出てくるheroku.ymlのrunで指定します。

今回のまとめ

今回は3つのファイルを作成して編集しました。

  1. .gitignore
  2. .env
  3. docker-compose.yml

と同時にComposeファイルの記述方法も学べましたね。これで完璧!

いよいよ次回は!?

以上でDockerイメージを構築するファイル群が揃いました。

現在の作成ファイル
root
├── api
│   ├── Dockerfile
│   ├── Gemfile
│   └── Gemfile.lock
├── front
│   └── Dockerfile
├── .env
├── .gitignore
└── docker-compose.yml

次回はRailsアプリを作成します!!!

みなさんお楽しみの$ Rails new〜!

修正情報

  • 2020年12月09日

    目次)#environment: <環境変数キー: 環境変数の値> の内容を一部修正、追記しました。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
Udemyの投稿
1
  • このカテゴリーの歩き方
  • /
  • #01
【お知らせ】UdemyでRails × Nuxt.jsの動画を公開することになりました
2
  • このカテゴリーの歩き方
  • /
  • #02
アプリケーション仕様書
3
  • このカテゴリーの歩き方
  • /
  • #03
このカテゴリーの歩き方(まずはここをチェック)
4
  • このカテゴリーの歩き方
  • /
  • #04
(Docker+Rails6+Nuxt.js+PostgreSQL)=>Heroku 環境構築~デプロイまでの手順書
1
  • Docker入門
  • /
  • #01
Docker for Macをインストールする手順
2
  • Docker入門
  • /
  • #02
分かるDocker解説。仮想環境・コンテナ・Dockerイメージ・Dockerfileとは何か?
3
  • Docker入門
  • /
  • #03
分かるDocker解説。DockerComposeとは何か?
1
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #01
【Docker+Rails6+Nuxt.js】今回作成するアプリの開発環境の全体像を知ろう
2
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #02
【MacOS】Homebrew経由でGitをインストールする方法
3
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #03
Rails6を動かすAlpineベースのDockerfileを作成する(AlpineLinuxとは何か)
4
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #04
Nuxt.jsを動かすAlpineベースのDockerfileを作成する(C.UTF-8とは何か)
5
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #05
.envファイルを使ったdocker-compose.ymlの環境変数設計
6
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #06
Rails6・Nuxt.js・PostgreSQLを動かすdocker-compose.ymlファイルを作成する
7
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #07
docker-compose.ymlを使ってRails6を構築する(PostgreSQLパスワード変更方法)
8
  • Dockerを使ったRails+Nuxt.js環境構築
  • /
  • #08
docker-compose.ymlを使ってNuxt.jsを構築する
1
  • 複数プロジェクトのGit管理
  • /
  • #01
複数プロジェクトで行うGit管理の全体像を理解しよう(Gitサブモジュール解説)
2
  • 複数プロジェクトのGit管理
  • /
  • #02
【Git】既存の子ディレクトリをサブモジュール管理に変更する手順
3
  • 複数プロジェクトのGit管理
  • /
  • #03
【GitHub】秘密鍵の生成・公開鍵を追加・SSH接続するまでを画像で分かりやすく
4
  • 複数プロジェクトのGit管理
  • /
  • #04
【GitHub】リモートリポジトリの追加・サブモジュールのリンク設定を行う
1
  • RailsAPI×Nuxt.js初めてのAPI通信
  • /
  • #01
【Rails6】"Hello" jsonを返すコントローラを作成する
2
  • RailsAPI×Nuxt.js初めてのAPI通信
  • /
  • #02
【Nxut.js】axiosの初期設定を行う(baseURL・browserBaseURLを解説)
3
  • RailsAPI×Nuxt.js初めてのAPI通信
  • /
  • #03
【Rails6】Gem rack-corsを導入してCORS設定を行う(オリジン・CORSとは何か)
1
  • Heroku.ymlを使ったDockerデプロイ
  • /
  • #01
デプロイ準備。Herokuへ新規会員登録を行いHerokuCLIをインストールする
2
  • Heroku.ymlを使ったDockerデプロイ
  • /
  • #02
heroku.yml解説編。Docker環境のRails6をHerokuにデプロイする(1/2)
3
  • Heroku.ymlを使ったDockerデプロイ
  • /
  • #03
HerokuCLI-manifestのデプロイ解説編。Docker環境のRails6をHerokuにデプロイする(2/2)
4
  • Heroku.ymlを使ったDockerデプロイ
  • /
  • #04
Dockerfile解説編。Docker環境のNuxt.jsをHerokuにデプロイする(1/2)
5
  • Heroku.ymlを使ったDockerデプロイ
  • /
  • #05
デプロイ完結編。Docker環境のNuxt.jsをHerokuにデプロイする(2/2)
1
  • モデル開発事前準備
  • /
  • #01
【Rails6】application.rbの初期設定(タイムゾーン・I18n・Zeitwerk)
2
  • モデル開発事前準備
  • /
  • #02
【Rails6】モデル開発に必要なGemのインストールとHirb.enableの自動化
3
  • モデル開発事前準備
  • /
  • #03
【Docker+Rails】A server is already running. Check /tmp/pids/server.pidエラーの対応
4
  • モデル開発事前準備
  • /
  • #04
【Docker】<none>タグのイメージを一括削除する & Rails .gitignoreの編集
1
  • ユーザーモデル開発
  • /
  • #01
Railsユーザーモデル作成。テーブル設計・ユーザー認証設計を理解する
2
  • ユーザーモデル開発
  • /
  • #02
Railsユーザーモデルのバリデーション設定(has_secure_password解説)
3
  • ユーザーモデル開発
  • /
  • #03
Railsバリデーションエラーメッセージの日本語化(ja.yml設定方法)
4
  • ユーザーモデル開発
  • /
  • #04
EachValidatorクラスのカスタムバリデーション設定(Rails6/lib以下読込)
5
  • ユーザーモデル開発
  • /
  • #05
Rails環境ごとにSeedデータ切り替えるseeds.rbの書き方
6
  • ユーザーモデル開発
  • /
  • #06
Rails6から導入された並列テストを理解する
7
  • ユーザーモデル開発
  • /
  • #07
Railsユーザーモデルバリデーションテスティング(name/email/password)
8
  • ユーザーモデル開発
  • /
  • #08
Nuxt.jsからRailsのユーザーテーブルを取得しHerokuにデプロイする
1
  • Nuxt.jsフロント開発事前準備
  • /
  • #01
【Nuxt.js2.13超解説】バージョンアップ手順と6つの新機能+2つの変更点
2
  • Nuxt.jsフロント開発事前準備
  • /
  • #02
Docker AlpineベースのNode.js上で動くNuxt.jsにVuetifyを導入する
3
  • Nuxt.jsフロント開発事前準備
  • /
  • #03
VuetifyにカスタムCSSを導入してオリジナルブレイクポイントを作る
4
  • Nuxt.jsフロント開発事前準備
  • /
  • #04
Nuxt.jsにnuxt-i18nを導入して国際化に対応する
1
  • ログイン前のレイアウト構築
  • /
  • #01
Nuxt.jsのレイアウト・ページ・コンポーネントの役割を理解しよう
2
  • ログイン前のレイアウト構築
  • /
  • #02
Nuxt.js ウェルカムページを構成するコンポーネントファイル群を作成しよう(1/4)
3
  • ログイン前のレイアウト構築
  • /
  • #03
Nuxt.js ウェルカムページにアイキャッチ画像・アプリ名・メニューボタンを表示しよう(2/4)
4
  • ログイン前のレイアウト構築
  • /
  • #04
Nuxt.js addEventListenerでスクロールを検知しツールバーの色を変化させよう(3/4)
5
  • ログイン前のレイアウト構築
  • /
  • #05
Nuxt.js ウェルカムページをレスポンシブデザインに対応させよう(4/4)
6
  • ログイン前のレイアウト構築
  • /
  • #06
Nuxt.js 会員登録ページのレイアウトファイルを作成しよう(1/4)
7
  • ログイン前のレイアウト構築
  • /
  • #07
Nuxt.js 名前、メール、パスワードのコンポーネントファイルを作成しよう(2/4)
8
  • ログイン前のレイアウト構築
  • /
  • #08
Nuxt.js 親子コンポーネント間の双方向データバインディングを実装する(3/4)
9
  • ログイン前のレイアウト構築
  • /
  • #09
Nuxt.js Vuetifyのv-text-fieldを使った会員登録フォームのバリデーション設定(4/4)
10
  • ログイン前のレイアウト構築
  • /
  • #10
Nuxt.js ログインページ実装とHerokuデプロイまで(router. replaceとpushの違いとは)
1
  • ログイン後のレイアウト構築
  • /
  • #01
Nuxt.js ログイン後のツールバーを作成しよう(inject解説)
2
  • ログイン後のレイアウト構築
  • /
  • #02
Nuxt.js アカウントメニューページ・ログアウト機能を実装しよう(nuxt-child解説)
3
  • ログイン後のレイアウト構築
  • /
  • #03
Nuxt.js ログイン後のトップページにプロジェクト一覧を表示しよう
4
  • ログイン後のレイアウト構築
  • /
  • #04
Nuxt.js プロジェクトページにVuetifyのナビゲーションドロワーを追加しよう
5
  • ログイン後のレイアウト構築
  • /
  • #05
Nuxt.js paramsIDからプロジェクトを検索してVuexに保存しよう
1
  • サーバーサイドのログイン認証
  • /
  • #01
JWTとは何か?(ruby-jwtのインストール)
2
  • サーバーサイドのログイン認証
  • /
  • #02
【Rails×JWT】ログイン認証解説とJWT初期設定ファイルの作成
3
  • サーバーサイドのログイン認証
  • /
  • #03
【Rails×JWT】トークン発行とデコードを行うAuthTokenクラスの作成
4
  • サーバーサイドのログイン認証
  • /
  • #04
【Rails×JWT】 ログイン判定を行うAuthenticatorモジュールの作成
5
  • サーバーサイドのログイン認証
  • /
  • #05
【Rails×JWT】UserクラスからJWTを扱うTokenizableモジュールの作成
6
  • サーバーサイドのログイン認証
  • /
  • #06
【Rails×JWT】AuthTokenクラスとAuthenticatorモジュールをテストする
7
  • サーバーサイドのログイン認証
  • /
  • #07
【Rails×JWT】JWTをCookieに保存するログインコントローラーの実装
8
  • サーバーサイドのログイン認証
  • /
  • #08
【Rails×JWT】ログインコントローラーのテストとHerokuデプロイ
1
  • フロントエンドのログイン認証
  • /
  • #01
【Rails×Nuxt.js】クロスオリジン通信でのCookie共有設定
2
  • フロントエンドのログイン認証
  • /
  • #02
【Nuxt.js】Railsからのログイン成功レスポンスをVuexに保存する
3
  • フロントエンドのログイン認証
  • /
  • #03
【Nuxt.js】ローカルストレージの有効期限を暗号化する(crypto-js解説)
4
  • フロントエンドのログイン認証
  • /
  • #04
【Nuxt.js】JWT有効期限内のユーザーをログインしたままにする実装
5
  • フロントエンドのログイン認証
  • /
  • #05
【Nuxt.js】ログイン前後のリダイレクト処理をミドルウェアで実装する
6
  • フロントエンドのログイン認証
  • /
  • #06
【Nuxt.js】ログイン失敗時のトースターをグローバルイベントとして作成する
7
  • フロントエンドのログイン認証
  • /
  • #07
【Nuxt.js】エラーページを作成する
8
  • フロントエンドのログイン認証
  • /
  • #08
【Rails×Nuxt.js】デモプロジェクトの作成とHerokuデプロイ(ログイン認証完)
1
  • 本番環境への対応
  • /
  • #01
【Rails×Nuxt.js】SafariのクロスサイトCookie保存拒否に対応する
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。