将 React SSR 应用程序上传到托管

Question

请告诉我如何将React SSR应用程序上传到托管？我一整天都在寻找正常的文章或说明，但在任何地方都找不到

我有主机和VPS，据我了解，你需要上传到VPS。我有 2 个包含项目构建的文件夹：客户端和服务器，在此之前我应该上传什么以及应该在服务器上安装什么？

我尝试安装 Node JS 并使用 .htaccess 将其上传到我的目录中的某个位置，但它没有导致任何结果

Answer 1

如果您不熟悉，将 React 服务器端渲染 (SSR) 应用程序部署到 VPS 可能会有点复杂。这是帮助您正确部署应用程序的分步指南。假设您可以通过 SSH 访问您的 VPS 并且它运行类 Unix 操作系统，您需要执行以下操作：

1.准备您的 VPS

在上传并运行应用程序之前，您需要通过安装必要的软件来准备您的 VPS：

1. Node.js：如果尚未安装 Node.js，请安装它。您提到有 Node.js，但请确保它是适合您的应用程序的正确版本。使用 Node Version Manager (nvm) 更轻松地管理 Node.js 版本。

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
   nvm install node # installs the latest version of node
   nvm use node
   

2. NPM/Yarn：确保您的包管理器（npm 或yarn）是最新的。

   npm install -g npm
   # or
   npm install -g yarn
   

3. 进程管理器：安装进程管理器以保持应用程序运行。 PM2 是 Node.js 应用程序的热门选择。

   npm install pm2 -g
   

4. Web 服务器（可选但推荐）：设置 Nginx 等反向代理可以帮助管理流量并提供更好的安全性和性能。

   sudo apt update
   sudo apt install nginx
   

2.上传您的项目

您需要将客户端和服务器目录上传到您的 VPS。您可以使用 SCP（安全复制协议）、FTP 或您喜欢的任何其他方法来执行此操作。如果您具有 SSH 访问权限，则可以按以下方式使用 SCP：

scp -r path_to_your_client_folder user@your_vps_ip:/path_where_to_upload
scp -r path_to_your_server_folder user@your_vps_ip:/path_where_to_upload

3.配置您的应用程序

1. 导航到您上传文件的 VPS 上的项目目录。

2. 安装依赖项:

   cd /path_to_your_server_directory
   npm install
   # or
   yarn install
   

3. 构建您的应用程序（如果尚未构建）：

   npm run build
   # This depends on how your package.json scripts are configured
   

4.运行您的应用程序

使用PM2，您可以开始您的应用程序。您需要将 PM2 指向您的服务器端入口点脚本，通常类似于

server.js

:

pm2 start server.js --name "YourAppName"
pm2 save
pm2 startup

5.设置反向代理（使用 Nginx）

配置 Nginx 将请求转发到您的 Node.js 应用程序：

1. 编辑Nginx配置文件：

   sudo nano /etc/nginx/sites-available/default
   

2. 在

   http

   块内添加以下服务器块：

   server {
       listen 80;
       server_name your_domain_or_IP;
   
       location / {
           proxy_pass http://localhost:3000; # Make sure the port matches your app's port
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           proxy_set_header Host $host;
           proxy_cache_bypass $http_upgrade;
       }
   }
   

3. 重新启动 Nginx 以应用更改：

   sudo systemctl restart nginx
   

6.确保您的防火墙允许 Web 流量

确保您的防火墙配置为允许端口 80 (HTTP) 和 443（HTTPS，如果您使用 SSL）上的流量：

sudo ufw allow 'Nginx Full'

结论

按照这些步骤，您的 React SSR 应用程序应该在您的 VPS 上启动并运行。确保检查您的应用程序日志是否有任何错误或问题：

pm2 logs YourAppName

如果您在执行这些步骤时遇到任何具体问题，请随时寻求帮助！