React项目部署 - Nginx配置

写在前面:博主是一只经过实战开发历练后投身培训事业的“小山猪”,昵称取自动画片《狮子王》中的“彭彭”,总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域,如今终有小成,愿将昔日所获与大家交流一二,希望对学习路上的你有所助益。同时,博主也想通过此次尝试打造一个完善的技术图书馆,任何与文章技术点有关的异常、错误、注意事项均会在末尾列出,欢迎大家通过各种方式提供素材。

  • 对于文章中出现的任何错误请大家批评指出,一定及时修改。
  • 有任何想要讨论和学习的问题可联系我:[email protected]
  • 发布文章的风格因专栏而异,均自成体系,不足之处请大家指正。

React项目部署 - Nginx配置

本文关键字:React、打包、部署、Nginx、配置

文章目录

  • React项目部署 - Nginx配置
    • 一、本地准备
      • 1. 项目构建
      • 2. 数据转储
    • 二、文件上传
      • 1. SFTP连接
      • 2. 资源解压
      • 3. 数据同步
    • 三、服务部署
      • 1. Nginx安装
      • 2. Nginx配置
      • 3. 访问启动

一、本地准备

本文将介绍React项目部署访问的流程,使用Nginx方式,并列出一些可能会遇到的问题,以Ubuntu系统为例。

1. 项目构建

当项目完成开发,准备测试或部署上线时,首先需要打包,在项目的根目录执行以下命令:

npm run build

然后会看到项目根目录下产生了一个build文件夹,基本结构如下:
React项目部署 - Nginx配置_第1张图片
接下来我们把整个build文件夹压缩,准备上传。可以使用zip格式,需要使用unzip来解压,或者使用tar.gz格式。

2. 数据转储

部署时有时需要同步一些本地数据,这里一并记录一下,以MySQL为例:

  • 使用Navicat工具

选中需要转储为sql文件的数据库【右键】,按以下步骤操作:
React项目部署 - Nginx配置_第2张图片
再选择结构和数据【Structure and Data】,选择一个保存位置,就完成了。

  • 使用命令导出

使用自带的mysqldump来进行数据导出,直接在命令窗口中执行,不要使用mysql客户端登录。

mysqldump -u 用户名 -p 数据库名 > '/path/to/save/sql' 

详细可以参考:数据迁移的几种方式 - MySQL数据库。

二、文件上传

准备好前端项目的压缩包和数据库文件后可以准备上传了,可以使用FTP工具直接进行界面化操作,这里介绍纯命令方式。

1. SFTP连接

和SSH连接一样,使用sftp打开一个文件传输会话,如:

sftp user@hostname

登录后正常使用ls或cd等命令,切换到目标路径后,使用put命令上传,直接将本地文件的完整路径填入即可。

2. 资源解压

使用unzip或tar -zvxf来解压上传的build压缩包:

unzip build.zip
tar -zvxf build.tar.gz

得到build文件夹后等待Nginx安装配置完成后使用。

3. 数据同步

导入MySQL数据时,先通过mysql客户端建立连接:

mysql -uroot -p

然后创建一个数据库,注意编码一致,并切换到该数据库下:

CREATE DATABASE dbname CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
use dbname;

然后使用source命令执行已经上传的sql文件:

source /path/to/read/sql;

三、服务部署

1. Nginx安装

  • apt安装

可以直接使用包管理工具来安装:

sudo apt update
sudo apt install nginx

用这种方式安装后可以通过已注册的系统服务方式来调用,并可以开启自动启动:

sudo systemctl start nginx
sudo systemctl enable nginx
  • 手动安装

使用包管理工具来安装的前提是有足够的权限来操作,如果只是一个普通的用户,并且不能获得相关的权限可以使用编译安装:

wget https://nginx.org/download/nginx-1.25.2.tar.gz
tar -zvxf nginx-1.25.2.tar.gz
cd nginx-1.25.2
./configure --prefix=/path/to/install/nginx
make && make install

如果需要添加SSL支持,可以在安装配置时添加以下选项【可能需要手动配置libssl-dev等】:

./configure --prefix=/path/to/install/nginx --with-http_ssl_module
  • 手动运行

使用手动方式安装的nginx使用以下方式控制启停:

/path/to/nginx/sbin/nginx
/path/to/nginx/sbin/nginx -s stop

2. Nginx配置

安装nginx后,进入到安装目录的conf文件夹,找到nginx.conf文件,更新配置:

server {
        listen       8080;
        server_name  localhost;

        location / {
            root   /path/to/nginx/build;
            try_files $uri /index.html;
            index  index.html;
        }
        
}

以上是主要需要修改的内容,server下还有其它的配置可以忽略,有需要则修改。

  • 注意事项
    • listen:如果使用普通用户,一般没有1024端口以下的使用权限,在配置时需要注意。
    • location-root:指定映射路径,指定到React文件的解压目录
    • try_files:用于解决手动刷新页面时显示404的问题

配置完成后,我们将之前解压的React项目build文件夹移动到nginx中就可以了,或者在配置时直接指向解压路径。

mv /path/to/build /path/to/nginx

3. 访问启动

更新Nginx配置文件后,使用以下命令重新加载:

nginx -s reload

如果是手动安装方式,需要进入到nginx安装目录的sbin下执行,或者配置环境变量后使用。

  • 直接访问

如果使用的是公网服务器,并且方便直接访问,在配置好网络安全组后,就可以通过公网IP和相应的端口直接访问了。

  • 本地访问

第二种方式是使用SSH隧道,只有自己能够访问到,或者说有服务器登录权限的人才可以访问,适用于比较严格和私密的测试。建立隧道后,在本地访问相应的端口【localhost:8080】,就会自动进行转发,需要注意的一点,React项目要访问的服务端也需要建立隧道进行转发,否则会有跨域问题。

ssh -L 8080:hostname:8080  -N user@hostname

如果希望在后台执行可以添加-f参数,但是要终止相关进程时要手动查找进行关闭。

你可能感兴趣的:(萌新科普,#,一应俱全,react.js,nginx,前端)