Zenn
🐣

macでRails apiとNuxtを作れるDocker環境を作る

2021/10/17に公開
Docker
Nuxt
Rails
macOS
tech

はじめに

WEBサービスの勉強を始めたいけど、開発環境がよくわからない。
こんな事で困っているケースが多々あるので、かんたんな開発環境をすぐに再現できるように、方法を残しておきます。
※ この記事内では、各ファイル内の細かい使い方などは、説明いたしません。

ゴール

用意するもの

  • Docker.app
  • エディター
  • 作業用ファイルをいくつか

docer.app

Docker Desktop for Mac については、https://www.docker.com/products/docker-desktop からダウンロードできると思います。

エディター

Visual Studio Codeなど、お好きなエディターを用意しましょう。

作業用ファイルをいくつか

まず、開発環境の大本であるディレクトリを用意します。（以下：rootと言います。）
例：nuxtdemoディレクトリ
※「★」は適当なディレクトリ名で構いません。私の場合は「works」としています。

/Users/ユーザー名/★/nuxtdemo

nuxtdemoディレクトリの構成は、以下のようにします。
各ファイルの中身については、後ほど記載します。
※[]はそれぞれ、apiディレクトリ、frontディレクトリを指します。

docker-compose.yml
.env
[api]
└Dockerfile
└Gemfile
└Gemfile.lock
[front]
└Dockerfile

各ファイルの中身について

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:
    stdin_open: true
    tty: true
    build:
      context: ./api
      args:
        WORKDIR: $WORKDIR
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    environment:
      POSTGRES_PASSWORD: $POSTGRES_PASSWORD
      API_DOMAIN: "localhost:$FRONT_PORT"
      APP_URL: "http://localhost:$API_PORT"
    volumes:
      - ./api:/$WORKDIR
    depends_on:
      - db
    ports:
      - "$API_PORT:$CONTAINER_PORT"

  front:
    build:
      context: ./front
      args:
        WORKDIR: $WORKDIR
        CONTAINER_PORT: $CONTAINER_PORT
        API_URL: "http://api:$API_PORT"
        API_URL_BROWSER: "http://localhost:$API_PORT"
    command: yarn run dev
    volumes:
      - ./front:/$WORKDIR
    depends_on:
      - api
    ports:
      - "$FRONT_PORT:$CONTAINER_PORT"
.env
# commons
WORKDIR=app
CONTAINER_PORT=3000
API_PORT=3000
FRONT_PORT=8080

# db
POSTGRES_PASSWORD=password
api/Dockerfile
FROM ruby:2.7.1-alpine

ARG WORKDIR

ENV RUNTIME_PACKAGES="linux-headers libxml2-dev make gcc libc-dev nodejs tzdata postgresql-dev postgresql git imagemagick" \
    DEV_PACKAGES="build-base curl-dev" \
    HOME=/${WORKDIR} \
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo

WORKDIR ${HOME}

COPY Gemfile* ./

RUN apk update && \
    apk upgrade && \
    apk add --no-cache ${RUNTIME_PACKAGES} && \
    apk add --virtual build-dependencies --no-cache ${DEV_PACKAGES} && \
    bundle install -j4 && \
    apk del build-dependencies

COPY . .
api/Gemfile
source 'https://rubygems.org'
gem 'rails', '~> 6.0.0'
front/Dockerfile
FROM node:14.16.1-alpine

ARG WORKDIR
ARG CONTAINER_PORT
ARG API_URL
ARG API_URL_BROWSER

ENV HOME=/${WORKDIR} \
    LANG=C.UTF-8 \
    TZ=Asia/Tokyo \
    HOST=0.0.0.0 \
    API_URL=${API_URL} \
    API_URL_BROWSER=${API_URL_BROWSER}

WORKDIR ${HOME}

# COPY package*.json ./
# RUN yarn install
# COPY . ./
# RUN yarn run build

EXPOSE ${CONTAINER_PORT}

Rails API環境を作る

ファイルの準備が整いましたら、rails apiアプリから作成していきます。
ゴールは、http://localhost:3000/ のURLで表示する画面が、以下のようになることです。

ここから先は、ターミナルでのコマンド入力で行います。
そのためにまず、ターミナルで、先程作成したroot（ディレクトリ）に移動します。

root $ cd /Users/ユーザー名/★/nuxtdemo

