在生产中部署ReactJS应用程序（带有nodeJS后端） [英] Deploying ReactJS application in production (with nodeJS backend)
问题描述
我们的项目现已结束，我们只有两个星期的时间将项目退还给我们在大学学习的最后一年。我们的老师告诉我们，现在开发阶段已经结束，我们必须在生产阶段进行部署。
our project is now over, we only have two weeks to give back the project for our final year's studies at University. Our teacher told us that now that development phase was over we would have to go deploy it in production phase.
我们使用ReactJS作为前端（托管在localhost：// 3000）和用于服务器/数据库管理的NodeJS（托管在localhost：// 3004中）。
We used ReactJS for the frontend (hosted in localhost://3000) and NodeJS for server/database management (hosted in localhost://3004).
到目前为止，我已经对如何进行部署进行了一些研究（老师说，理想情况下，这是一个zip文件，我们可以将其插入到网页中，就像html一样，并且可以使用）。
I've done some research so far on how to deploy it (teacher said that ideally it was a zip that we can insert into a webpage, just like a html one, and that it would work).
到目前为止，我还没有做到这一点。很多人建议使用 webpack来管理它，但是我们一开始就没有配置它，因为我们对reactJS毫无头绪，而且我不知道我们现在是否可以这样做。我已经阅读了教程等，并尝试使用NODE_ENV进行某些操作，但到目前为止，我仍然遇到错误。
So far I haven't managed to do that. Much people recommand using "webpack" for managing this but we didn't configure it in the beginning because we had no clue about reactJS and I don't know if we can do it right now. I've read tutorials etc and tried some things with NODE_ENV but till now I'm stuck with errors.
任何人都可以帮我吗？我的队友？
Can anyone help me & my teammates ?
谢谢！
推荐答案
我以为你是使用create-react-app生成您的React项目。我的文件夹结构如下：
I assumed you used create-react-app to generate your react project. My folder structure is like:
- 客户端（这是我的应用程序）
- config
- 控制器
- 路由
- 模型
- index.js（express应用程序位于index.js中）
- package.json
- client (it is my react app)
- config
- controllers
- routes
- models
- index.js (express app is in index.js)
- package.json
我以前遵循的步骤将我的应用程序部署到Heroku：
Following step that I used to deployed my app to Heroku:
-
在package.json中，将此行添加到脚本
heroku -postbuild：。
NPM_CONFIG_PRODUCTION = false npm install --prefix客户端&& npm运行
build --prefix客户端
然后在脚本后添加此 engines：{ node： [您的节点版本]} 。
在index.js中，在设置路由之后放置以下代码
In index.js, put the following code after your routes set up
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
const path = require("path");
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
}
我假设您使用git进行版本控制，并且已经安装了heroku 。打开您的终端，然后heroku登录-> heroku
create-> git push heroku master。如果您没有收到任何错误消息，则
成功部署了您的应用。
I assume that you use git for version control and already install heroku. Open your terminal, then heroku login -> heroku create -> git push heroku master. If you do not get any error, you are success to deploy your app.
这是我的我将我的应用程序部署到了Heroku的GitHub https://github.com/dnp1204/instagrom 上。希望它能使您有所了解
This is my GitHub https://github.com/dnp1204/instagrom that I deployed my app to Heroku. I hope it will give you some idea how to do so
希望您能使用它！
这篇关于在生产中部署ReactJS应用程序（带有nodeJS后端）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
