在完成 React 应用的开发后,我们需要将应用部署到服务器上,让用户可以访问我们的应用。Create React App 提供了多种部署方式,让我们可以选择最适合我们的方式来部署应用。
打包应用
在部署之前,我们需要先打包我们的应用。打包应用可以将我们的代码转换成浏览器可以识别的静态文件,以便在生产环境中运行。要打包应用,可以运行以下命令:
npm run build
这个命令会在项目根目录下生成一个 build
文件夹,里面包含了我们打包后的应用代码。
部署到静态服务器
如果我们的应用是一个纯静态应用(没有后端服务),我们可以将打包后的代码部署到任何支持静态文件的服务器上,比如 GitHub Pages、Netlify、Vercel 等等。只需要将 build
文件夹下的所有文件上传到服务器上即可。
部署到 GitHub Pages
要将应用部署到 GitHub Pages 上,可以按照以下步骤操作:
- 将代码提交到 GitHub 仓库
- 在项目根目录下运行
npm run build
打包应用 - 安装
gh-pages
包:npm install gh-pages
- 在
package.json
文件中添加homepage
字段:
"homepage": "https://your-github-username.github.io/your-repo-name"
- 在
package.json
文件中添加以下脚本:
"scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" }
- 运行
npm run deploy
部署应用到 GitHub Pages 上
部署到后端服务器
如果我们的应用需要与后端服务器进行交互,我们可以将应用部署到支持 Node.js 的服务器上。在部署到后端服务器时,我们需要确保服务器支持 React 应用的路由。
部署到 Heroku
要将应用部署到 Heroku 上,可以按照以下步骤操作:
- 创建一个
server.js
文件,用于启动 Express 服务器:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ------------------------------------------- ----------- ------------ ------------- ---- - --------------------------------- -------- --------------- --- ----- ---- - ---------------- -- ----- ---------------- -- -- - ------------------- -- ------- -- ---- ---------- ---
- 在
package.json
文件中添加以下脚本:
"scripts": { "start": "node server.js" }
- 将代码提交到 GitHub 仓库
- 创建 Heroku 应用并关联 GitHub 仓库
- 部署应用到 Heroku 上
以上是部署 React 应用的一些常用方式,根据自己的需求选择合适的部署方式来发布我们的应用。