チュートリアル:私はHerokuで生産に私の反応アプリを展開する方法

9530 ワード
react heroku javascript tutorial テキストリンク

Create-react-app and Heroku 非常に性能の高いアプリケーションを構築するための素晴らしいツールですが、反応とHerokuのドキュメントは、Herokuに反応生産ビルドを展開する方法についてはほとんど情報がありません.私はHerokuに簡単な生産準備のアプリを展開を介してご案内いたします.これらの手順は、任意の反応アプリのために動作しますcreate-react-app .

ステップ1:反応アプリを作成します
まず、反応アプリを生成する反応生成ツールを使用して作成する必要があります.ノードとNPMを最初にインストールしていることを確認してください.
端末では、次のように入力して新しい反応アプリを生成するhello-world あなたのアプリケーション名を使って):
$ npx create-react-app hello-world 
$ cd hello-world
開けるhello-world あなたの好みのテキストエディタのリポジトリ.あなたが原子を使用しているならば、単にタイプatom . 端末でレポを開く.ここにrepoのようなものがあります.
hello-world
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

ステップ2:パブリックフォルダに自分のアプリのアイコンを追加
任意のPNGをfaviconに変換することができます.icoファイルはこちらhttps://www.favicon-generator.org/
次に、既存のfaviconを削除します.パブリックフォルダからのICOファイルで、あなた自身のfaviconを加えます.パブリックフォルダへのICOファイル.あなた自身のアイコンを追加しない場合は、アプリは反応のアイコンにデフォルトになります.

ステップ3:あなたの生産ビルドを提供するためにエクスプレスJSサーバーを作成します
リポジトリで、サーバーと呼ばれるファイルを作成します.js
touch server.js
サーバで.以下のコードをコピーします.
//server.js
const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.ico'));
// the __dirname is the current directory from where the script is running
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
 return res.send('pong');
});
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);
このコードは、ミニ/Ulilified JSに対応できる特別なノードJSサーバーを作成します.pingは、サーバーが動作していることをテストするために使用できる無意味なパスです.
あなたが加えることを確認してくださいexpress , express-favicon , and path 依存関係について:
yarn add express express-favicon path
あなたのpackage.json ファイルを変更start 次のスクリプトを実行します.
start: "node server.js"

ステップ4:反応生成ビルドを作成します
Herokuは、ビルド時に自動的にビルドコマンドを実行しますが、ビルドする前にローカルビルドをテストするのは良いアイデアです.
このコマンドを端末で実行することでローカルビルドを作成できます.
yarn build
その後、実行yarn start ローカルで生産サーバーを起動します.

ステップ5 :ソースコードの展開を防ぐ
リポジトリで、ファイルを作成します.env :
touch .env
次に、次の.env ソースマップが生成されるのを防ぐファイル.
#.env
GENERATE_SOURCEMAP=false
ソースマップを使用すると、デバッグ環境を簡単にする生産環境でソースコードにアクセスできます.しかし、ソースマップでは、パブリックから誰もソースコードを表示することができます.
注:あなたが持っているならばtrouble プロダクションの問題をデバッグするが、ソースコードを非公開にしたい場合は、別のブランチを作成し、.env ファイルを展開し、その分岐を秘密のHeroku URLに展開します.

ステップ6 : Herokuへの配備
Herokuアカウントを持っていない場合は、ここを作成してください.https://signup.heroku.com/
コマンドラインで次のコマンドを実行します.
heroku login
Herokuの資格情報を端末に入力する必要があります.いったんHerokuの資格情報を入力したら、次のようにして新しい配備されたアプリケーションを作成します.
heroku create sample-react-production-app
あなた自身のアプリケーション名でサンプル反応生成アプリを置き換えます.
次に、あなたのアプリケーションをHerokuにビルドします.
yarn install
git add . 
git commit -m "initial commit"
heroku git:remote -a sample-react-production-app
git push heroku master
これらのコマンドは依存関係をインストールし、Gitを初期化し、Herokuが主催するリモートリポジトリに接続します.
注意:既に実行する前にgitを初期化した場合heroku create [app-name] , その後、実行する必要はありませんheroku git:remote -a [app-name] .
おめでとう!今、あなたは反応ビルドを展開するすべての必要な手順を完了しました.アプリケーションを表示するには、次のコマンドを実行します.
heroku open
MySQL Clone Plugin
Heroku