react部署在node

In this tutorial we will be doing a basic React + Node app deploy to Heroku.

在本教程中，我們將進(jìn)行基本的React + Node應(yīng)用程序部署到Heroku。

There are a lot of tutorials that do this only using the command line, so to change things up a bit, I will do it completely without the command line.

有很多教程僅使用命令行來執(zhí)行此操作，因此，要稍微改變一下內(nèi)容，我將完全不用命令行來執(zhí)行此操作。

For things like generating React and Express apps, we have no choice but to use the command line. For everything else we'll use a GUI.

對(duì)于生成React和Express應(yīng)用程序之類的事情，我們別無選擇，只能使用命令行。 對(duì)于其他所有內(nèi)容，我們將使用GUI。

I also assume you have a Github and Heroku account. They are both free, so no worries about signing up.

我還假設(shè)您有一個(gè)Github和Heroku帳戶。 它們都是免費(fèi)的，因此無需擔(dān)心注冊(cè)。

sample project:https://github.com/iqbal125/react-express-sample

示例項(xiàng)目： https ： //github.com/iqbal125/react-express-示例

React和快速設(shè)置 (React and Express Setup)

First, let's start by creating two directories named Server and Client.

首先，讓我們開始創(chuàng)建兩個(gè)名為Server和Client的目錄。

The Client directory will hold the contents of the create-react-app command, and Server will hold the contents of the express command. This library just creates a simple Express app for us automatically, similar to create-react-app. It needs to be installed globally, which you can do so with the command:

Client目錄將保存create-react-app命令的內(nèi)容，而Server將保存express命令的內(nèi)容。 這個(gè)庫只是為我們自動(dòng)創(chuàng)建一個(gè)簡單的Express應(yīng)用，類似于create-react-app 。 它需要全局安裝，您可以使用以下命令進(jìn)行安裝：

npm install -g express-generator

npm install -g express-generator

After this, simply run these commands in each of the respective directories to install the starter projects:

之后，只需在每個(gè)相應(yīng)的目錄中運(yùn)行以下命令來安裝入門項(xiàng)目：

npx create-react-app app1 in the Client directory

客戶端目錄中的npx create-react-app app1

express in the Server directory

express在服務(wù)器目錄

Change to the app1 directory generated by create-react-app and run:

轉(zhuǎn)到由create-react-app生成的app1目錄，然后運(yùn)行：

npm run build

npm run build

This will generate a production build version of the project that is optimized for a production deployment, with things like the error handling code and white space removed. ?

這將生成該項(xiàng)目的生產(chǎn)構(gòu)建版本，該版本針對(duì)生產(chǎn)部署進(jìn)行了優(yōu)化，并刪除了錯(cuò)誤處理代碼和空白。

Note: In a development build you would use a proxy to http://localhost:5000 to communicate from your React app to your Express server, but here the React app and the Express server are just one project. The Express server serves the React files.

注意：在開發(fā)構(gòu)建中，您將使用http：// localhost：5000的代理從您的React應(yīng)用程序與Express服務(wù)器進(jìn)行通信，但是在這里，React應(yīng)用程序和Express服務(wù)器只是一個(gè)項(xiàng)目。 Express服務(wù)器提供React文件。

Next, cut and paste the entire build directory into the Server directory. Your project structure should look like this:

接下來，將整個(gè)構(gòu)建目錄剪切并粘貼到Server目錄中。 您的項(xiàng)目結(jié)構(gòu)應(yīng)如下所示：

We can now add some code to let our Express server know to serve our React project.:

現(xiàn)在，我們可以添加一些代碼來讓Express服務(wù)器知道為我們的React項(xiàng)目提供服務(wù)：

....app.use(express.static(path.join(__dirname, 'build')));app.get('/*', (req, res) => {res.sendFile(path.join(__dirname, 'build', 'index.html')); });....

The first line of code serves all our static files from the build directory.

第一行代碼為構(gòu)建目錄中的所有靜態(tài)文件提供服務(wù)。

The second piece of code is to keep our client side routing functional. This code essentially serves the index.html file on any unknown routes. Otherwise we would need to rewrite our entire routing to work with this Express server setup.

第二段代碼是保持我們的客戶端路由功能正常。 此代碼本質(zhì)上在任何未知路由上提供index.html文件。 否則，我們將需要重寫整個(gè)路由以與此Express服務(wù)器設(shè)置一起使用。

To test your app, just run npm start in the Server directory and go to http://localhost 3000 in the browser. Then you should be see your running React app.

要測試您的應(yīng)用，只需在Server目錄中運(yùn)行npm start并在瀏覽器中轉(zhuǎn)到http：// localhost 3000 。 然后，您應(yīng)該會(huì)看到正在運(yùn)行的React應(yīng)用程序。

Now we are ready to upload this project to GitHub.

現(xiàn)在，我們準(zhǔn)備將這個(gè)項(xiàng)目上傳到GitHub。

的GitHub (GitHub )

Instead of using the command line to upload to GitHub, we will do this with the GUI. First, go to the GitHub homepage and create a new repository. Name it whatever you want, but make sure the Initialize this Repository with a README option checked:

我們將使用GUI來執(zhí)行此操作，而不是使用命令行將其上傳到GitHub。 首先，轉(zhuǎn)到GitHub主頁并創(chuàng)建一個(gè)新的存儲(chǔ)庫。 將其命名為任意名稱，但請(qǐng)確保選中了使用README初始化此存儲(chǔ)庫選項(xiàng)：

Next upload all the project files without the node_modules directory.

接下來，上載所有沒有node_modules目錄的項(xiàng)目文件。

Click commit and we are done. Your uploaded project files will appear on GitHub like so:

單擊提交，我們就完成了。 您上傳的項(xiàng)目文件將出現(xiàn)在GitHub上，如下所示：

Now we can move on to setting up Heroku.

現(xiàn)在我們可以繼續(xù)設(shè)置Heroku。

Heroku (Heroku)

Go to the Heroku dashboard, create a new app, and name it whatever you like.

轉(zhuǎn)到Heroku儀表板，創(chuàng)建一個(gè)新應(yīng)用，然后根據(jù)需要命名。

Next, go to the Deploy tab and select GitHub under Deployment method:

接下來，轉(zhuǎn)到Deploy選項(xiàng)卡，然后在Deployment method下選擇GitHub：

If you haven't connected your GitHub account to your Heroku account yet, you will be prompted through the GitHub Auth flow.

如果尚未將GitHub帳戶連接到Heroku帳戶，則將通過GitHub Auth流程提示您??。

After this, search for your project on GitHub and connect to it:

之后，在GitHub上搜索您的項(xiàng)目并連接到它：

Finally, we can just deploy our app by clicking the Deploy Branch button:

最后，我們可以通過單擊Deploy Branch按鈕來部署我們的應(yīng)用程序：

Heroku will install all the Node modules for you automatically. You can view your project by clicking on the View button.

Heroku將自動(dòng)為您安裝所有Node模塊。 您可以通過單擊查看按鈕來查看您的項(xiàng)目。

And that's it, we're done! Thanks for reading.

就是這樣，我們完成了！ 謝謝閱讀。

Connect with me on Twitter for more updates on future tutorials: https://twitter.com/iqbal125sf

在Twitter上與我聯(lián)系以獲取未來教程的更多更新： https ： //twitter.com/iqbal125sf

翻譯自: https://www.freecodecamp.org/news/deploy-a-react-node-app-to/

react部署在node

總結(jié)

以上是生活随笔為你收集整理的react部署在node_如何在没有命令行的情况下在3分钟内将React + Node应用程序部署到Heroku的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。