2021年12月10日
プログラミング
Dockerで作成したRailsアプリケーションをHerokuにデプロイする


はじめに
この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay10の記事です。
昨日は「モデルに書いていたメソッドをPOLOに切り出してみた!」についての記事でした。
今回はDockerで作成したRailsアプリケーションをHerokuにデプロイしてみて得た知見を書いていきます。
背景
Herokuは手軽にデプロイ環境を作成することができ、デプロイの自動化も簡単に実施することができるため利便性が高く、弊社では利用されることが多いサービスです。AWSと比較してパフォーマンス面の懸念が挙がることが多いですが、CDNと組み合わせることである程度のトラフィックはさばくことができると考えています。
弊社でHerokuを利用する際には、Rubyのビルドパックを使って動かすことが大半です。一方で世間的な運用の主流はコンテナ運用かと思います。プラットフォーム間での移行性などコンテナのメリットを享受するため、Dockerを使ったHerokuデプロイを実践してみることにしました。
準備
Dockerを使ったHerokuデプロイに関しては公式からガイドが出ており、基本的に公式に沿って進めました。その中でハマったポイント等を踏まえて書いていきます。
Dockerfileの作成
今回の検証用ということで、とりあえず動作することを目指して最小限の構成でDockerfileの作成を作成しました。
FROM ruby:3.0.1
WORKDIR /app
RUN curl -fsSL https://deb.nodesource.com/setup_14.x | bash -
RUN apt-get update && apt-get install -y nodejs
RUN npm install -g yarn
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install
COPY . /app
# 検証用のためsecret_key_baseはダミーで設定
RUN SECRET_KEY_BASE=dummy bundle exec rails assets:precompile
開発環境で使うDockerfileとの違いとしては、ソースコードやコンパイルしたアセットをイメージに含めるという点が挙げられます。
heroku.ymlの作成
次に作成したDockerfileをHerokuにデプロイするための定義ファイルheroku.ymlを作成します。
setup:
addons:
- plan: cleardb
config:
HOGE: hoge_env
build:
docker:
web: Dockerfile
config:
FUGA: fuga_env
release:
command:
- ./deployment-tasks.sh
image: web
run:
web: bundle exec puma -C config/puma.rb
heroku.yml は大きく、setup, build, release, run の4つのセクションに分かれています。
setup
setupセクションではHerokuアプリケーションの設定を定義します。今回はアドオンで使用するClearDBの設定を入れました。また、今回のアプリケーションで特に使用はしないのですが、環境変数の設定検証のため [HOGE] というキーで環境変数を設定しました。
build
buildセクションでは作成したイメージをビルドします。webコンテナとして利用するDockerファイルのパスと環境変数を設定しました。ここで設定される環境変数は、実行されるアプリケーションから参照される環境変数( heroku config:set で設定する環境変数 )とは別物になりますのでご注意ください。Dockerfile内で参照する環境変数がこのセクションで設定されます。今回はテスト的に適当な名前で設定してあります。
release
releaseセクションではリリース時に走らせるコマンドを指定します。公式のガイドに沿ってシェルファイルを実行する形式を取りました。ここでの注意点としては、シェルファイルの権限が足りていないとデプロイ時にエラーが発生してしまいます。デプロイ環境でも実行できるよう実行権限を付与する必要があります。
使用したシェルファイルの中身は以下の通りです。今回のように1つのコマンドだけを実行する場合は、直接heroku.ymlに記載をしても実行可能です。
bundle exec rake db:migrate
run
runセクションではコンテナ起動のコマンドを指定します。こちらも公式のガイドに沿って、pumaの定義ファイルからサーバを起動するよう設定しました。
heroku.ymlに関して 更に詳しい情報は公式のガイドラインに記載がありますのでご参照ください。
ここまででDockerを使ったHerokuデプロイの準備が整いました。
Herokuアプリケーション
HerokuのダッシュボードまたはCLIからアプリケーションを作成し、Heroku CLIでログイン後、下記コマンドでアプリケーションのスタックをcontainerにセットします。
heroku stack:set container
デプロイ
setupセクションが機能しない
これでDockerイメージとHerokuアプリケーションの準備が整ったので、Heroku git URLを使用して作成したDockerイメージをデプロイしてみました。
git push heroku main
すると、ClearDBのアドオンも追加されておらず、setupで設定した環境変数も設定されていませんでした。
[Heroku Dev Center]の公式ガイドを読み進めていくと以下の記載があり、setupセクションは2021年12月時点ではβ版のみの機能提供となっていました。
heroku.yml マニフェスト内で定義されている setup セクションからアプリを作成するには、beta アップデートチャネルから heroku-manifest プラグインをインストールしてください。
今回はClearDBのアドオンと環境変数は手動で設定をしました。改めてデプロイを実行してみると無事成功となりました。
まとめ
Dockerを使ったHerokuデプロイを実践してみて、思うように動かないところがありつつも意外と簡単にデプロイまでもっていくことができました。
β版を利用したsetupからのアプリケーションの作成はまた別のタイミングで試してみようと思います。
参考
Ruby on Railsのお仕事に関するご相談
Bageleeの運営会社、palanではRuby on Railsに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか?
1
0
関連記事

2021年12月23日
RailsアプリにGoogle Mapから緯度経度情報を取得する機能を追加する

2021年12月22日
RDBでセットメニューを表現する方法

2021年12月11日
Railsでツリー構造アプリを作ってみた

2021年12月10日
Dockerで作成したRailsアプリケーションをHerokuにデプロイする

2021年12月9日
モデルに書いていたメソッドをPOROに切り出してみた!

2021年12月7日
gem cancancanを使ってみた!
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー

Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

Damien
WebAR/VRの企画・開発をやっています。森に住んでいます。

ゲスト bagelee

かっきー

まりな

suzuki
miyagi

ogawa
雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと
デザイナーをしています。 好きな食べ物はラーメンです。

taishi kobari
フロントエンドの開発を主に担当してます。Blitz.js好きです。

kubota shogo
サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!
nishi tomoya

aihara
グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。
nagao
SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

Kainuma
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

sugimoto
asama
ando
iwasawa ayane

oshimo
異業界からやってきたデザイナー。 palanARのUIをメインに担当してます。 これからたくさん吸収していきます!