没有不值得去解决的问题,也没有不值得去学习的技术!

在 Windows 10 64 下设置HTTP服务器为 Nginx,使用 React 应用的生产版本

网址:http://www.my-app.localhost/ ,当访问一个生产模式的React页面时,这个工具的图标会有一个黑色的背景
1、安装React开发者工具(Chrome,React Developer Tools),以确定构建过程是否正确,如图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选项卡将显示在右侧。
当访问一个开发模式的React页面时,这个工具的图标会有一个红色的背景
图2
3、Create React App方式,如果你的项目是以Create React App创建的,运行如下命令:这将会在该项目的build/文件夹内创建一个生产版本的应用,如图3 npm run build
Create React App方式,如果你的项目是以Create React App创建的,运行如下命令:这将会在该项目的build/文件夹内创建一个生产版本的应用
图3


> 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
编辑 hosts 文件
图4
5、部署在 Nginx,提供index.html,新建:C:\nginx-1.10.1\conf\vhosts\my-app.conf,如图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
重新加载 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选项卡将显示在右侧。
网址:http://www.my-app.localhost/ ,当访问一个生产模式的React页面时,这个工具的图标会有一个黑色的背景
图7

需要长期技术维护或远程问题排查?

我是拥有 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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理