前回までで、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を叩いてデータを取ってくる流れを説明しようと思っとる。
そろそろバイトの時間じゃ。
じゃあの。
↧