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选项卡将显示在右侧。
