23
26

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.

railsで作ったアプリをとりあえず公開する方法。rails+GitHub(GitHub Desktop)+heroku

Last updated at Posted at 2018-04-30

##やりたいこと
ローカルで初めのページだけ雑に作ったアプリをherokuにデプロイ、全世界に公開する

初期画面だけ表示するので、最終結果はこんなのです。
スクリーンショット 2018-04-30 19.50.54.png

###対象
初心者、とりあえずrailsで作って公開(デプロイ)してみたい人

ーーーー
とりあえずネットに公開するまでの備忘録。
個人が作って公開するまでの過程ってこんなに簡単なんだという感動を共有したい。
ーーーー

###参考サイト
rails公式のチュートリアル
ここではgitbucketというサービスを使っていたところをGitHubに変更
https://railstutorial.jp/chapters/beginning?version=5.1

##使用ツール
・Macbook(High Sierra)
・GitHub Desktop(https://desktop.github.com)
GitHubの公式ツール
・atom
・ruby on rails

以下2つのアカウントは作成済
・heroku
・GitHub

#以下、手順

railsはインストール済みという体で進みます。

terminal
rails new cafe_app

(cafe_appの部分はアプリ名、何か好きな単語を入れてください)

初期表示の画面を作成

初期画面を作り、そこへのリンクを貼っておかないと、
本番環境では表示画面が見つかりませんというエラーになります。

app/controllers/application_controller.rb
class ApplicationController < ActionController::Base

  def cafe
    render html: "cafe_appへようこそ!"
  end

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

###gemfileをちょっといじる
herokuはsplite3に対応していないため、本番環境にsqliteをインストールしないように改修

Gemfile
# この2行を削除
# Use sqlite3 as the database for Active Record
gem 'sqlite3'

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  #ここ1行追加
  gem 'sqlite3', '1.3.13'
end

# この3行を一番下に追加
group :production do
  gem 'pg', '0.18.4'
end

ターミナルにてgemをインストール

terminal
bundle install --without production
bundle update

GitHub DesktopでGitHubにアップ

以下からダウンロードしてきてインストールしてください。
・GitHub Desktop(https://desktop.github.com)

GitHubへのアップロード

GitHub Desktopのツールバー 「File > Add Local Repositry > フォルダを選ぶ」でrails newで作成したフォルダを選択する

左下でコミットの名前を付ける

青い「Commit to master」ボタンをクリック

右上の「Publish Repository」ボタンをクリック
スクリーンショット 2018-04-30 18.28.36.png

「Keep this code private」のチェックを外して青い「Publish Repositry」ボタンを押す(ここでブランチの名前が付けられます
スクリーンショット 2018-04-30 18.29.02.png

herokuへのデプロイ&自動デプロイ設定

herokuのサイトでnew appを作る
以下の画像の右上「Create new app」
スクリーンショット 2018-04-30 18.39.42.png

GitHubと繋げる

作ったアプリの中に入って、deployタブを押す

GitHubを選ぶ

先ほどGitHubにアップロードしたブランチの名前で検索、選択する

スクリーンショット 2018-04-30 18.40.10.png

GitHubからソースをデプロイする

Deployの画面を下にスクロールすると以下の画面が出てくる。

Manual Deployのところにある「Deploy Blanch」ボタンを押すと、ログがガーッと書かれてデプロイされる。
スクリーンショット 2018-04-30 18.40.34.png

正常に完了すると「view」ボタンが出てくるので、それを押すと
デプロイされたアドレスに飛べる。
スクリーンショット 2018-04-30 18.43.20.png

スクリーンショット 2018-04-30 19.50.54.png

デプロイ自動化

「Enable Automatic Deploy」を押すとGitHubのmasterが更新された時に、
自動で更新をかけてくれる。

#まとめ
個人でも、簡単なWEBサービス、プロトタイプを作れる時代なんだと強く感じました。

現時点での疑問点

・自動でデプロイした時に、データベースとかはきちんと保存されるのかな?
・デプロイ失敗した場合は前のソースのままかな?
・herokuのデータベースの中身をエクセルみたいにみれるソフトないかな、というかherokuのデータベースはどうやってみるんだ。。。

23
26
0

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
23
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?