Hello, Web3 World!!

Herokuを使ったアップロード

目次 [hide]

ウェブアプリをお手軽にアップロード可能な「Heroku」というサービス使って、ここまで作成したミントアプリを公開する手順を解説していきます。

Herokuの登録

まずはHerokuログインページ にアクセスしましょう。

すでにアカウントを持っている方はそのままログインし、初めて利用する方は右下の「Sign Up」から新規登録へ進んでください。

Image from Gyazo

必要事項を入力して「CREATE FREE ACCOUNT」をクリックすると登録したメールアドレスにすぐにメールが届きます。

Image from Gyazo

リンクからHerokuページに戻って、パスワードを設定したら登録は完了です!

Herokuアプリケーションの作成

Herokuログイン後のトップ画面に「Create new app」というボタンがあるのでそちらをクリックしましょう。

Image from Gyazo

「App name」はHeroku内で重複NGなので、他の人が使っていない名前を設定する必要があります。使用済みの場合はエラー表示がでるので、いくつか入力してみて被りのない名前を設定しましょう。

Image from Gyazo

「Create app」をクリックするとアプリケーションが作成され、以下のような画面が表示されます。ここで設定したアプリケーション名は後で使うので控えておきましょう。

Image from Gyazo

HerokuCLIのインストール

コマンドラインツールからHerokuを扱えるよう、HerokuCLIというツールをインストールしていきます。

Windows

The Heroku CLI にアクセスして、「64-bit installer」「32-bit installer」のうち、お手元のPC環境にあったものをダウンロードしてください。

インストーラを実行して画面に表示された手順通りインストールすればOKです。

Image from Gyazo

Mac

VSCodeのターミナルを開いて、以下のコマンドを実行してください。コマンド入力後、しばらく待つだけでOKです。

$ brew tap heroku/brew && brew install heroku

ログイン

VSCodeのターミナルを開いて、以下のコマンドを実行してください。

$ heroku login

以下のようなメッセージが表示されたら「q」以外のキーを入力しましょう。

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

ブラウザが立ち上がり、ログイン画面が表示されたらHerokuにログインします。

Image from Gyazo

ターミナルに戻って以下のメッセージが表示されていれば、無事ログイン完了です!

Logging in... done
Logged in as xxxxx@xxxx

デプロイ

デプロイとは、作成したプログラムを実行できる状態で展開することを意味し、今回このデプロイ作業を行うことでミントWebアプリを公開して誰でも実行可能な状態にします。

yarn.lockファイルの削除

まずはじめに、Herokuにデプロイする際のエラーを回避するために、ファイルを削除しておきます。VSCodeのファイル一覧の中からyarn.lockというファイルを右クリック >「削除」を選択すればOKです。

Image from Gyazo

Gitリポジトリの設定

Herokuにデプロイするために、Gitというバージョン管理ツールを使っていきます。

まずは「リポジトリ」と呼ばれるファイルを保存するための場所を用意するために、以下のコマンドを実行しましょう。すでにGitでコードを管理している場合はスキップしてください。

$ git init

続いて作成したリポジトリを、Heroku内のGitと紐付けてます。以下のコマンドを実行してください。

$ heroku git:remote -a アプリケーション名

デプロイ作業

Herokuのデプロイは、手元にあるコードの中身をHerokuのGitへ送ることで自動で動作します。具体的な手順としては以下の3つのコマンドを1つずつ実行すればOKです。

1度デプロイした後に手元でコードを変更した場合も、3つのコマンドを実行すれば最新の状態に更新されるので、忘れずに実行しましょう。

$ git add .
$ git commit -am "create minting dapp"
$ git push heroku master 

最後のコマンド実行後、しばらく待つ必要がありますが、以下のようなメッセージが表示され、コンソール出力が止まればデプロイ完了です。

   ︙
remote: Verifying deploy... done.
To https://git.heroku.com/hashlips-munakata.git
   68036c7..5ccb30d  master -> master

最後に以下のコマンドを実行するとブラウザが立ち上がり、デプロイしたミントサイトが表示されます。

$ heroku open

コマンドを実行するのが面倒な場合は、https://[アプリケーション名].herokuapp.com/というURLにアクセスすれば直接開けるので、そちらもお試しください。

以上です!