正文
React 的项目配置以及生产环境部署的问题
1、项目的部署问题
首先是安装的环境：
其次是nginx的配置的问题：
背景：项目中使用了react、react-router开发，在部署到nginx服务器时遇到了以下问题
History
history |
url样例 |
特点 |
hash history |
/#/user/profile |
不需要服务器支持 |
browser history |
/user/profile |
react-router官方推荐，需要服务器支持（因为是SPA项目，url切换时需要服务器始终返回index.html） |
Nginx的配置问题：
以下介绍我们的BrowserHistory模式部署到nginx的基本配置
情形一：部署到我们nginx的根目录
访问路径 http://localhost:/
# nginx配置 location / { root html; index index.html; # url 切换时始终返回index.html try_files $uri /index.html; }
情形二：部署到nginx的子目录
假设部署到/app目录下，则访问路径 http://localhost:/app/
# nginx配置 location /app { root html; index index.html; # url 切换时始终返回index.html try_files $uri /app/index.html; } # 图片样式缓存1年 location ~* /app.*\.(js|css|png|jpg)$ { access_log off; expires 365d; } # html/xml/json 文件不缓存 location ~* /app.*\.(?:manifest|appcache|html?|xml|json)$ { expires -1; } // package.json "homepage": "http://localhost/app", // react-router路由配置 // 注意指定basename <BrowserRouter basename='/app'> </BrowserRouter>
开启nginx的缓存
# 开启gzip gzip on; # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩 gzip_min_length 1k; # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间 gzip_comp_level 1; # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 是否在http header中添加Vary: Accept-Encoding，建议开启 gzip_vary on; # 禁用IE 6 gzip gzip_disable "MSIE [1-6]\.";
整体的配置：
# nginx.conf整体配置大概如下： http { # 开启gzip gzip on; # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩 gzip_min_length 1k; # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明 gzip_comp_level 1; # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php; # 是否在http header中添加Vary: Accept-Encoding，建议开启 gzip_vary on; # 禁用IE 6 gzip gzip_disable "MSIE [1-6]\."; server { location /app { root html; index index.html; # url 切换时始终返回index.html try_files $uri /app/index.html; } # 图片样式缓存1年 location ~* /app.*\.(js|css|png|jpg)$ { access_log off; expires 365d; } # html/xml/json 文件不缓存 location ~* /app.*\.(?:manifest|appcache|html?|xml|json)$ { expires -1; } }
第一步，安装部署的基本环境：
安装nodejs以及cnpm并且配置我们的淘宝镜像，并且配置我们的系统变量$PATH:
npm install -g cnpm --registry=https://registry.npm.taobao.org
第一步，在jenkins上面新创建项目，配置我们的git的地址，将代码下拉到我们的服务器的制定文件夹下，之后，我们编写自动化部署的脚本。测试脚本以及配置Jenkins执行我们的脚本。
至此，我们的自动化部署完毕，比较简单的。下面是运行的脚本：
cd /var/lib/jenkins/workspace/test-app rm -rf /var/lib/jenkins/workspace/test-app/build/* npm run build
上面的脚本是编译我们的代码的，最后将nginx的root指向我们编译的目标文件即可！
