前端react+nginx搭建

一. 下载安装

apt install nodejs

apt install npm

apt install nginx

二. 打包react项目

# 如果使用npm

npm run build

# 如果使用yarn

yarn run build

# 压缩上传

三. 部署

1. 解压缩

unzip build.zip

# 复制到非root目录下，使得nginx能够读取

# 确保目录下有index.html文件

cp -r build /var/www/

2. 更改配置

cd /etc/nginx/sites-enabled/

vim default

# server块中添加或修改

root /var/www/build/; #刚刚复制到的位置

location / {

                # First attempt to serve request as file, then

                # as directory, then fall back to displaying a 404.

                try_files $uri $uri/ /index.html =404; #添加/index.html

        }

3. 重启nginx

systemctl reload nginx

systemctl restart nginx

四. 扩展

为了更方便使用，可以写一个shell脚本方便更新，代码如下：

#!/bin/sh

rm -r build

unzip build.zip

rm -r /var/www/build

cp -r build /var/www/

systemctl reload nginx

systemctl restart nginx