首页 > nginx > 使用nginx部署react项目

使用nginx部署react项目

2020年4月11日 发表评论 阅读评论

一、环境准备

1.安装node和yarn

开始部署react前需要安装node和yarn,可以参考这里安装node和yarn

2.安装nginx

ubuntu安装nginxwindows安装nginx源码安装nginx

二、部署构建Reat项目

1.下载源代码并解压

2. 进入源码目录并安装

$ yarn

3.本地开发模式(可选)

在开发模式下运行应用程序。 打开 http://localhost:3000 在浏览器中查看它。

如果你更改代码,页面将自动重新加载。 你将在控制台中看到构建错误和 lint 警告。  CTRL+C退出。

$ yarn start

4. 构建发布

将 React 正确地打包为生产模式中并优化构建以获得最佳性能。

$ yarn build

构建之后会生成build目录,目录里包含项目静态的文件,如何发布这些静态文件有两种方式:

  • 部署到nginx。
  • Node环境使用serve也可以运行静态文件。

三、发布静态文件

1.Nginx部署React

创建nginx的配置文件,并加入配置

vi /usr/local/nginx/conf/vhost/markdown.conf

server_name 配置你的ip或域名
root 配置为build出来的静态文件路径
index 入口文件

测试nginx的配置文件

nginx -t

加载配置生效

nginx -s reload

打开浏览器,访问 https://makrdown.com.cn 查看效果了 markdown排版

2. 使用server运行

四、排错

1. nginx部署的react加载缓慢的问题

可以使用gzip压缩,减少网络传,在配置文件中加入

2. React打包文件大的问题

如果已经开了压缩还是传输慢,检查文件体积达到几M。

 

修改nginx的压缩级别,调整为6,gzip_comp_level 6; ,可以减少300k。

3. 使cdn

转载请注明本文地址: https://www.nginx.cn/5532.html

分类: nginx 标签:
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.