HerokuCLIのインストールとherokuアプリケーションの作成
  • 2019.08.04に公開
  • 2019.10.12に更新
  • SPA開発
  • 2. 開発環境を整える
  • No.4 / 4
「SPA開発」では、Nuxt.js v2.14未満が使用されています。 Nuxt.jsはv2.13~14で大きなバージョンアップがありました。それに伴い、書き方も大きく変化しています。 v2.14以上で書かれた「SPA開発」の続編は、カテゴリー「 Udemy 」 で公開しています。

前回までのおさらい

  1. Railsをインストールしました

    macにRailsをゼロからインストールする

  2. RailsプロジェクトをGitで管理をする設定を行いました。

    Rails apiモードのプロジェクトを作成し、Gitにコミットする

  3. BitbucketにRailsプロジェクトをアップしました。

    Bitbucketに公開鍵を追加し、Railsプロジェクトをpushする

今回は本番環境で使うherokuの導入です。

これでチャプター「開発環境を整える」は完了とします。

それでは進めていきましょう。

この記事で達成すること

今回はherokuCLIを導入して、herokuにRailsプロジェクトを表示するアプリケーションを作成していきます。

herokuCLIとは、herokuの操作をターミナル上で行えるようにする便利なツールです。

以下の手順で進めていきます。

  1. herokuCLIのインストール
  2. herokuCLIのセットアップ
  3. herokuアプリケーションの作成
  4. アプリケーションの名前を変更

herokuにユーザー登録する

まずは何がなくともherokuに登録しておいてください。

わからない項目はGoogle翻訳を使うと便利です。

signup - heroku

herokuCLIのインストール

herokuCLIはHomebrewでインストールしていきます。

Homebrewのインストールがまだの方はこちらの記事を参考してください。

macにRailsをゼロからインストールする

このコマンドでバージョンが表示されていればインストールできています。

$ brew -v

herokuCLIのインストール

ターミナルで以下のコマンドを実行してください。実行ディレクトリはどこでもOKです。

最新のコマンドはここにあります。

The Heroku CLI -heroku

$ brew tap heroku/brew && brew install heroku

インストールの確認しておきましょう。

$ heroku --version

# バージョンが表示されたらインストール成功です。
heroku/7.25.0 darwin-x64 node-v11.14.0

Warning: heroku update available from 7.25.0 to 7.27.1.このような表示が出たらupdateしておきましょう。

$ heroku update

herokuCLIのセットアップ

herokuにログイン

インストールが完了したら、herokuにログインします。

$ heroku login

「loginするには任意のキーを押せ」と言われるのでEnterを押します。

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

ブラウザのログイン画面に飛ばされるので、メールアドレスとパスワードでログインを行ってください。

ログインに成功するとこのような画面になります。

2019-08-03 21-25-25

ターミナル上でログインを完結するにはコマンドオプションを付けます。

$ heroku login --interactive

さて、ターミナルに戻りましょう。

herokuにSSHキーを追加する

この記事で作成した公開鍵をherokuにも追加します。

Bitbucketに公開鍵を追加し、Railsプロジェクトをpushする

$ heroku keys:add

.sshディレクトリにkeyが複数ある場合は下記のように聞かれます。

id_rsa.pubを選択してください。

? Which SSH key would you like to upload? 
❯ /Users/ユーザー名/.ssh/aws_id_rsa.pub 
  /Users/ユーザー名/.ssh/id_rsa.pub 

SSHキーが追加できたか確認しておきましょう。

$ heroku keys

# SSHキーの一部が表示されます。
ssh-rsa AAAA...BBBB

herokuのアプリケーションを作成する

Railsプロジェクトに移動する

Railsプロジェクトに移動します。(ディレクトリパスはご自身のものに置き換えてください)

$ cd rails/myapp8

アプリケーションを作成する

heorkuに新しいアプリケーションを作成しましょう。

$ heroku create

表示されたURLにアクセスしてください。

このアプリケーション上にRailsプロジェクトが乗っかります。

2019-08-03 21-46-36

このURLに自分のRailsアプリケーションを表示することができます。

これでインターネット上に公開する準備は整いました。

herokuアプリケーションの名前を変更する

herokuは、アプリケーションの名前を好きなものに変更することができます。

名前を変更すると、".herokuapp.com"以前のURLが変更されます。

今回は「spa-myapp8」としました。

$ heroku rename spa-myapp8

アプリケーションの名前は重複が許されません。下のように出た場合は他の名前を指定してください。

