node.js、express、handlebarsを使ってウェブサーバーの立ち上げからページの制作までをやってみた - ３ herokuへのデプロイ

3259 ワード
Heroku HerokuCLI Express Node.js Handlebars Node.js テキストリンク

前回までで、nodeでのサーバ立ち上げ、expressとhbsでのページ制作、ディレクトリのセットアップまで終わったので、いよいよサーバーにて公開じゃ。
今回は、nodeサイトに対応しているherokuへアップするぞ。
ftpとかzipじゃくて、Githubと同じように、コマンドラインからpushコマンドで、アプするのじゃ。
アカウントを持ってなければ、ただで作ると良いぞ。

アカウントが作れたら、コマンドラインからherokuにアクセス出来るように、heroku cliをダウンロードしましょう。
ダウンロードできたら、確認。 

$ heroku -v
 ›   Warning: heroku update available from 7.52.0 to 7.54.1.
heroku/7.52.0 linux-x64 node-v12.21.0

-vオプションで、バージョンが返ってくれば、無事にインストールできてるよ。
そして、コマンドラインからログイン。 

$ heroku login

次に、Github同様SSHキーを、herokuに登録。

$ heroku keys:add

で、次にheroku上にプロジェクトディレクトリを制作。 

$ heroku create yourapp   // yourappの所は、自分の作ったサイト名、またはアプリの名前に。
Creating ⬢ myapp... done
https://yourapp.herokuapp.com/ | https://git.heroku.com/yourapp.git

そうすると、以下のメッセージが表示される。
https://myapp.herokuapp.com/ はライブURL。ここに作ったサイトをデプロイするぞ。
https://git.heroku.com/myapp.git は、gitのレポジトリで、データが保存される。
herokuにアプする前に、幾つかデータを書き換えておこう。
まずは、package.json。herokuに、コアファイルのapp.jsを実行するように設定する。 

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

ここを、こういう風に書き換える。

  "scripts": {
    "start": "src/app.js"
  },

そして、ポート番号を変える。

app.js
const port = process.env.PORT || 3030;

app.listen(port, ()=>{
    console.log(`server running on Port:${port}`);
})

で、最後にデータをherokuにpush

$ git push heroku main

で、アプ完了！
先ほどの https://yourapp.herokuapp.com/ にアクセスすると、サイトが表示されるはずじゃ。
これで、nodeをインストールしてから、サイトを作ってherokuにデプロイするまでが終わったよ。
次は時間あれば、nodeでapiを叩いてデータを取ってくる流れを説明しようと思っとる。
そろそろバイトの時間じゃ。
じゃあの。