116日目：Herokuへのデプロイに向けての準備（一部ファイル内容の変更）：Prepare for Deployment

Udemy講座最後の仕上げは、WebアプリをHerokuにデプロイする下準備です。今までローカルホストでのみ表示していた実験的な文字の消去、新規ファイルproduction.jsonの作成、そしてHerokuにデプロイする準備として複数ファイルを書き換えました。

【私も学習中のUdemy講座の公式HPはこちら⇒】世界最大級のオンライン学習サイトUdemy

①新規ファイル作成 config/production.json

今回は、default.jsonと全く同じ内容をコピペしています。

{
  "mongoURI": "",
  "jwtSecret": "mysecrettoken",
  "githubClientId": "",
  "githubSecret": ""
}

②.gitignoreにconfig/default.jsonの情報を書き足す

タイトルどおりなのですが、.gitignoreの2行目にconfig/default.jsonと書き足します。

③package.jsonにpost build scriptを書き足す

Herokuにデプロイするにあたって、package.jsonにheroku-postbuildの情報をpost build scriptを使用して書き足しています。

scriptの部分に以下のようにコーディングしました。

 ”scripts":{
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},

④server.js上の不要な情報の削除

localhost:5000を見た時に、アプリが問題なく動いていれば、画面上に「API running」と表示されるように設定していたのですが、Herokuにデプロイするためその表示は不要、ということで削除しました。

現在使用している教材と学習時間：116日目の学習時間1.5時間：進捗状ほぼ約100％
Udemy：MERN Stack Front To Back: Full Stack React, Redux & Node.js by Brad Traversy

★Section12：Prepare & Deploy

69. Prepare for Deployment

(最後のSection13は予め完了）

進捗状況：ほぼ100％

学習時間：1.5時間

【私も学習中のUdemy講座の公式HPはこちら⇒】世界最大級のオンライン学習サイトUdemy