Name myapp is already taken

新しいURLにアクセスしてみましょう。先ほどと同じ画面が出るはずです。

herokuアプリを独自ドメインで表示するには?

長くなったのでこちらの記事にまとめました。

herokuに独自ドメインを設定しSSL化する方法を画像で分かりやすく

さて次回は

これでRailsプロジェクトを公開する土台が作成できました。

次回のチャプターはRailsをHerokuにデプロイするです。

herokuのセットアップをし、インターネット上にRailsプロジェクトを表示していきます。

お楽しみに!!

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
SPA開発の投稿
1
  • 更新情報
  • /
  • #01
「Rails apiとNuxt.jsでSPA開発」のデモアプリを開発中...。【2020/05/19追記: このカテゴリーの更新を一旦終了といたします】
1
  • 今回作るアプリケーション
  • /
  • #01
Railsアプリの完成イメージ画像と作ろうと思った経緯
2
  • 今回作るアプリケーション
  • /
  • #02
今回作るRailsアプリの全体像と機能の整理
1
  • 開発環境を整える
  • /
  • #01
macにRailsをゼロからインストールする
2
  • 開発環境を整える
  • /
  • #02
Rails apiモードのプロジェクトを作成し、Gitにコミットする
3
  • 開発環境を整える
  • /
  • #03
Bitbucketに公開鍵を追加し、Railsプロジェクトをpushする
4
  • 開発環境を整える
  • /
  • #04
HerokuCLIのインストールとherokuアプリケーションの作成
1
  • RailsをHerokuにデプロイする
  • /
  • #01
Herokuのデータベース設定と開発に便利なgemを導入する
2
  • RailsをHerokuにデプロイする
  • /
  • #02
HerokuにPumaを導入するためのRailsセットアップ
3
  • RailsをHerokuにデプロイする
  • /
  • #03
Railsに"Hello"を表示してHerokuへデプロイする
1
  • RailsとNuxt.jsを共存させる
  • /
  • #01
【RailsとNuxt.jsの共存】Rails上にNuxt.jsのプロジェクトを構築しよう
2
  • RailsとNuxt.jsを共存させる
  • /
  • #02
Nuxt.jsからRailsへ、初めてのapi通信でHelloを表示しよう
3
  • RailsとNuxt.jsを共存させる
  • /
  • #03
Nuxt.jsにVuetify2.0を導入してFont Awesomeもインストールするぜ
4
  • RailsとNuxt.jsを共存させる
  • /
  • #04
初めてのRailsApiアプリの公開。Herokuにデプロイする準備と実際のデプロイまで
1
  • データベース設計
  • /
  • #01
データベースを正規化する前に、会計システムの勘定科目データを整理する
2
  • データベース設計
  • /
  • #02
会計システムのデータベース設計に挑む
1
  • バージョンアップ情報
  • /
  • #01
【ご報告】Nuxt.jsを2.10.2にバージョンアップしました
2
  • バージョンアップ情報
  • /
  • #02
【ご報告】Railsを6.0.0にバージョンアップしました
1
  • Userモデル開発
  • /
  • #01
本番環境と開発環境でRailsのSeedデータを切り替える
2
  • Userモデル開発
  • /
  • #02
Railsにユーザーテーブルを作成する【テーブル確認コマンド】
3
  • Userモデル開発
  • /
  • #03
【Rails】EachValidatorクラスを使ったEmailカスタムバリデーション【lib以下読み込み】
4
  • Userモデル開発
  • /
  • #04
【Rails】エラーメッセージの日本語化【i18nとja.ymlのセッティング】
5
  • Userモデル開発
  • /
  • #05
【Rails】開発・テスト・本番環境の全てにユーザーSeedデータ投入する
6
  • Userモデル開発
  • /
  • #06
【Rails】ユーザーモデルのバリデーションをテストする
1
  • ログイン周りのレイアウト設計
  • /
  • #01
【Nuxt.js】ログインフラグでレイアウトを切り替えるテクニック【2019/12/07追記あり】
2
  • ログイン周りのレイアウト設計
  • /
  • #02
【Nuxt.js】ウェルカムページのレイアウト構築【sassの導入】
3
  • ログイン周りのレイアウト設計
  • /
  • #03
【Nuxt.js】ログイン周りの入力フォームコンポーネント設計【2019/12/07追記あり】
4
  • ログイン周りのレイアウト設計
  • /
  • #04
【Nuxt.js】会員登録フォームを構築してサインアップページを完成させる
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。