React创建项目-打包发布服务器

1.创建Demo项目

create-react-app命令可以让我们无需配置就能快速构建 React 开发环境。
（安装create-react-app 使用的是cnpm，淘宝的源速度会比较快）
执行以下命令创建并运行项目：

$ cnpm install -g create-react-app
$ create-react-app test_react
$ cd test_react
$ npm start

编译成功提示：

Compiled successfully!

You can now view test_react in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.3.121:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

执行完上述命令，自动打开本地浏览器，localhost：3000，就能看到项目的运行效果。（开发模式）

image.png

2. 打包编译，部署本地环境

用npm run build代码会被编译到build目录(自动生成)，我们只需要把build目录copy到服务器环境（我本地是Mac的环境搭建的nginx服务器，具体可以参见：Mac下配置PHP+Nginx+Redis环境
），
cd /usr/local/etc/nginx/servers/ 下创建配置文件 test_react.conf
以下是 test_react.conf中的nginx配置：

server {
     listen       8010;
     server_name  -;
     index index.html;
     root /Users/hanqing/project/build;
}

重启nginx

sudo brew services restart nginx

在浏览器中访问http://localhost:8010

image.png