1. Install React Developer Tools (Chrome, React Developer Tools) to determine whether the build process is correct, as shown in Figure 1
Figure 1
2. When visiting a React page of a development mode, the icon of this tool will have a red background, as shown in Figure 2
This page is using the development of react.
Note that the development build is not suitable for production.
Make sure to use the production building before deployment.
Open the developer tools, and the react tab will appear to the right.
This page is using the development version of React.
Note that the development version is not suitable for production.
Make sure to use the production version before deployment.
Open the developer tools and the React tab will be displayed on the right.
Figure 2
3. Create React App method, if your project is created with Create React App, run the following command: This will create a production version application in the build/folder of the project, as shown in Figure 3
npm run buildFigure 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. Edit the hosts file, as shown in Figure 4
# React my-app
127.0.0.1 my-app.localhost www.my-app.localhost
Figure 4
5. Deploy in nginx, provide index.html, create a new: C:\nginx-1.10.1\conf\vhosts\my-app.conf, as shown in Figure 5
Figure 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. Reload nginx and run the command:nginx -s reload, as shown in Figure 6
Figure 6
7. The URL: http://www.my-app.localhost/ , when visiting a React page of a production mode, the icon of this tool will have a black background: as shown in Figure 7
This page is using the production build of react.
Open the developer tools, and the react tab will appear to the right.
This page is using the production version of React.
Open the developer tools and the React tab will be displayed on the right.
Figure 7
Leave a Reply