1、安装React开发者工具(Chrome，React Developer Tools)，以确定构建过程是否正确，如图1
2、当访问一个开发模式的React页面时，这个工具的图标会有一个红色的背景，如图2
This page is using the development build of React.
Note that the development build is not suitable for production.
Make sure to use the production build before deployment.
Open the developer tools, and the React tab will appear to the right.
这个页面正在使用React的开发版本。
请注意，开发版本不适合生产。
确保在部署之前使用生产版本。
打开开发人员工具，React选项卡将显示在右侧。
3、Create React App方式，如果你的项目是以Create React App创建的，运行如下命令：这将会在该项目的build/文件夹内创建一个生产版本的应用，如图3
npm run build
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
35.72 KB build\static\js\main.ee7b2412.js
299 B build\static\css\main.c17080f1.css
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
http://bit.ly/2vY88Kr
4、编辑 hosts 文件，如图4
# React my-app
127.0.0.1 my-app.localhost www.my-app.localhost
5、部署在 Nginx，提供index.html，新建：C:\nginx-1.10.1\conf\vhosts\my-app.conf，如图5
## WWW ##
server {
listen 80; ## 监听 ipv4 上的 80 端口
# listen [::]:80 default_server ipv6only=on; ## 监听 ipv6 上的 80 端口
root E:/wwwroot/my-app/build;
index index.html;
server_name www.my-app.localhost;
charset utf-8;
access_log logs/www.my-app.localhost.access.log;
error_log logs/www.my-app.localhost.error.log;
# location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|pdf|ppt|txt|bmp|rtf|js)$ {
# access_log off;
# expires max;
# }
client_max_body_size 128M;
# There is a VirtualBox bug related to sendfile that can lead to
# corrupted files, if not turned-off
# sendfile off;
location ~ /\.(ht|svn|git) {
deny all;
}
}
## MISC ##
### WWW Redirect ###
server {
listen 80; ## 监听 ipv4 上的 80 端口
# listen [::]:80 default_server ipv6only=on; ## 监听 ipv6 上的 80 端口
server_name my-app.localhost;
return 301 http://www.my-app.localhost$request_uri;
}
6、重新加载 Nginx，运行命令：nginx -s reload，如图6
7、网址：http://www.my-app.localhost/ ，当访问一个生产模式的React页面时，这个工具的图标会有一个黑色的背景：如图7
This page is using the production build of React.
Open the developer tools, and the React tab will appear to the right.
此页面正在使用React的生产版本。
打开开发人员工具，React选项卡将显示在右侧。
需要长期技术维护或远程问题排查？
我是拥有 15+ 年经验的 PHP / Go 后端工程师，长期关注已有系统维护、Bug 修复、性能优化、服务器排查、WordPress 网站维护和小功能迭代。
如果你的项目遇到以下情况，可以先从一次小问题排查开始合作：
- ✅ PHP / Laravel / Yii2 老项目无人维护
- ✅ Go / Gin 后端接口需要排查或优化
- ✅ WordPress 网站访问慢、报错或插件冲突
- ✅ Nginx / MySQL / Redis / Linux 服务器异常
- ✅ CDN / Cloudflare / DNS / HTTPS 配置问题
- ✅ 需要长期远程技术支持或兼职维护
更多介绍请查看：关于我 & 合作
微信：13980074657
邮箱：shuijingwanwq@gmail.com
Telegram：@shuijingwan
GitHub：https://github.com/shuijingwan