LoginSignup
1
0

HerokuでWebアプリを公開してみようとするも途中で中断した話

Posted at

Herokuとは

Heroku はクラウドサービスの名前で自作のWEBアプリをネットで公開するための場所を提供しています。レンタルサーバーに似ていますが、HerokuはPaaS(Platform-as-a-Service)というサービスの一種でレンタルサーバーと違って、開発に必要な環境が全て揃った状態で場所を提供しているため、必要な言語のインストールやデータベースの設定などは自動で実行されるため手動での操作が短縮されます

結論(なぜ諦めたのか)

まず今回の目的は作成したToDoアプリをポートフォリオとして公開することでした。

会員登録を実施して、Herokuにデプロイするためコマンドを実行するところまで進みましたが、デプロイするためにはクレジットカード情報の登録が必要だというところに気がつき中断という残念な結果になりました

なぜHerokuだったのか

Herokuは永続的に無料で使用できる枠を提供しています。GoogleやGitHubも類似サービスを提供していますが、無料で使用できる枠はいずれも期間限定のためHerokuを採用しましたが、無料枠でも使用するためにはクレジットカード情報の登録が必要なようなので、一時中断しました

アカウント登録

アカウント登録したら規約に同意(Accept)してHerokuにデプロイできる状態になります

スクリーンショット 2023-05-16 10.27.32.png

チュートリアルに進む

Looking for help getting started with your language?
どの言語のサポートを希望なのか選択するようアイコンが並んでいるので、今回はPHPを選択しました

スクリーンショット 2023-05-16 10.33.00.png

日本語に切り替える

ここから日本語の案内を受けられるので、右上の切替リンクで切り替えてチュートリアルを開始します
スクリーンショット 2023-05-16 10.34.38.png

macOSでコマンドを実行する

著者の環境はMac OSなのでコマンドで必要なアプリケーションをインストールしました

スクリーンショット 2023-05-20 8.16.54.png

もしもMacOSでコマンドが失敗した場合は、​Homebrewというアプリがインストールされていない可能性があるのでインストールされていない場合はインストールをご検討する必要があると思います

コマンドでHerokuにログインする

heroku へログインするコマンドを実行すると
英文のメッセージで
「ログインする場合は何かキーを押す」
「終了したい場合はqキーを押す」
という指示が出ました。
適当に矢印キーを押すとブラウザ画面でHerokuのログインボタンが表示され
ボタンを押すことにより、ターミナル側でもログインが成功したメッセージが表示されました

スクリーンショット 2023-05-20 8.23.51.png

動作確認

php,composer,git これらが正常にインストールされているか確認のコマンドをするようチュートリアルに含まれていたので実行しました

スクリーンショット 2023-05-20 8.28.42.png

アプリをデプロイする

実際に作成したアプリケーションをWEB上に公開するためにデプロイ作業に移ります
チュートリアルではサンプルアプリが用意されており、練習することもできますが
すでにアプリを用意しているので実際にデプロイしてみました。

実際の手順はこちら

スクリーンショット 2023-05-20 8.56.19.png

  1. Gitのインストールと初期設定はすでに実行しているので飛ばします
  2. Heroku Gitリモートへの追加はherokuにコマンドでログインした状態で
    デプロイしたいプロジェクトのディレクトリにカレントディレクトリを移動します
  3. 次のコマンドを実行して、Herokuにアプリを置くディレクトリを作成します
     heroku create -a Herokuアプリ名
    
    『Herokuアプリ名』は他のユーザーと重複しない
    一意の名称が必要とのこと

この段階まで進みましたが、クレジットカード情報を登録していないため先に進めることができませんでした。

##GitHubなどではできなかったのか?

GitHubでも静的なサイトを公開することができるようでしたが、今回作成したアプリはデータベースと連携するToDoアプリだったので、無料でDBを提供していないGitHubでは今回の目的にあいませんでした。

次回の目標

次回はAWSを用いてWEBアプリの開発と公開までを最後まで実行できればと思います。

1
0
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
1
0