作ったアプリを公開してみよう【Heroku編】

この章のゴール

Herokuを使い、作ったアプリをインターネット上に公開する

作ったアプリを公開しよう

アプリ作成お疲れ様でした。

最後の仕上げに、作ったアプリをネットに公開してみましょう!

公開する理由は2つあります。

  1. 面談時に面接官に見せられるため
  2. デプロイの経験を積む

①面談時に面接官に見せられるため

面談時には、ポートフォリオの提出が未経験からエンジニアとして働くためには必要です。

ポートフォリオがあれば、自分がどれくらい真剣にプログラミングの勉強をしてきたかの証明になります。

それを面接官に見せる時にパソコンを持っていくわけにはいきませんよね?

なので、ネット上に公開しておき誰でもいつでも見れる状態にしておくんです。

②デプロイの経験を積む

デプロイとは?

アプリケーションを本稼働させることです。

本稼働とは、公開用のサーバーを用意し、そのサーバーにアプリをインストールし稼働させることです。

難しいこと書いてすみません。用語を使って正確に説明するとこのようになります。

用は、インターネットに繋がってる人であれば誰でもアプリを使うことができる状態にする、と思っておけばいいでしょう。

例えば、みなさん使ってるTwitter、あれはネットに繋がっていれば誰でも使えるので「デプロイされた状態」だと言えますね。

そんなにビビらなくてもOKです。

あまり難しい作業はしません。

1つずつ確実にこなしていきましょう。

Heroku(ヘロク)

今回は、デプロイを簡単に行えるサービス「Heroku」を使います。

Herokuとは?

PaaS(Platform as a Service)

[chat face=”object_115.png” name=”” align=”left” border=”gray” bg=”gray” style=”maru”]PaaS??[/chat]

アプリを動かすためのデータベースや、プログラムの実行環境が用意されているサービスのこと。

あまり詳しく書いても難しので、アプリをネットに公開するにはHerokuってサービスを使うと便利、くらいの認識でいましょう。

アカウント登録

Herokuに登録します。

Heroku 公式サイト

無料で使えます。

公式サイトにアクセスしたら、画面右上の「新規登録」もしくは「Sign Up」からアカウント登録画面へ行きます。

このような画面になるので、必要事項を入力します。

会社名は入力不要なので、空白でOKです。

役職は「学生」

主な使用言語は「Ruby」を選択制てください。

私はロボットではありません。の部分にチェックをいれ、「無料アカウント作成」ボタンをクリックしてください。

この画面が出るので、メールを確認してください。

メールの以下のURLをクリックしてください。

パスワードを設定します。

パスワードを入力し、「パスワードを設定しログインする」をクリック。

画面の通りに進みます。

するとこの画面がでるはずです。 

ここまでできたら、Herokuへの登録は完了です。

Heroku CLIのインストール

次に、自分のパソコンからHerokuを操作できるように、「heroku toolbalt」というツールをインストールします。

このツールをインストールすることによって、パソコンからコマンドの操作だけでデプロイしたりサーバーの設定を変更したりすることができるようになります。

$ brew install heroku/brew/heroku

これで準備ができました。

Herokuにログイン

Herokuにログインします。以下のコマンドを打ってください。

$ heroku login
heroku: Press any key to open up the browser to login or q to exit:

すると、何かボタンを押してと表示がでるので、Enterを押しましょう。

すると、勝手にブラウザが開きこのような画面になるでの、「Log in」をクリックして必要情報を入力しましょう。

ターミナルに以下の文言が出ていたら正常にログインできてます。

Logging in... done
Logged in as (あなたが登録したメールアドレス)

デプロイの準備

今回のアプリ作成では「sqlite」というデータベースを使っていましたが、Herokuでは対応していないため「PostgreSQL」(通称ポスグレ)というデータベースを使います。

まず、Gemfileを編集していきます。

今のGemfileはこうなっていると思います。

(上の部分は省略)

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of chromedriver to run system tests with Chrome
  gem 'chromedriver-helper'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

この部分に3行追記します。

(上の部分は省略)

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of chromedriver to run system tests with Chrome
  gem 'chromedriver-helper'
end

group :production do
  gem 'pg'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

 

次に、データベースの利用設定を変更します。以下のようにGemfileに書き加えてください。

変更前

gem "sqlite3"

変更後

gem "sqlite3", group: :development

書き換えが完了したら、以下のコマンドを打ちます。

$ bundle install

次に、データベースの設定ファイル(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

変更後

# 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
  adapter: postgresql
  encoding: unicode
  pool: 5
  database:[あなたのアプリのデータベース名]

 

ここまでできたら、一旦これまでの変更をGitHubにプッシュしましょう。

HerokuにPushする

まず、Herokuでアプリケーションを作成します。

$ heroku create
Creating app... done, ⬢ warm-caverns-****

これを行うと、自分のアプリを稼働させるためのサーバーをHerokuが自動で作ってくれます。

そしたらこのコマンドを打ちます。

$ git push heroku master

次に以下のコマンドで、Heroku上のデータベースにテーブルやカラムを設定します。

$ heroku run rails db:migrate

アプリの確認

以下のコマンドを打つと、Herokuのアプリをブラウザで確認できます。

$ heroku open

アプリケーションのURLを直接打ち込んでも、ブラウザから確認できます。

おめでとうございます!

これで、最後の難関「アプリの公開」が完了しました。

お疲れ様でした!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA