在Node + React中本地部署应用程序

x8goxv8g  于 2023-10-17  发布在  Node.js
关注(0)|答案(1)|浏览(111)

我正在用JS开发我的应用程序,我在Node + Express + Cors中构建了后端,在React中构建了前端。我想知道如何在本地服务器上(使用Windows 10服务器操作系统)“部署”我的应用程序,因为我希望任何这样做的计算机都能够:[Server IP]:[Application Port]/home访问并使用此应用程序。
我该怎么做,我需要做什么:npm build并在后面配置它,我需要在前面改变什么吗?好吧,我只想谈论Heroku,但我不能把它放在那里,因为我的服务器是关闭的互联网,需要本地.(目前背面运行在端口3333上,正面运行在端口3000上,如果可能的话,我将两者都放在端口3333上)
我的申请文件夹:

  • 后端(src,package.json,package-lock.json)
  • 前端(public,src,package.json,package-lock.json)
  • package.json
  • package-lock.json

我研究了可能的情况,但我总是遇到Heroku,但我不能使用它

vhipe2zx

vhipe2zx1#

如果你想在本地Windows 10服务器上部署Node.js + Express后端和React前端,并使用服务器IP和端口访问应用程序,你可以按照以下步骤操作:
1.准备您的环境:

  • 确保您的Windows 10服务器上安装了Node.js和npm。
  • 确保安装了必要的软件和软件包。

1.配置您的后端和前端:在前端的package.json中,确保您的API请求被定向到正确的后端URL。对于开发,您可能会使用类似http://localhost:3333的内容,但对于部署,它应该指向服务器的IP地址。
1.构建您的前端:在前端目录中,运行npm run build来创建React应用程序的生产就绪构建。
1.服务您的应用:您可以使用像PM2这样的进程管理器来服务后端和前端,以保持它们在后台运行。
npm install -g pm2
启动Express后端:

cd backend
npm install
pm2 start server.js --name "backend" # Use your server file name

开始你的React前端:

cd frontend
npm install -g serve
serve -s build -l 3333 # Serve the frontend on port 3333
pm2 start "serve -s build -l 3333" --name "frontend"

您可以根据需要调整端口和名称。
1.配置CORS:确保Express后端配置为接受来自前端IP的请求。您可以为此设置CORS中间件。对于开发,您可以使用cors({ origin:'http://localhost:3000' }),但对于部署,请将其更改为服务器的IP。
1.访问您的应用程序:在部署后端和前端之后,您应该能够使用服务器的IP和配置的端口访问应用程序。举例来说:http://server_ip:3333/home.
请确保您的Windows 10防火墙和网络设置允许传入连接到所选端口上的服务器IP(在本例中为端口3333)。此外,考虑使用反向代理(如Nginx或Apache)来处理传入请求,并在需要时提供更用户友好的URL(例如,没有端口号)。
请让我知道它是否有意义。

相关问题