LoginSignup
9

More than 5 years have passed since last update.

【備忘録】Cloud9で開発したRails5.1+Vue.jsのWEBアプリをGitHub経由でHerokuにデプロイするまで

Last updated at Posted at 2017-09-13

無駄な処理等あるかもしれませんが、とりあえず全部書いておきます!
ちょこちょこ追記・修正していきます

Cloud9で環境構築

前提

  • Cloud9にアカウント登録済み
  • Cloud9上にWorkSpaceを「blank」で作成済み

【Ruby 2.3.1】インストール

rvm install 2.3.1

【Rails 5.1】インストール

gem install rails --version="5.1"

【Bundler】インストール

gem install bundler

【Nodo.js】のインストール

nvm install v7.7.1

【Node.js】のアップグレード

npm update -g npm

【Yarn】インストール

npm i -g yarn

Railsプロジェクトの作成・ディレクトリ移動

rails new myapp && cd myapp

「myapp」部分は任意

Gemfile追記

myapp/Gemfile
gem 'webpacker', github: "rails/webpacker"

bundle install実行

bundle install

【Webpacker】インストール

rake webpacker:install

【Vue.js】インストール

rake webpacker:install:vue

Railsアプリ上でVue.jsを動かしてみる

コントローラーの作成

rails g controller TestPage index

「TestPage」部分は任意

ルートの設定

config/routes.rb
Rails.application.routes.draw do
  root to: 'test_page#index' #追記
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

ビューの修正

app/views/layout/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Myapp</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
    <!-- 追記 -->
    <%= javascript_pack_tag 'hello_vue' %> 
  </body>
</html>

javascript_pack_tagヘルパーを使ってapp/javascript/packs/hello_vue.jsを呼び出す

ビルド

bin/webpack

Railsサーバー起動

rails s -p $PORT -b $IP

※ Cloud9特有のコマンド

WEBアプリで

https://xxx.c9users.io/にアクセスし「Hello Vue!」が表示されていたら成功です₍₍ (ง ˙ω˙)ว ⁾⁾

GitHubと連携

前提

  • GitHubにアカウント登録済み
  • GitHubでリモートリポジトリを作成済み

Cloud9でGitのリポジトリを作る

git init

ワークツリーの内容をインデックスに追加

git add -A

インデックスに追加されたファイルをコミット

git commit -m "first commit"

Cloud9からGitHubへpush

git remote add origin https://github.com/xxx/yyy.git
git push origin master

https://github.com/xxx/yyy.gitはGitHubの「Quick setup」に記載されています
この時GitHubのユーザーネームとパスワードを聞かれるので入力

Herokuにデプロイ

前提

  • Herokuにアカウント登録済み
  • アプリを作成済み

GitHubと連携

アプリ作成後、Deployment methodから「GitHub」を選択し、二段目のリポジトリ検索画面の「Search」をクリック
GitHubで作成したリポジトリが表示されたら「Connect」をクリック

自動デプロイ設定を有効化

Automatic deploysの「Enable Automatic Deploys」をクリック

Cloud9からHerokuにデプロイするための準備

Sqlite3がサポートされていないためPostgresqlに変更

Gemfile変更

sqlite3部分をコメントアウト

Gemfile
#gem 'sqlite3'

以下追記

Gemfile
gem 'pg'
gem 'rails_12factor', group: :production
bundle install

ロール(ユーザー)作成

sudo su - postgres
createuser sample_role -slP

「sample_role」は任意
この後2回パスワード入力を求められるので、任意のパスワードを入力

database.yml修正

config/database.yml
# SQLite version 3.x
#   gem install sqlite3
#
#   Ensure the SQLite 3 gem is defined in your Gemfile
#   gem 'sqlite3'
#
default: &default
  adapter: sqlite3
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  timeout: 5000

development:
  <<: *default
  database: db/development.sqlite3

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: db/test.sqlite3

production:
  <<: *default
  database: db/production.sqlite3

↓ 変更

config/database.yml
default: &default
  adapter: postgresql
  encoding: SQL_ASCII
  pool: 5
  username: sample_role
  password: password

development:
  <<: *default
  database: development

test:
  <<: *default
  database: test

production:
  <<: *default
  encoding: unicode
  database: production

database.ymlの内容でデータベースを作成・マイグレーション実行

rake db:create
rake db:migrate

Cloud9でHerokuコマンドを利用できるようにする

git remote add heroku https://git.heroku.com/xxx.git

https://git.heroku.com/xxxはHerokuのSetting > infoの「Heroku Git URL」から参照できます

Herokuコマンドを利用するための一式をインストール

wget -qO- https://cli-assets.heroku.com/install-ubuntu.sh | sh

【Heroku】アップデート

heroku update

【Heroku】ログイン

heroku login

この時Herokuのメールアドレスとパスワードを聞かれるので入力

Herokuにデプロイ!

コンパイル

rake assets:precompile RAILS_ENV=production

Herokuにデプロイ

git add -A
git commit -m "heroku first commit"
git push heroku master

Herokuサーバーでマイグレーション実行

heroku rake db:migrate

ブラウザで確認

heroku open

デキタ---- ٩( 'ω' )و ----!!!
アプリの内容やセキュリティ対策は各自でご対応くださいませ

その他

各種エラー対応

Postgresql設定後のrake db:create時に 【FATAL: Peer authentication failed for user...】

● エラーメッセージ

FATAL: Peer authentication failed for user "sample_role"

● やったこと

sudo vi /etc/postgresql/9.3/main/pg_hba.conf

EでEdit → aでINSERTモード

local all postgres peer

↓ 変更

local all postgres md5

Escでコマンドモード → :wqで保存

Herokuで 【ActionView::Template::Error...】

● エラーメッセージ

ActionView::Template::Error (Webpacker can't find hello_vue.js in /app/public/packs/manifest.json. Possible causes:

● やったこと

config/webpacker.yml
default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: assets #packsからassetsに変更
  cache_path: tmp/cache/webpacker
config/environments/production.rb
  config.assets.compile = true #falseからtrueに変更

参考サイト

めちゃめちゃ参考にさせていただきました。
ありがとうございました!

初めての、クラウドを利用してRuby on Railsを動かすまで(Cloud9、GitHub、Heroku)
Cloud9上でRails 5.1+React.jsの環境構築手順
Cloud9 から Heroku に静的ページを公開するための 7 つのステップ
bin/rails db:migrate でエラー@ActionMailer構築中

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9