在Cpanel上使用Express Back End Deploy部署React应用的步骤如下:
- 登录Cpanel控制面板:打开浏览器,输入你的域名后加上"/cpanel",然后输入你的用户名和密码进行登录。
- 创建一个子域名:在Cpanel控制面板中找到"Domains"或"域名"选项,点击进入后选择"Subdomains"或"子域名"。在子域名页面中,输入一个子域名名称,例如"api.yourdomain.com",然后点击"Create"或"创建"按钮。
- 创建一个数据库:在Cpanel控制面板中找到"Databases"或"数据库"选项,点击进入后选择"MySQL Databases"或"MySQL数据库"。在数据库页面中,输入一个数据库名称,例如"mydatabase",然后点击"Create Database"或"创建数据库"按钮。
- 创建一个数据库用户:在数据库页面中,找到"Add New User"或"添加新用户"部分,输入一个用户名和密码,然后点击"Create User"或"创建用户"按钮。
- 将用户授权给数据库:在数据库页面中,找到"Add User to Database"或"将用户添加到数据库"部分,选择刚刚创建的用户和数据库,然后点击"Add"或"添加"按钮。在接下来的页面中,将所有权限授予该用户。
- 上传React应用文件:在Cpanel控制面板中找到"File Manager"或"文件管理器"选项,点击进入后选择你的网站根目录。在根目录中,点击"Upload"或"上传"按钮,选择你的React应用的压缩文件并上传。
- 解压React应用文件:在根目录中找到你刚刚上传的React应用压缩文件,选中它并点击"Extract"或"解压"按钮。解压后,你将看到一个名为"react-app"或类似名称的文件夹。
- 配置Express后端应用:在Cpanel控制面板中找到"File Manager"或"文件管理器"选项,点击进入后选择你的网站根目录。在根目录中,找到你的Express后端应用文件夹,通常是一个包含"server.js"或"app.js"文件的文件夹。如果没有该文件夹,你需要将Express后端应用文件夹上传到根目录中。
- 安装Express依赖:在Cpanel控制面板中找到"Terminal"或"终端"选项,点击进入后选择你的网站根目录。在终端中,输入以下命令来安装Express依赖:
cd express-app
npm install
- 配置Express后端应用的环境变量:在终端中,输入以下命令来创建一个名为".env"的文件并编辑它:
在".env"文件中,设置以下环境变量:
PORT=3001
DB_HOST=localhost
DB_USER=your_database_user
DB_PASSWORD=your_database_password
DB_NAME=your_database_name
保存并关闭文件。
- 启动Express后端应用:在终端中,输入以下命令来启动Express后端应用:
你的Express后端应用将在端口3001上运行。
- 配置React前端应用:在Cpanel控制面板中找到"File Manager"或"文件管理器"选项,点击进入后选择你的网站根目录。在根目录中,找到你的React应用文件夹"react-app",进入该文件夹。
- 安装React依赖:在终端中,输入以下命令来安装React依赖:
- 配置React前端应用的环境变量:在终端中,输入以下命令来创建一个名为".env"的文件并编辑它:
在".env"文件中,设置以下环境变量:
REACT_APP_API_URL=https://api.yourdomain.com
将"api.yourdomain.com"替换为你在步骤2中创建的子域名。保存并关闭文件。
- 构建React前端应用:在终端中,输入以下命令来构建React前端应用:
构建完成后,你将在"build"文件夹中找到生成的静态文件。
- 配置Cpanel的虚拟主机:在Cpanel控制面板中找到"Domains"或"域名"选项,点击进入后选择"Addon Domains"或"附加域名"。在附加域名页面中,输入你的子域名和根目录路径,然后点击"Add Domain"或"添加域名"按钮。
- 部署React应用:在Cpanel控制面板中找到"File Manager"或"文件管理器"选项,点击进入后选择你的网站根目录。在根目录中,找到你的React应用的构建文件夹"build",选中它并点击"Move"或"移动"按钮。将构建文件夹移动到你在步骤16中配置的虚拟主机的根目录中。
- 完成部署:现在你的React应用已经部署在Cpanel上了。你可以通过访问你的子域名(例如"api.yourdomain.com")来访问Express后端应用,通过访问你的主域名(例如"yourdomain.com")来访问React前端应用。
请注意,以上步骤仅适用于在Cpanel上部署React应用的一种方法,具体步骤可能会因Cpanel版本和配置而有所不同。另外,本答案中没有提及腾讯云相关产品和产品介绍链接地址,因为要求不能提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商。