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

無駄な処理等あるかもしれませんが、とりあえず全部書いておきます！
ちょこちょこ追記・修正していきます
#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追記
```gem: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」部分は任意
##ルートの設定
```ruby: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
```
##ビューの修正
```html+erb: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部分をコメントアウト

```ruby:Gemfile
#gem 'sqlite3'
```
以下追記

```ruby:Gemfile
gem 'pg'
gem 'rails_12factor', group: :production
```
```
bundle install
```
####ロール（ユーザー）作成
```
sudo su - postgres
createuser sample_role -slP
```
「sample_role」は任意
この後2回パスワード入力を求められるので、任意のパスワードを入力

####database.yml修正
```ruby: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

```
↓ 変更

```ruby: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:
```
####● やったこと
```ruby:config/webpacker.yml
default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: assets #packsからassetsに変更
  cache_path: tmp/cache/webpacker
```
```ruby:config/environments/production.rb
  config.assets.compile = true #falseからtrueに変更
```
#参考サイト
めちゃめちゃ参考にさせていただきました。
ありがとうございました！

[初めての、クラウドを利用してRuby on Railsを動かすまで（Cloud9、GitHub、Heroku）](http://qiita.com/HideakiSaito/items/5be1a45870a4c3d1a3c7)
[Cloud9上でRails 5.1+React.jsの環境構築手順](http://qiita.com/YukiNaito/items/047c58ba15080ddd3b9d)
[Cloud9 から Heroku に静的ページを公開するための 7 つのステップ](http://okojon.hateblo.jp/entry/2017/07/18/130816)
[bin/rails db:migrate でエラー@ActionMailer構築中](http://qiita.com/Yukiya025/items/d456cb7878dde33f5968)