Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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
akicho8
Ruby脳にムチ打って泣きながらVue.jsをやっています
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away