[Express]HerokuにMERNスタックアプリケーションを配備する

1.Heroku加入後にHeroku CLIをインストールする

Heroku Download Link
端末でHerokuバージョンを確認して、ダウンロードしたかどうか見てみましょう.
heroku -v

2. heroku login

heroku login
端末にheroku loginを入力した後、ブラウザに移動してログインします.

3. heroku create

heroku createを入力するとurlが2つあります.

1つ目はアプリケーションのurlで、アプリケーションに接続できます.
2つ目はプロジェクトのHerokuストレージアドレスです

4.npmとノードバージョンの指定

node -v
npm -v
nodeとnpmバージョンを確認します.

package.jsonでengineはnodeとnpmバージョンを指定します.

5.reactアプリケーションを本番モードに設定する

本番モードでreactアプリケーションを使用するには、アプリケーションを構築する必要があります.
クライアントフォルダに移動した後、リアクションアプリケーションを構築します.
cd client
npm run build
クライアントにコンストラクションフォルダを作成し、コンストラクションを完了します.

Productionモードでは、このbuildフォルダのファイルのみを使用して操作します.
サーバのインデックスです.jsに次のコードを追加します.

if(process.env.NODE_ENV === "production"){
    app.use(express.static("client/build"));
    
    app.get("*", (req, res) => {
        res.sendFile(path.resolve(__dirname, "../client", "build", "index.html"));
    });
}

Herokuはclient/buildフォルダを表示します.
ルートフォルダのパッケージもあります.jsonのスクリプトに次のコードを追加します.

"heroku-postbuild":"NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"

上のコードを追加し、クライアントフォルダ構築アプリケーションに自動的にアクセスします.

6.生産モードの環境変数を設定する

//key.js
if(process.env.NODE_ENV === 'development'){
    //development Mode
    module.exports = require('./dev')
}else{ 
    //production Mode
    module.exports = require('./prod');
}

//prod.js
module.exports = {
    mongoURI:process.env.MONGO_URI
}

configのkey.jsは、生産モードでは、Prodファイルの表示が許可されているため、HerokuのMONGO URI環境変数にMongoDBアドレスを追加する必要があります.

Herokuがリリースするアプリケーション-Settingsへ

Reveal Config Varsを開き、MongoDBアドレスを追加します.

[原句]最後!Git pushプロジェクト

herokuの導入に入ると、heroku gitメソッドが表示されます.
clone
heroku login
git init
heroku git:clone-a(herokuプロジェクト名)
commit & push
再配置時も同様!
git add .
git commit -am "make it better"
git push heroku master
押し上げられなければ.
git push heroku HEAD:master
押す時間が少し長いので、落ち着いて待っていてください!

Pushが完了したら、出力のURIを接続すればよい.配備完了!
ソース:Herokuサービスを使用してMERNスタックアプリケーションを導入