Go to Qiita Advent Calendar 2024 Top
LoginSignup
10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@kyonmoco48

【備忘録】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構築中

10
9
1

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
Sign upLogin
10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?