在 Windows 10 64 下设置HTTP服务器为 Nginx，使用 React 应用的生产版本
1、安装React开发者工具(Chrome，React Developer Tools)，以确定构建过程是否正确，如图1
图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选项卡将显示在右侧。
图2
3、Create React App方式，如果你的项目是以Create React App创建的，运行如下命令：这将会在该项目的build/文件夹内创建一个生产版本的应用，如图3
npm run build
图3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | > react-scripts buildCreating 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.cssThe 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 buildFind out more about deployment here: |
4、编辑 hosts 文件，如图4
# React my-app
127.0.0.1 my-app.localhost www.my-app.localhost
图4
5、部署在 Nginx，提供index.html，新建：C:\nginx-1.10.1\conf\vhosts\my-app.conf，如图5
图5
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | ## 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
图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选项卡将显示在右侧。
图7
近期评论