1
1

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 3 years have passed since last update.

Herokuを使ってみた

Last updated at Posted at 2020-04-26

#はじめに
適当にJSとかwebアプリケーションを勉強している学生が記録するために使っているので,あまり内容は期待しないでください。とりあえず今回はHTTPサーバをHerokuを使って公開してみます。

#1.Herokuとは
webサービスを動かせるプラットフォームを提供してるサービスらしい。小規模なら無料で使えるとのこと。

#2.Herokuのアカウント作成
とりあえずアカウント作成
https://jp.heroku.com/
でいろいろ個人情報を流出してきます。

ここで開発言語を選択するらしいですがまぁJS程度しかやってないのでNode.js一択ですね。

ドラえもんが引っかかってしまう私はロボットではありませんチャレンジをクリアしてメールアドレス認証。パスワード設定したら登録完了です。いやぁ非常にスムーズ,毎回どこかでつまづくんじゃないかと冷や冷やしながら登録してます。

#3.Heroku CLIをインストール
順番がゴチャゴチャしてきましたがherokuコマンドを利用しなきゃと思ったらHeroku CLIが必要らしい。まぁあるあるというか常識なのだろう。今回はUbuntuにインストールしちゃうのでiTerm2で仮想環境を起動するよ。

起動したところで
1.Virtual Box(バーチャルボックス)
2.Vagrant(ベイグラント)
という2つのソフトウェアを使った仮想環境でUbuntuを使用します。

vagrant up
vagrant ssh

Ubuntuがインストールされたディレクトリに移動。vagrant upは仮想的なPCにインストールされたUbuntuを起動するコマンドで,vagrant sshはVagrantの仮想マシンがセットされている状態でSSHに接続します。

仮装環境を起動して以下のコマンドを実行。

sudoは管理者として実行するコマンド。
snap install --classicはsnapパッケージのコマンドで,snappyというUbuntu向けに開発されたパッケージ管理システムの一部らしい。Snapには、ソフトウェアを隔離してセキュリティを高めるサンドボックス機能があるが,この制限をかけると使い勝手が悪くなるパッケージがあるので、 そのリスクを承知してインストールをするために –classic オプションを追加してます。

まぁそんなこんなでHeroku CLIがインストールされましたね。

#4.Heroku CLIからHerokuにログイン
というわけでHeroku CLI から Heroku にログイン。

コンソールで以上を記入してログインします。

#5.Herokuで実際にデプロイしてみる(失敗)
とりあえずコンソールで使用したいファイルのディレクトリに移動します。
cd node-js-http-3016
そして以下のコマンドでHeroku 上で動かすための設定ファイルを作成します。

node index.js" > Procfile

echoは文字をそのまま出力するコマンド。ProcfileはHerokuがアプリを動作する時Herokuのプラットフォーム上にあるWebアプリがどのようなコマンドで実行されるのかを記述するファイルのこと。Webアプリを動かす指示書みたいなものらしい。いろいろ書き方があるみたいだけどとりあえず割愛。

##はいここで問題発生
Herokuではサーバー上へソースコードを配置するためにGitを利用している!!!
そのため、Heroku での実行前にGitのリポジトリにコミットすることが必要!!!

......まぁやりますよ、知らなかった自分が悪い

いろいろ調べた結果gitとリポジトリを保存しているgithubを連携する必要があるらしい。今回はSSHを使うのでsshを追加した後,新しい公開鍵情報をコンソールに表示させ,それをコピー。githubの右上アイコンからsettingという項目を表示し,SSH and GPG keysを選択してnew ssh keyでssh keyを追加。この設定の時に先ほどの公開鍵情報が必要。
まぁそんなこんなで追加が無事終了し,これでGitHubとマシンがSSHを利用した暗号化通信ができるらしい。もうなんか細かいことはわからなくなってきた。

#6.試しにGithubからクローンをしてみる
作ってきたリポジトリのclone or downloadの欄をクリックしSSHのリンクをコピー
コンソールに

を記述。これでなんとかgithubからgitにクローンできた様子。さすがです

を行ったところエラーなども表示せず,Already up-to-dateという感じでできてるっぽい。

#今度こそ実際にデプロイ!!

これでサーバを用意して

master

以上でデプロイを実行!!

Verifying deploy.... done.

実行後にデプロイが完了したというお知らせ。まぁこれでなんとかデプロイできました。

実際のアプリケーションはというとなんか知らないけど問題がありそう。まぁそれについては今後考えます...とりあえずはお疲れ様でした

###おまけ1 : iTerm2とは
Terminal.appより簡単に便利な機能が使えるという噂のアプリ。実際のところTerminal.appすらまともに扱ったことがないので便利かどうかは不明。

###おまけ3 : Ubuntuとは
狭義ではカーネルに属すLinuxのOSとしての一つがUbuntu(Linuxディストリビュージョン)。PCとして使えたりする初心者におすすめしやすいものらしい(確証はないです)。

###おまけ2 : SSHとは
よく高校で使われるスーパーなんちゃらじゃない。どうやらSSHは一種の通信プロトコルらしい。

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?