移動後、一度dockerが動くかどうかを確認するためにも、buidlコマンドを実行します。

root $ docker-compose build

その後、buildコマンドが正しく動いたかどうか確認するために、
docker imagesコマンドを実行します。
結果、以下のようにREPOSITORYなどが表示されればOKです。

root $ docker images
REPOSITORY         TAG           IMAGE ID       CREATED             SIZE
nuxtdemo_front     latest        9043ea43445d   21 minutes ago      116MB
nuxtdemo_api       latest        9cd48bec61b8   21 minutes ago      658MB

この確認ができたら、Railsアプリを作成します。

root $ docker-compose run --rm api rails new . -f -B -d postgresql --api

無事に作成完了した場合は、railsとDBを連携させるために、以下のファイルを更新し、
docker環境を更新した後に、DBを作成するコマンドを実行します。

api/config/database.yml
default: &default
  adapter: postgresql
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  host: db            # 追加
  username: postgres  # 追加
  password: <%= ENV["POSTGRES_PASSWORD"] %>  # 追加

root $ docker-compose build
root $ docker-compose run --rm api rails db:create

これらを実行後は、以下のように表示されます。

root $ docker-compose run --rm api rails db:create
Creating nuxtdemo_api_run ... done
Created database 'app_development'
Created database 'app_test'

DBが作成されたら、docker環境を立ち上げましょう。

root $ docker-compose up api

そうすると、以下のように表示されるはずです。

nuxtdemo_db_1 is up-to-date
Creating nuxtdemo_api_1 ... done
Attaching to nuxtdemo_api_1
api_1    | => Booting Puma
api_1    | => Rails 6.0.4.1 application starting in development
api_1    | => Run `rails server --help` for more startup options
api_1    | Puma starting in single mode...
api_1    | * Version 4.3.10 (ruby 2.7.1-p83), codename: Mysterious Traveller
api_1    | * Min threads: 5, max threads: 5
api_1    | * Environment: development
api_1    | * Listening on tcp://0.0.0.0:3000
api_1    | Use Ctrl-C to stop

このような表示が確認できた場合は、http://localhost:3000/ にアクセスしてみましょう。
そうすると、以下の画面が表示できると思います。
これで、Rails API環境の作成は完了です。

Nuxt環境を作る

続いてNuxt環境を作っていきます。
ゴールは、http://localhost:8080/ のURLで表示する画面が、以下のようになることです。

ターミナルで以下のコマンドを実行します。

root $ docker-compose run --rm front yarn create nuxt-app app

コマンドの処理の途中、「どうのようなnuxt環境にするか」を選択できる状態になります。
が、何も考えず、エンターキー連打でかまいません。
そのため、今回は以下のように選択して、すすめることにします。

create-nuxt-app v3.7.1
✨  Generating Nuxt.js project in app
? Project name: app
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username?
? Version control system: Git

先程のコマンドの実行完了を確認したら次に、作成したファイルの移動を行います。

root $ mv front/app/{*,.*} front
root $ rmdir front/app

ファイルの移動が終わりましたら、front/Dockerfileの更新を行います。
（先頭の「#」を削除してください。）

front/Dockerfile
COPY package*.json ./
RUN yarn install
COPY . ./
RUN yarn run build

Dockerfileを書き換えたので、buildしなおします。

root $ docker-compose build

その後は upで立ち上げ、http://localhost:3000/ と、 http://localhost:8080/ にアクセスしてみましょう。

root $ docker-compose up

http://localhost:8080/ の表示が、以下のようになれば、Nuxt環境の準備完了です。
おつかれさまでした！

[その他]よく使うDockerコマンド

# dockerのイメージを作成する。
root $ docker-compose build

# docker内のnuxt yarn install
root $ docker-compose run --rm front yarn install

# docker内のrails bundle install
root $ docker-compose run --rm api bundle install

# docker環境の立ち上げ
root $ docker-compose up

# dockerのコンテナの停止・削除を一度に行う
root $ docker-compose down

# Dockerイメージを確認する
root $ docker images

# Dockerイメージのうち、noneタグのイメージを削除
root $ docker rmi $(docker images -f 'dangling=true' -q)

[その他]参考記事

https://blog.cloud-acct.com/posts/u-create-docker-compose
https://qiita.com/rikuya11s/items/3c832801e52e980c5b74

Discussion