摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文今天，我們將探討部署我們的應(yīng)用所涉及的不同部分，以便外界可以使用我們的應(yīng)用。今天我們將專注于讓我們的應(yīng)用準(zhǔn)備好部署。將一切視為一個(gè)模塊包括像這樣的圖像資產(chǎn)。在本章的其余部分我們將討論這一權(quán)力的各個(gè)方面。

本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3803
原文：https://www.fullstackreact.com/30-days-of-react/day-27/

今天，我們將探討部署我們的應(yīng)用所涉及的不同部分，以便外界可以使用我們的應(yīng)用。

我們的應(yīng)用通過(guò)這一點(diǎn)進(jìn)行了測(cè)試, 現(xiàn)在是時(shí)候讓它起來(lái)為世界而活。本課程的其余部分將致力于將我們的應(yīng)用部署到生產(chǎn)中。

在談到部署時(shí), 我們有很多不同的選擇:

主機(jī)

部署環(huán)境配置

持續(xù)集成 (簡(jiǎn)稱 CI)

成本周期、網(wǎng)絡(luò)帶寬成本

包大小

更多

我們將看看不同的托管選項(xiàng), 明天看看部署我們的react應(yīng)用的一些不同的方法, 我們部署我們的應(yīng)用。今天, 我們將專注于讓我們的應(yīng)用準(zhǔn)備好部署。

首先, 我們需要在 web 應(yīng)用中處理一些自定義, 所以我們需要在目錄的根中運(yùn)行 npm run eject 命令。這是一個(gè)永久性的動(dòng)作,現(xiàn)在這只是意味著我們將負(fù)責(zé)處理我們的應(yīng)用結(jié)構(gòu)的自定義 (沒有我們的方便create-react-app的幫助)。

這是我 總是 說(shuō), 做一個(gè)備份副本的應(yīng)用。我們不能從 ejecting返回, 但我們可以恢復(fù)到舊代碼。

我們可以通過(guò)運(yùn)行由create-react-app結(jié)構(gòu)生成器提供的彈出命令來(lái) _彈出_:

npm run eject

在 ejecting 的create-react-app結(jié)構(gòu)中, 我們將看到我們的應(yīng)用根目錄中有很多新文件在config/ 和 scripts/ 目錄。npm run eject 命令創(chuàng)建了它在內(nèi)部使用的所有文件, 并在我們的應(yīng)用中為我們編寫了所有的文檔。

