web-dev-qa-db-ja.com

MERNスタックをホスティングサービスにデプロイする方法は?

私は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 startnodemon server.js(apiフォルダーから)を実行し、ターミナルのmongodbに接続することで、ローカルホストでプロジェクトを実行できます。以前と同じ方法でホスティングサービスから実行しようとすると、データベースに接続できないと表示されます。これは、私のマシンで接続が開いていないためと考えられます。

現在、すべてのAPI呼び出しは http:// localhost:4000 / へのaxiosポストを使用しています。これは、サーバーで機能しないことも想定しています。 MERNスタックのデプロイに関する情報をオンラインで探しましたが、見つかったものはすべて、AWS EC2でのホスティングに関してそれについて説明していますが、これは私が行うことではありません。

ホスティングサービスにデプロイするにはどうすればよいですか?この情報を探す必要のある参照や場所はありますか?

編集:MongoAtlasを使用してデータベースに接続したので、SRVアドレスを使用しています。サーバー上のアプリはローカルマシンでnodemonを実行している場合にのみ機能するため、問題はlocalhostアドレスを使用するaxios投稿にあると思います。これの代わりにどのアドレスを使用すればよいですか?

5
Meghan King

フロントエンドでは、実行環境に基づいて正しいURLを指すaxios構成をセットアップする必要があります。

tils/axiosConfig.jsappという名前を使用して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",
  },
1
Matt Carlotta

ええ、はい、ホスティング(既に確立されています)にサービスを展開する必要があります。あなたがそこに調べることができる複数の解決策がありますデジタルオーシャンこれらのいくつかのリンクを見てください

製品用にnodejsアプリをセットアップする方法

buntuにmongodbをインストールする方法

Herokuもあります。そのための完全なチュートリアルがここにあります

Mernスタックの準備と展開

私が言ったように、これら以外にも複数の解決策があります。お役に立てれば

0
Jazib