【超簡単】フロントエンドを Capistrano でデプロイする方法

はじめに

Capistrano は万能です。Rails 以外でも使えます。
むしろ Rails 以外で使う方がなんやかんや導入しなくていいので簡単です。

というわけでフロントエンドを Capistrano でデプロイする手順を書いてみます。

前提

次のようにして作った foo-app という Vue.js のアプリがあるとします。

npm install -g vue-cli
vue init webpacker foo-app
cd foo-app

git init
git add -A
git commit "initial commit"

ここは React のアプリでも、静的なHTMLでもなんでもいいです。

ここから本題で、まず Gemfile を作成

bundle init

capistrano gem を追加

bundle add capistrano --group development

自動的に bundle install も走ります。

capistrano の設定ファイルを生成

cap install

config/deploy.rb などができます。

デプロイの共通設定を記述

config/deploy.rb

lock "~> 3.11.0"
set :application, Pathname(__dir__).dirname.basename.to_s
set :repo_url, "file://#{Pathname(__dir__).dirname}"
set :deploy_to, "/var/www/#{fetch(:application)}-#{fetch(:stage)}"

application はアプリ名を指定します。このプロジェクトだと 'foo-app' です。__dir__ を元に名前を決めると管理するものが減るのでオススメですが、余計にわかりにくいって場合は直接書いてもよいです。

repo_url は git のリポジトリを指定します。この例では localhost にデプロイ(設定は後述)するため repo_url を file:// ではじまる url にしていますが外部にデプロイする場合は github のリポジトリ URL などを指定します。

deploy_to はデプロイ先ホスト内のパスを指定します。

production 用の設定を記述

config/deploy/production.rb

server "localhost", user: "deploy", roles: ["web"]

この例だと localhost に deploy ユーザーで ssh ログインすることになります。

また cap xxx deploy を実行したときの xxx の部分が config/deploy/xxx.rb に対応して読み込まれます。

デプロイ実行

cap production deploy

これだけです。

デプロイのあとでビルドしたい場合は？

config/deploy.rb に以下を追加すると連動して npm run build が実行できます。

config/deploy.rb

desc 'npm run build'
after 'deploy:updated', :build do
  on roles :all do
    within release_path do
      execute :npm, 'install'
      execute :npm, 'run', 'build'
    end
  end
end