create-react-app`生成器的關(guān)鍵方法稱為webpack, 它是一個(gè)模塊打包器/生成器。

Webpack 是一個(gè)大社區(qū)的用戶模塊打包器, 成噸的插件正在積極開發(fā), 有一個(gè)聰明的插件系統(tǒng), 是令人難以置信的快速, 支持熱代碼重裝, 和更多的多。

雖然我們沒有真正調(diào)用它之前, 我們一直在使用 webpack 這整個(gè)時(shí)間 (在npm start 的幌子下)。如果沒有 webpack, 我們就不可能只寫import , 并期望我們的代碼加載。它的工作原理像這樣, 因?yàn)?webpack "看到"import 的關(guān)鍵字, 并且知道我們需要在應(yīng)用運(yùn)行時(shí)可以訪問(wèn)路徑上的代碼。

Webpack 為我們照顧熱加載, 幾乎自動(dòng), 可以加載和打包許多類型的文件包, 它可以以邏輯方式拆分代碼, 以便支持延遲加載和收縮用戶的初始下載大小。

這對(duì)我們是有意義的, 因?yàn)槲覀兊膽?yīng)用越來(lái)越大, 更復(fù)雜, 重要的是要知道如何操縱我們的構(gòu)建工具。

例如, 當(dāng)我們要部署到不同的環(huán)境..。首先, 對(duì) webpack 的一個(gè)微小的介紹, 它是什么以及它是如何工作的。

當(dāng)我們運(yùn)行 npm start 查看生成的文件之前我們彈出的應(yīng)用,我們可以看到它為瀏覽器服務(wù)兩個(gè)或更多的文件。第一個(gè)是index.html 和bundle.js.。webpack 服務(wù)器負(fù)責(zé)將bundle.js.插入index.html , 即使我們不在index.html 文件中加載我們的應(yīng)用。

bundle.js 文件是一個(gè)巨大的文件, 包含我們的應(yīng)用需要運(yùn)行的 所有 的 JavaScript 代碼, 包括依賴和我們自己的文件。Webpack 有它自己的方法包裝文件在一起, 所以當(dāng)看原始的源碼它看起來(lái)有點(diǎn)有趣。

Webpack 已經(jīng)對(duì)所有包含的 JavaScript 進(jìn)行了一些轉(zhuǎn)換。值得注意的是, 它使用Babel以 ES5-compatible 的格式轉(zhuǎn)換我們的 ES6 代碼, 。

如果您查看 app.js,的注釋頭, 它有一個(gè)數(shù)字 "254":

/* 254 */
/*!********************!*
  !*** ./src/app.js ***!
  ********************/

模塊本身封裝在一個(gè)類似如下的函數(shù)中:

function(module, exports, __webpack_require__) {
  // The chaotic `app.js` code here
}

我們的 web 應(yīng)用的每個(gè)模塊都用這個(gè)簽名封裝在一個(gè)函數(shù)里面。Webpack 已經(jīng)給我們的每個(gè)應(yīng)用的模塊這個(gè)功能容器以及模塊 ID (在app.js的情況下, 254)。

但是這里的 "模塊" 不限于 ES6 模塊。

Remember how we "imported" the makeRoutes() function in app.js, like this:請(qǐng)記住, 我們是如何在app.js"導(dǎo)入" makeRoutes()函數(shù)的, 如下所示:

import makeRoutes from "./routes"

這里的變量聲明的makeRoutes 看起來(lái)像在混亂的app.js Webpack 模塊:

var _logo = __webpack_require__(/*! ./src/routes.js */ 255);

他看起來(lái)很奇怪, 主要是因?yàn)?Webpack 為調(diào)試目的提供的在線評(píng)論。刪除該注釋:

var _logo = __webpack_require__(255);

我們有簡(jiǎn)單的舊 ES5 代碼, 而不是import 語(yǔ)句。

現(xiàn)在, 在這個(gè)文件中搜索./src/routes.js 。

/* 255 */
/*!**********************!*
  !*** ./src/routes.js ***!
  **********************/

請(qǐng)注意, 它的模塊 ID 是 "255", 相同的整數(shù)傳遞給上面的 __webpack_require__。

Webpack 將 一切 視為一個(gè)模塊, 包括像logo.svg這樣的圖像資產(chǎn)。我們可以通過(guò)在logo.svg模塊的混亂中挑選出一條路徑來(lái)了解發(fā)生了什么。您的路徑可能不同, 但它看起來(lái)像這樣:

static/media/logo.5d5d9eef.svg

如果您打開一個(gè)新的瀏覽器標(biāo)簽并插入這個(gè)地址 (您的地址將是不同的... 匹配為您生成的文件 webpack 的名稱):

http://localhost:3000/static/media/logo.5d5d9eef.svg

你應(yīng)該得到的React Logo:

因此, Webpack 為 logo.svg 創(chuàng)建了一個(gè) Webpack 模塊, 它指的是 Webpack 開發(fā)服務(wù)器上的 svg 路徑。由于這種模塊化范例, 它能夠智能地編譯如下語(yǔ)句:

import makeRoutes from "./routes"

進(jìn)入這 ES5 聲明:

var _makeRoutes = __webpack_require__(255);

我們的 CSS 資產(chǎn)呢？是的, 一切 是 Webpack 的一個(gè)模塊。搜索字符串./src/app.css:

Webpack 的index.html 沒有包含任何對(duì) CSS 的引用。這是因?yàn)?Webpack 是通過(guò)bundle.js包括我們的 CSS 在這里。當(dāng)我們的應(yīng)用加載時(shí), 這個(gè)神秘的 Webpack 模塊函數(shù)將app.css 的內(nèi)容轉(zhuǎn)儲(chǔ)到頁(yè)面上的style 標(biāo)簽中。

因此, 我們知道 _什么 正在發(fā)生: Webpack 已經(jīng)卷起每一個(gè)可以想象的 "模塊" 為我們的應(yīng)用進(jìn)入bundle.js "。你可能會(huì)問(wèn): 為什么？

第一個(gè)動(dòng)機(jī)是普遍的 JavaScript 包。Webpack 已經(jīng)將我們所有的 ES6 模塊轉(zhuǎn)換為自己定制的 ES5-兼容 模塊語(yǔ)法。正如我們簡(jiǎn)要介紹的, 它將我們所有的 JavaScript 模塊封裝在特殊功能中。它提供了一個(gè)模塊 ID 系統(tǒng), 使一個(gè)模塊能夠引用另一個(gè)。

Webpack 和其他打包器一樣, 將我們所有的 JavaScript 模塊整合到一個(gè)文件中。它 可能 將 JavaScript 模塊放在多帶帶的文件中, 但是這需要比create-react-app提供更多的配置。

然而, Webpack 比其他打包器更重視這個(gè)模塊范例。正如我們所看到的, 它適用于圖像資產(chǎn), CSS 和 npm 包 (如React和 ReactDOM) 相同的模塊化處理。這種模塊化范式釋放了大量的力量。在本章的其余部分, 我們將討論這一權(quán)力的各個(gè)方面。

復(fù)雜, 對(duì)不對(duì)？
如果你不明白這一點(diǎn)沒關(guān)系建立和維護(hù) webpack 是一個(gè)復(fù)雜的項(xiàng)目, 有大量的移動(dòng)部件, 它往往需要即使是最有經(jīng)驗(yàn)的開發(fā)商而 "得到"。
我們將遍歷我們將使用我們的 webpack 配置的不同部分,。如果它感覺壓倒性, 只是堅(jiān)持我們的基礎(chǔ)上, 其余的將遵循。

隨著我們對(duì) Webpack 內(nèi)部運(yùn)作的新認(rèn)識(shí), 讓我們把注意力轉(zhuǎn)向我們的應(yīng)用。我們將對(duì)我們的 webpack 構(gòu)建工具進(jìn)行一些修改, 以支持多種環(huán)境配置。

當(dāng)我們準(zhǔn)備好部署一個(gè)新的應(yīng)用時(shí), 我們必須考慮一些我們?cè)陂_發(fā)應(yīng)用時(shí)不必關(guān)注的事情。

例如, 假設(shè)我們正在請(qǐng)求 api 服務(wù)器的數(shù)據(jù)...... 在開發(fā)此應(yīng)用時(shí), 我們可能會(huì)在本地計(jì)算機(jī)上運(yùn)行 API 服務(wù)器的開發(fā)實(shí)例 (可通過(guò)localhost訪問(wèn))。

當(dāng)我們部署應(yīng)用時(shí), 我們希望從外部主機(jī)請(qǐng)求數(shù)據(jù), 很可能不在發(fā)送代碼的位置上, 所以localhost 只是不能做到。

我們能夠處理配置管理的一種方法是使用 .env文件 。這些 .env 文件將包含不同的變量, 為我們不同的條件, 但仍然提供了我們處理配置的正常方式的一種方式,。

通常情況下, 我們將在根目錄中保留一個(gè).env 文件, 以包含一個(gè) 全局 配置, 可以在每個(gè)基礎(chǔ)上按條件將其重寫。

讓我們安裝一個(gè)稱為dotenv的npm 程序包, 以幫助我們進(jìn)行此配置設(shè)置,

npm install --save-dev dotenv

dotenv 庫(kù)幫助我們將環(huán)境變量加載到我們的環(huán)境中的應(yīng)用的 ENV 中。

添加 .env 到我們的.gitignore 文件通常是一個(gè)好主意, 所以我們不簽入這些設(shè)置。
傳統(tǒng)上, 創(chuàng)建一個(gè) .env 文件的示例版本是一個(gè)好主意,。例如, 對(duì)于我們的應(yīng)用, 我們可以創(chuàng)建一個(gè)名為.env.example的必須變量。
稍后, 另一個(gè)開發(fā)人員 (或我們, 幾個(gè)月后) 可以使用 .env.example 文件作為.env文件應(yīng)該是什么樣的模板。

這些.env 文件可以包含變量, 就好像它們是 unix 樣式的變量一樣。讓我們創(chuàng)建一個(gè)全局的變量APP_NAME 設(shè)置為30days:

touch .env
echo "APP_NAME=30days" > .env

讓我們?yōu)g覽到爆炸的config/ 目錄, 在那里我們將看到為我們寫的我們所有的構(gòu)建工具。我們不會(huì)查看所有這些文件, 但是為了了解 什么 的情況, 我們將開始查找config/webpack.config.dev.js。

此文件顯示了用于構(gòu)建我們的應(yīng)用的所有 webpack 配置。它包括裝載、插件、入口點(diǎn)等。對(duì)于我們當(dāng)前的任務(wù), 要查找的行是在 plugins 列表中定義 DefinePlugin():

module.exports = {
  // ...
  plugins: [
    // ...
    // Makes some environment variables available to 
    // the JS code, for example:
    // if (process.env.NODE_ENV === "development") {
    //  ... 
    // }. See `env.js` 
    new webpack.DefinePlugin(env),
    // ...
  ]
}

webpack.DefinePlugin 插件采用了一個(gè)帶有 "鍵" 和 "值" 的對(duì)象, 并在我們的代碼中找到了我們使用"鍵"的所有位置, 并將它替換為值。

例如, 如果 env 對(duì)象看起來(lái)像:

{
  "__NODE_ENV__": "development"
}

我們可以在我們的源使用變量__NODE_ENV__ , 它將被替換為 "development"， 即:

class SomeComponent extends React.Component {
  render() {
    return (
      
Hello from {__NODE_ENV__}
    )
  }
}

render()函數(shù)的結(jié)果會(huì)說(shuō) "Hello from development"。

要將我們自己的變量添加到我們的應(yīng)用中, 我們將使用這個(gè)env 對(duì)象, 并添加我們自己的定義。向上滾動(dòng)到文件頂部, 我們將看到它當(dāng)前是從 config/env.js 文件中創(chuàng)建和導(dǎo)出的。

看著 config/env.js 文件, 我們可以看到, 它將所有的變量都放在我們環(huán)境, 并將NODE_ENV添加到環(huán)境中, 以及任何以 REACT_APP_為前綴的變量。

// ...
module.exports = Object
  .keys(process.env)
  .filter(key => REACT_APP.test(key))
  .reduce((env, key) => {
    env["process.env." + key] = JSON.stringify(process.env[key]);
    return env;
  }, {
    "process.env.NODE_ENV": NODE_ENV
  });

我們可以跳過(guò)該操作的所有復(fù)雜部分, 因?yàn)槲覀冎恍枰薷牡诙€(gè)參數(shù)以減少函數(shù), 換句話說(shuō), 我們將更新對(duì)象:

{
  "process.env.NODE_ENV": NODE_ENV
}

該對(duì)象是歸并函數(shù)的_初始_對(duì)象。reduce函數(shù)將所有以REACT_APP_為前綴的變量_合并_到此對(duì)象中,所以我們總是在我們的源代碼中替換process.env.NODE_ENV 。

基本上我們要做的是:

加載我們的默認(rèn).env文件

加載任何環(huán)境的.env文件

將這兩個(gè)變量以及任何默認(rèn)變量（如NODE_ENV）合并在一起

我們將創(chuàng)建一個(gè)包含所有環(huán)境變量的新對(duì)象，并對(duì)每個(gè)值進(jìn)行清理。

更新現(xiàn)有環(huán)境創(chuàng)建者的初始對(duì)象。

讓我們忙吧 為了加載.env文件，我們需要導(dǎo)入dotenv包。 我們還將從標(biāo)準(zhǔn)節(jié)點(diǎn)庫(kù)導(dǎo)入path庫(kù)，并為路徑設(shè)置一些變量。

Let"s update the config/env.js file我們來(lái)更新config / env.js文件

var REACT_APP = /^REACT_APP_/i;
var NODE_ENV = process.env.NODE_ENV || "development";

const path = require("path"),
      resolve = path.resolve,
      join = path.join;

const currentDir = resolve(__dirname);
const rootDir = join(currentDir, "..");

const dotenv = require("dotenv");

要加載全局環(huán)境，我們將使用dotenv庫(kù)公開的config() 函數(shù)，并傳遞根目錄中加載的.env文件的路徑。 我們還將使用相同的功能在config/目錄中查找名稱為NODE_ENV.config.env.的文件。 此外，我們不希望這些方法之一出錯(cuò)，所以我們將添加一個(gè)silent: true 的附加選項(xiàng)，以便如果找不到該文件，則不會(huì)拋出異常。

// 1. Step one (loading the default .env file)
const globalDotEnv = dotenv.config({
  path: join(rootDir, ".env"),
  silent: true
});
// 2. Load the environment config
const envDotEnv = dotenv.config({
  path: join(currentDir, NODE_ENV + `.config.env`),
  silent: true
});

接下來(lái), 讓我們將所有這些變量串聯(lián)在一起, 并在這個(gè)對(duì)象中包括我們的 NODE_ENV 選項(xiàng)。Object.assign() 方法創(chuàng)建一個(gè) 新 對(duì)象, 并從右向左合并每個(gè)對(duì)象。這樣, 環(huán)境配置變量

const allVars = Object.assign({}, {
  "NODE_ENV": NODE_ENV
}, globalDotEnv, envDotEnv);

使用當(dāng)前的設(shè)置, allVars 變量的外觀將如下所:

{
  "NODE_ENV": "development",
  "APP_NAME": "30days"
}

最后, 讓我們創(chuàng)建一個(gè)將這些變量放在 process.env 中的對(duì)象, 并確保它們是有效的字符串 (使用JSON.stringify)。

const initialVariableObject =
  Object.keys(allVars)
  .reduce((memo, key) => {
    memo["process.env." + key.toUpperCase()] = 
      JSON.stringify(allVars[key]);
    return memo;
  }, {});

使用我們當(dāng)前的設(shè)置（在根目錄中有.env文件），這將創(chuàng)建initialVariableObject 為以下對(duì)象：

{
  "process.env.NODE_ENV": ""development"",
  "process.env.APP_NAME": ""30days""
}

現(xiàn)在, 我們可以使用這個(gè) initialVariableObject 作為原始module.exports 的第二個(gè)參數(shù)。讓我們更新它以使用這個(gè)對(duì)象:

module.exports = Object
  .keys(process.env)
  .filter(key => REACT_APP.test(key))
  .reduce((env, key) => {
    env["process.env." + key] = JSON.stringify(process.env[key]);
    return env;
  }, initialVariableObject);

現(xiàn)在, 我們的代碼中的任何位置都可以使用我們?cè)?.env 文件中設(shè)置的變量。

由于我們正在向我們的應(yīng)用中的離線站點(diǎn)發(fā)出請(qǐng)求, 讓我們使用我們的新配置選項(xiàng)來(lái)更新此主機(jī)。

假設(shè)默認(rèn)情況下, 我們希望將 TIME_SERVER 設(shè)置為 http://localhost:3001，這樣, 如果在環(huán)境配置中不設(shè)置TIME_SERVER ，它將默認(rèn)為本地主機(jī)。我們可以通過(guò)將TIME_SERVER 變量添加到全局 "。

讓我們更新 .env 文件, 使其包括此時(shí)間服務(wù)器:

APP_NAME=30days
TIME_SERVER="http://localhost:3001"

現(xiàn)在, 我們已經(jīng)開發(fā)的 "開發(fā)" 與服務(wù)器托管在 heroku。我們可以設(shè)置我們的config/development.config.env 文件, 以設(shè)置 TIME_SERVER 變量, 它將覆蓋全局項(xiàng):

TIME_SERVER="https://fullstacktime.herokuapp.com"

現(xiàn)在, 當(dāng)我們運(yùn)行npm start時(shí), 任何出現(xiàn)的process.env.TIME_SERVER 將被替換為優(yōu)先值。

讓我們更新我們的src/redux/modules/currentTime.js 模塊來(lái)使用新的服務(wù)器, 而不是我們以前使用的硬編碼的。

// ...
export const reducer = (state = initialState, action) => {
  // ...
}

const host = process.env.TIME_SERVER;
export const actions = {
  updateTime: ({timezone = "pst", str="now"}) => ({
    type: types.FETCH_NEW_TIME,
    meta: {
      type: "api",
      url: host + "/" + timezone + "/" + str + ".json",
      method: "GET"
    }
  })
}

現(xiàn)在, 對(duì)于我們的生產(chǎn)部署, 我們將使用 heroku 應(yīng)用, 因此, 讓我們?cè)?b>config/下創(chuàng)建development.config.env 的一份拷貝為production.config.env 。

cp config/development.config.env config/production.config.env

我們?cè)趹?yīng)用中使用了自定義日志再現(xiàn)中間件。這對(duì)于在我們的開發(fā)站點(diǎn)上工作是非常棒的, 但是我們并不希望它在生產(chǎn)環(huán)境中處于活動(dòng)狀態(tài)。

讓我們更新我們的中間件配置, 在開發(fā)時(shí)只使用日志中間件, 而不是在所有環(huán)境中。在我們的項(xiàng)目的src/redux/configureStore.js 文件中, 我們用一個(gè)簡(jiǎn)單的數(shù)組加載了我們的中間件:

let middleware = [
  loggingMiddleware,
  apiMiddleware
];
const store = createStore(reducer, applyMiddleware(...middleware));

現(xiàn)在, 我們?cè)谖覀兊奈募杏辛?process.env.NODE_ENV , 我們可以更新middleware 數(shù)組, 這取決于我們正在運(yùn)行的環(huán)境。讓我們更新它, 如果我們?cè)陂_發(fā)環(huán)境中只添加日志記錄,:

let middleware = [apiMiddleware];
if ("development" === process.env.NODE_ENV) {
  middleware.unshift(loggingMiddleware);
}

const store = createStore(reducer, applyMiddleware(...middleware));

現(xiàn)在, 當(dāng)我們運(yùn)行應(yīng)用的開發(fā), 我們將有loggingMiddleware 設(shè)置, 而在任何其他環(huán)境中, 我們已經(jīng)禁用它。

今天是一個(gè)漫長(zhǎng)的, 但明天是一個(gè)激動(dòng)人心的一天, 因?yàn)槲覀儗⒌玫綉?yīng)用和運(yùn)行在遠(yuǎn)程服務(wù)器上。

今天的工作很棒, 明天見!