私はWeb開発に不慣れで、reactjs/nodeプロジェクトをデプロイしたいホスティングサービスがあります。以前にデプロイするには、npm run build
を実行して作成されたビルドフォルダーをアップロードするだけでした。それ以来、MERNスタックを使用してmongodbデータベースへの接続を追加しました。
プロジェクトは最初にcreate-react-appを使用して作成され、次にこのチュートリアルに従ってバックエンドノード/ mongodbをセットアップしました: https://appdividend.com/2018/11/11/react-crud-example-mern -stack-tutorial / 。すべてのサーバーコードは、apiフォルダーのプロジェクトフォルダーに含まれています。
npm start
、nodemon server.js
(apiフォルダーから)を実行し、ターミナルのmongodbに接続することで、ローカルホストでプロジェクトを実行できます。以前と同じ方法でホスティングサービスから実行しようとすると、データベースに接続できないと表示されます。これは、私のマシンで接続が開いていないためと考えられます。
現在、すべてのAPI呼び出しは http:// localhost:4000 / へのaxiosポストを使用しています。これは、サーバーで機能しないことも想定しています。 MERNスタックのデプロイに関する情報をオンラインで探しましたが、見つかったものはすべて、AWS EC2でのホスティングに関してそれについて説明していますが、これは私が行うことではありません。
ホスティングサービスにデプロイするにはどうすればよいですか?この情報を探す必要のある参照や場所はありますか?
編集:MongoAtlasを使用してデータベースに接続したので、SRVアドレスを使用しています。サーバー上のアプリはローカルマシンでnodemonを実行している場合にのみ機能するため、問題はlocalhostアドレスを使用するaxios投稿にあると思います。これの代わりにどのアドレスを使用すればよいですか?
フロントエンドでは、実行環境に基づいて正しいURLを指すaxios構成をセットアップする必要があります。
tils/axiosConfig.js(app
という名前を使用してexpress
とインラインに保つのが好きですが、任意の名前を付けることができます)
import axios from 'axios';
const env = process.env.NODE_ENV; // current environment
export const app = axios.create({
baseURL:
env === 'production'
? 'http://example.com/api/' // production
: 'http://localhost:5000/api/', // development
});
次に、API呼び出しを行う場所でこの構成を利用できます。
import { app } from '../utils/axiosConfig.js';
app.get("example");
app.post("example");
...etc
これで、http://localhost:5000/api/example
またはhttp://example.com/api/example
にリクエストを送信できます。
client
package.jsonでは、環境を指定できます。
"scripts": {
"start": "NODE_ENV=development webpack-dev-server",
"build": "NODE_ENV=production webpack",
"stage": "NODE_ENV=staging webpack",
"test": "NODE_ENV=testing jest --watchAll --coverage",
},
ええ、はい、ホスティング(既に確立されています)にサービスを展開する必要があります。あなたがそこに調べることができる複数の解決策がありますデジタルオーシャンこれらのいくつかのリンクを見てください
Herokuもあります。そのための完全なチュートリアルがここにあります
私が言ったように、これら以外にも複数の解決策があります。お役に立てれば