react部署在node

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

在本教程中，我們將進行基本的React + Node應用程序部署到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.

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

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.

對于生成React和Express應用程序之類的事情，我們別無選擇，只能使用命令行。 對于其他所有內容，我們將使用GUI。

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

我還假設您有一個Github和Heroku帳戶。 它們都是免費的，因此無需擔心注冊。

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

示例項目： https ： //github.com/iqbal125/react-express-示例

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

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

首先，讓我們開始創建兩個名為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命令的內容，而Server將保存express命令的內容。 這個庫只是為我們自動創建一個簡單的Express應用，類似于create-react-app 。 它需要全局安裝，您可以使用以下命令進行安裝：

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:

之后，只需在每個相應的目錄中運行以下命令來安裝入門項目：

npx create-react-app app1 in the Client directory

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

express in the Server directory

express在服務器目錄

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

轉到由create-react-app生成的app1目錄，然后運行：

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. ?

這將生成該項目的生產構建版本，該版本針對生產部署進行了優化，并刪除了錯誤處理代碼和空白。

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.

注意：在開發構建中，您將使用http：// localhost：5000的代理從您的React應用程序與Express服務器進行通信，但是在這里，React應用程序和Express服務器只是一個項目。 Express服務器提供React文件。

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

接下來，將整個構建目錄剪切并粘貼到Server目錄中。 您的項目結構應如下所示：

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

現在，我們可以添加一些代碼來讓Express服務器知道為我們的React項目提供服務：

....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.

第一行代碼為構建目錄中的所有靜態文件提供服務。

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.

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

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.

要測試您的應用，只需在Server目錄中運行npm start并在瀏覽器中轉到http：// localhost 3000 。 然后，您應該會看到正在運行的React應用程序。

Now we are ready to upload this project to GitHub.

現在，我們準備將這個項目上傳到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來執行此操作，而不是使用命令行將其上傳到GitHub。 首先，轉到GitHub主頁并創建一個新的存儲庫。 將其命名為任意名稱，但請確保選中了使用README初始化此存儲庫選項：

Next upload all the project files without the node_modules directory.

接下來，上載所有沒有node_modules目錄的項目文件。

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

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

Now we can move on to setting up Heroku.

現在我們可以繼續設置Heroku。

Heroku (Heroku)

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

轉到Heroku儀表板，創建一個新應用，然后根據需要命名。

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

接下來，轉到Deploy選項卡，然后在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上搜索您的項目并連接到它：

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

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

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

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

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上與我聯系以獲取未來教程的更多更新： https ： //twitter.com/iqbal125sf

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

react部署在node