web-dev-qa-db-ja.com

Apache WebサーバーにReactアプリをデプロイする方法

基本的なReactアプリを https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm から作成しました。Apacheベースのサーバーでこのテストコードを実行します。配布可能なビルドを作成する必要があることは知っていますが、その方法を理解できず、明確な指示を見つけることができませんでした。

私はこの投稿を見ました React、js on Apache server しかし、それはいくつかのガイドライン以上のものはありません

明確なポインタまたは指示でガイドできる場合は感謝します。追伸Apacheの仕組みはPHP開発者であることがわかります

javascriptapachereactjs
29
vishal dharankar

最終的にそれを理解することができた、私はそれが私のような誰かを助けることを願っています。
次は、指定されたdist dirと出力ファイルを確認するようにWebパックの構成ファイルがどのように見えるかです。 distディレクトリのパスを指定する方法がありませんでした

const webpack = require('webpack');
const path = require('path');
var config = {
    entry: './main.js',

    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index.js',
    },

    devServer: {
        inline: true,
        port: 8080
    },
    resolveLoader: {
        modules: [path.join(__dirname, 'node_modules')]
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',

                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
}

module.exports = config;

次に、パッケージjsonファイル

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --progress",
    "production": "webpack -p --progress"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    "express": "^4.13.3",
    "webpack": "^1.9.6",
    "webpack-devserver": "0.0.6"
  }
}

スクリプトセクションとプロダクションセクションに注意してください。プロダクションセクションは、最終的なデプロイ可能なindex.jsファイルを提供します（名前は何でもかまいません）

物事はあなたのコードとコンポーネントに依存します

次の一連のコマンドを実行します

npmインストール

これにより、すべての依存関係が取得されます（ノードモジュール）

それから

npm run production

これにより、バンドルされているすべてのコードを含む最終的なindex.jsファイルが取得されます。

完了したら、index.htmlおよびindex.jsファイルをwww/htmlまたはWebアプリのルートディレクトリに配置します。これですべてです。

30
vishal dharankar

まず、packages.jsonフォルダーに移動して、実際のドメインアドレスに一致する次のコード行を追加します。

"homepage": "https://yourwebsite.com/afolder/",

次に、プロジェクトフォルダーのターミナルに移動して、次のように入力します。

npm run build

プロジェクトのフォルダー構造にbuildフォルダーがあることがわかります。

Filezillaを使用してサーバーにアップロードするのはその1つだけです。

24
aldobsom

投稿で述べたように、Reactはブラウザーベースのテクノロジーです。 HTMLドキュメントのビューのみをレンダリングします。

「React App」にアクセスできるようにするには、次のことが必要です。

  1. Reactアプリをバンドルにバンドルします
  2. Apacheがサーバーのhtmlファイルを指し、外部からのアクセスを許可するようにします。

ここにすべての情報があります： https://httpd.Apache.org/docs/trunk/getting-started.html Apacheサーバーの場合、そしてここでjavascriptバンドルを作成します https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr

6
Remi Marenco

Npmビルドを作成する前に、
1）Reactプロジェクトのルートフォルダーに移動し、package.jsonを開きます。
2）「homepage」属性をpackage.jsonに追加します

  • 提供したい場合 絶対の 道

    "homepage": "http://hostName.com/appLocation",
"name": "react-app",
"version": "1.1.0",

  • 提供したい場合 相対的 道

    "homepage": "./",
"name": "react-app",

    相対パス方式を使用すると、IDEの構文検証エラーが警告される場合があります。しかし、ビルドはコンパイル中にエラーなしで行われます。

3）package.jsonを保存し、ターミナルでnpm run-script buildを実行します
4）build/フォルダーの内容をサーバーディレクトリにコピーします。

PS：サーバー内のビルドファイルの場所を頻繁に変更する場合、相対パスを使用するのは簡単です。

3
kavinda

Apacheプロキシを介して実行できますが、仮想ディレクトリで実行する必要があります（例 http：//mysite.something/myreactapp ）。

これは一種の冗長に思えるかもしれませんが、Reactアプリの一部ではない他のページ（たとえばPHPページ）がある場合は、ポート80を介してすべてを提供し、全体がまとまりのあるWebサイトです。

1.）npm run、またはノードサーバーを起動するために使用しているコマンドで、reactアプリを起動します。 http://127.0.0.1:808 で実行されていると仮定します

2.）httpd-proxy.confを編集して追加します：

ProxyRequests On
ProxyVia On
<Proxy *>
  Order deny,allow
  Allow from all
  </Proxy>

ProxyPass /myreactapp http://127.0.0.1:8080/
ProxyPassReverse /myreactapp  http://127.0.0.1:8080/

3.）Apacheを再起動します

2
Peter Drinnan