アンチリーチ者には注意してください。この記事は一般人によって書かれていることを忘れてください。プロジェクトのソースコードは提供されていませんが、アイデアは提供されています。独立した思考！独立した思考！独立した思考！参照プロジェクトは最後に配置されており、ソースコードを直接取得するよりも、それに従う方が効率的です。スプレー/Heraku を使用したくない場合は、右上隅をクリックしますか? これは Heroku にデプロイされています (0-0 を使用します)。気に入らない場合はスプレーしないでください。

いこうよおおおお～！

Heroku にサインアップする

まず第一に、科学的にインターネットをサーフィンする必要があります。
第二に、Outlook メールボックスまたは Google メールボックスが必要です。登録では携帯電話番号の位置が確認されないため、Outlook を使用するのが最善です。最初の疑問が生じます
。という質問が表示されますが、拒否します。ロボットの検証では画像が表示されず、デフォルトでロボットであることが設定されます。
これは、ブラウザにインストールする必要があるプラグインが不足しているためです。

解決

ファイアフォックスグーグル

登録が成功すると電子メールが送信され、リンクをクリックして確認し、ログインします。

ここでは Heroku が無料サーバーをキャンセルしており、サーバー APP プロジェクトを作成するにはVISA クレジットカードをバインドする必要があります。作成後、 Web サイトのドメイン名が付属します。これは変更できます。

インターフェースは次のとおりです

~~(持っていない場合は、淘宝網を見つけるか (推奨されません)、両親の名前で 2 番目のカードを申請してください)~~

ベースコードを変更する

自分で書いたプロジェクトで、フロントエンドとバックエンドが分かれている場合は、フロントエンド（クライアント）をバックエンド（api）のフォルダにドラッグ＆ドロップで後続の操作ができない場合は、権限を変更して
、クライアントフォルダに直接移動してアクセス許可を変更します。セキュリティグループ内のすべてのアクセス許可を変更します。ユーザーはフルコントロールを持ちます。

バックエンド API で変更されるファイル (主にこれら 2 つのpackage.json とindex.js)に注意してください。

package.json ノード -> ノードと新しいスクリプト heroku-postbuild

  "name": "api",
  "homepage": "获得的网址",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "heroku-postbuild": "cd client && npm install && npm run build"
  }

Index.js リソースパスは間違って書かないでください。ここに書き込まないとリソースが見つからず、ページが空白になります。

app.use(express.static(path.join(__dirname,'/client/build')));
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname+'/client/build/index.html'));
  });
app.listen(process.env.PORT || 5000,async ()=>{
    console.log("Backend is running-")
})

config.jsをクライアントフォルダーに追加します

新しい axios ルートを作成した後、axiosInstance はaxios が元々使用されていたすべての場所を置き換えます。ここでの変更はコード内で完全に変更する必要があり、ローカルバックエンド http://localhost:5000 が使用される場所も置き換えられます。新しい URL で。

import axios from "axios";

export const axiosInstance = axios.create({
    baseURL:"新的网址"
})

また、空白ページが再び表示されるのを防ぎます

client/public/index.html に<script type="text/babel"></script> を追加します。

<script type="text/babel"></script>
<noscript>You need to enable JavaScript to run this app.</noscript>

正式展開

git をインストールします。インストールされていない場合は、インストールする必要があります。github アカウントをお持ちでない場合でも問題ありません。ここに、Heraku をインストールするためのリモート Heroku へのローカルリンクがあります
。インストーラーを直接使用するとエラー率が最も低くなります公式ウェブサイト

ローカルコードリポジトリの作成を開始する

git init
git add .
git commit -am "1234" //当代码有变化的时候保存之后再用这个重新提交 必须命名commit不然提交失败

Heroku の操作

登录 输入Heroku注册时使用的 邮箱 密码
heroku login -i
远程连接你的app
heroku git:remote -a 创建的app名字
推送代码部署
git push heroku master

アプリ接続が確立された後にローカルウェアハウスが確立され、ローカルウェアハウスが削除されて新しいウェアハウスが作成されると、以前に接続されていたリモートアプリに接続できなくなることに注意してください。デフォルトで 1 つにバインドされているため、変更されません。アプリプロジェクトを削除して、もう一度お試しください。

プロンプトメッセージの長いリストが表示され始めた

気にしないで、下の看板を見てください

成功して URL が表示されると、ビルドは成功しますが、デプロイメントは成功しない可能性があります。バックエンドは成功しても、フロントエンドリンクがリソースパスに接続できない可能性があります。ここでエラーの使用法を参照してください

heroku logs --tail

Google Baidu に質問することもできます。現時点で、私が遭遇した落とし穴は本当に運が悪いです 0-0!

めまいがするほど投げて、ついにインターフェースを表示することに成功しました！0-0 ヒヒ、国内外から訪問できます...

料金は月額7ドルですか？お金がなくて静的なインターフェイスだけを作りたい人は、Vercel/Render を使用できます。

私の成功インターフェイス!

参照された github リンク/その他の参照されたリンク:

Xiaoqiu以外はYoutubeに動画があります！連絡して返金してください!

将来的にフルスタックのプロジェクトを実行したい場合は、時間の多い期間を見つけて自分で実行するのが最善です。これは私の宿題（すでに提出済み）であり、慎重に時間を費やしませんでしたその後、Netease Cloud や Weather などの API にアクセスして、パスワードの暗号化と復号化機能を追加し、データ入力を検証して攻撃を防ぎ、完全なゲームセクションにアクセスする必要があるかもしれません。ファイルアップロードのバックグラウンドにアクセスしたり……

これは後回しですが、短期クラッシュプロジェクトは本当にライフを消費するので、多くは言いません、先に寝ます。

React+Node.js のフロントエンドとバックエンドの分離プロジェクトを Heroku にうまくデプロイするにはどうすればよいですか?

Heroku にサインアップする

ベースコードを変更する

正式展開

おすすめ