はじめに

バックエンドをrailsで、フロントエンドをreactのアプリケーションを開発した際の、環境構築に苦戦したため、備忘録もかねて投稿します。
とりあえず動くとこまでなので、dockerの利点を生かせていなかったり、セキュリティ関連の設定などは行っていません。
間違いなどあればご指摘いただけると幸いです。

前提

railsアプリとreactアプリは開発環境で開発し、完成したものを持ってきて本番環境を構築しました。
そのため、本投稿の構成では開発段階を考慮していません。
継続的に改修していく場合にどうするかが課題です。

コンテナ構成

serverコンテナ

このコンテナにMySQL以外の全てのサービスを詰め込んでしまいます。
dockerは1コンテナにつき1サービスが好ましいので良くない構成かもです...
開発環境ならrailsやreactをそれぞれが持つフレームワーク付随のサーバで良いため、コンテナを分けられますが、webサーバとしてapacheを使用した場合の構築方法が分かりませんでした。
今後の課題です。

dbコンテナ

このコンテナには、MySQLを立ち上げます。

ファイル準備

ディレクトリ構成

/ -- docker-compose.yml
                server/ -- Dockerfile
                                  db/ -- Dockerfile
                                 web/ -- configs/  -- apache/ -- 000-default.conf
                                                                 ports.conf
                                                      react/  -- .htaccess
                                         webfront/ -- reactアプリケーションプログラム
                                              api/ -- railsアプリケーションプログラム

/ docker-compose.yml

docker-compose.yml

version: '3'
services:
  server:
    build: ./server
    ports:
      - 3000:3000
      - 3001:3001
    depends_on:
      - db
    tty: true
    stdin_open: true
  db:
    build: ./server/db
    volumes:
      - db-volume:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: test_db
      TZ: Asia/Tokyo
    ports:
      - 3306:3306
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
volumes:
  db-volume:

/ server / Dockerfile

/server/Dockerfile

FROM ubuntu:20.04

RUN apt -y update \
    && apt -y upgrade \
    && apt-get install -y vim git

# タイムゾーン設定
RUN ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime


# ruby2.7.0 インストール
RUN apt-get -y install ruby


# apacheをセットアップ
RUN apt-get install -y apache2 apache2-dev
COPY ./web/configs/apache/000-default.conf /etc/apache2/sites-available/000-default.conf
COPY ./web/configs/apache/ports.conf /etc/apache2/ports.conf


# railsアプリセットアップ
RUN apt-get install -y build-essential ruby-dev libmysqlclient-dev libcurl4-openssl-dev nodejs
RUN mkdir /app \
    && mkdir /app/api
WORKDIR /app/api
COPY ./web/api/Gemfile /app/api/Gemfile
COPY ./web/api/Gemfile.lock /app/api/Gemfile.lock
RUN gem install bundler
COPY ./web/api /app/api
RUN bundle install
RUN rm -f tmp/pids/server.pid
RUN mkdir public \
    && chmod 777 public \
    && chown www-data:www-data -R public \
    && chown -R www-data:www-data /app

# passengerとapache関連
RUN gem install passenger


# react セットアップ
RUN apt-get install -y npm \
    && npm install n -g \
    && n lts \
    && a2enmod rewrite
RUN mkdir /app/webfront
WORKDIR /app/webfront
COPY ./web/webfront /app/webfront
COPY ./web/configs/react/.htaccess /app/webfront/public
RUN npm install
RUN chown -R www-data:www-data /app/webfront
RUN npm run build


WORKDIR /app

補足

「railsアプリセットアップ」部分で自分で/publicディレクトリを作成しています。
これはなぜか私の環境ではpublicディレクトリが生成されておらず、ドキュメントルートにする場所に困ったため、自分でpublicディレクトリを作成しています。
これでも問題なく動作しました。

server / db / Dockerfile

FROM mysql:5.7

RUN apt-get update
RUN apt-get -y install locales-all

ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8

server / web / config / apache / 000-default.conf

000-default.conf

<VirtualHost *:3000>
        ServerAdmin webmaster@localhost
        DocumentRoot /app/api/public
        RailsEnv development

        <Directory "/app/api/public">
                AllowOverride all
                Require all granted
                Options MultiViews
                Order deny,allow
                Allow from all
        </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

<VirtualHost *:3001>
        ServerAdmin webmaster@localhost
        DocumentRoot /app/webfront/build

        <Directory "/app/webfront/build">
                AllowOverride all
                Require all granted
                Order deny,allow
                Allow from all
        </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

server / web / config / apache / ports.conf

ports.conf

Listen 3000
Listen 3001

<IfModule ssl_module>
        Listen 443
</IfModule>

<IfModule mod_gnutls.c>
        Listen 443
</IfModule>

server / web / config / react / .htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

server / web / api /

railsのアプリケーションを格納します。

server / web / webfront /

reactのアプリケーションを格納します。

起動する

buildする

docker-compose build

コンテナを立ち上げる

docker-compose up -d

apacheの設定を完了する

現在のままでは、passengerの設定が完了しておらず、railsアプリケーションがapache経由でアクセスできません。
passengerの設定には、コマンド実行後に選択肢が出てしまうため、Dockerfileに含められませんでした。

serverコンテナに入る

apacheやrailsのアプリケーションはserverコンテナに存在するため、コンテナに入って作業をします。

docker-compose exec server bash

passengerを使えるようにコンパイル？みたいな

passengerを使えるようにコンパイル？を行います。
初めにrailsでpassengerを使用するための必要な追加パッケージがインストールされているかが確認され、問題なければコンパイル？が実行されます。
もし、必要なパッケージがインストールされていなければインストールしてください。

passenger-install-apache2-module

passengerを使うための設定値を出力

以下を実行して、出力された設定値を[/etc/apache2/apache2.conf]の末尾に追加してください。

passenger-install-apache2-module --snippet

apacheの再起動

service apache2 restart

port 3000番でrailsが、3001番でreactが起動しているはずです！

苦戦したポイント

nodejsやapacheをbuild時にインストールする時、選択肢で止まってしまう。
=> docker-compose.ymlで初めにタイムゾーンを設定することで解決。
railsのドキュメントルートとなる/publicディレクトリが存在しない
=> mkdir publicと単純に空のpublicディレクトリを作成し、ドキュメントルートに設定することで解決
権限の問題でapacheからrailsやreactのアプリケーションにアクセスできない
=> apacheのユーザーがwww-dataだったため、 chown -R www-data:www-data /app などとして解決
npmやnodeのバージョンが低い
=> n をインストールし、npmとnodeを最新のバージョンにすることで解決
reactアプリがreact-routerでのルーティングがされない(今回開発したアプリがSPAだったため)
=> /publicディレクトリに設定を記述した.htaccessを配置することで解決
.htaccessに記述したrewriteをapacheが上手く認識しない
=> ディフォルトではそのパッケージ?が使えないため、a2enmod rewriteコマンドを実行して使えるようにして解決

参考文献