react+antd+nginx网站前端搭建（从零开始的开发者记录：一）
react项目创建
基本工具安装
sudo apt-get install -y npm
sudo npm install -g yarn create-react-app
创建react项目
create-react-app react-demo
cd react-demo
npm run start
自动启动浏览器后可以看到
npm的默认端口为3000，若已被占用，则向后寻找空闲端口，输入y或n选择是否使用新端口即可
使用Antd
安装antd
yarn add antd
antd优化
引入各个antd组件按需加载功能
yarn add react-app-rewired
yarn add babel-plugin-import
修改package.json中scripts部分
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}
在项目目录下创建config-overrides.js文件
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
// do stuff with the webpack config...
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
config,
);
return config;
};
适当修改app.js并引入Antd效果
import React, { Component } from 'react';
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
class App extends Component {
handleClick = (e) => {
console.log('click ', e);
}
render() {
return (
);
}
}
export default App;
yarn start
web应用部署
打包项目并测试
执行npm build打包项目文件，若无错误，则在目录出现build文件夹，期内为打包好资源文件
可通过serve简单测试打包工程是否可用，通过npm install -g serve安装，并在项目目录执行serve -s build即可（build可替换为为打包文件所在路径） ，之后从浏览器访问http://localhost:5000即可
安装nginx并增加配置文件
sudo apt-get install -y nginx
nginx相关目录
usr/sbin/nginx：主程序
/etc/nginx：存放配置文件
/usr/share/nginx：存放静态文件
/var/log/nginx：存放日志
http服务配置修改
找到Gzip Settings
##
# Gzip Settings
##
gzip on; #开启Gzip
gzip_vary on; #是否在http header中添加Vary: Accept-Encoding
gzip_proxied any; #Nginx作为反向代理的时候启用，根据某些请求和应答来决定是否在对代理请求的应答启用gzip压缩，是否 压缩取决于请求头中的“Via”字段，指令中可以同时指定多个不同的参数，意义如下：
expired - 启用压缩，如果header头中包含 "Expires" 头信息
no-cache - 启用压缩，如果header头中包含 "Cache-Control:no-cache" 头信息
no-store - 启用压缩，如果header头中包含 "Cache-Control:no-store" 头信息
private - 启用压缩，如果header头中包含 "Cache-Control:private" 头信息
no_last_modified - 启用压缩,如果header头中不包含 "Last-Modified" 头信息
no_etag - 启用压缩 ,如果header头中不包含 "ETag" 头信息
auth - 启用压缩 , 如果header头中包含 "Authorization" 头信息
any - 无条件启用压缩
gzip_comp_level 6; #压缩级别，1-9，数字越大压缩的越好，时间也越长
随着压缩级别的升高，压缩比有所提高，但到了级别6后，很难再提高；
随着压缩级别的升高，处理时间明显变慢；
gzip很消耗cpu的性能，高并发情况下cpu达到100%
gzip_buffers 16 8k; #压缩所需要的缓冲区大小
gzip_http_version 1.1; #gzip压缩针对的HTTP协议版本，默认是HTTP/1.1,用了反向代理的话，末端通信是HTTP/1.0
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; #进行压缩的文件类型
找到 Virtual Host Configs
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
# 可增加自己需要的配置文件路径
应用配置
server {
listen 8080;
# server_name your.domain.com;
root /home/root/react-demo/dist;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
}
location ^~ /assets/ {
gzip_static on;
expires max;
add_header Cache-Control public;
}
error_page 500 502 503 504 /500.html;
client_max_body_size 20M;
keepalive_timeout 10;