公司页面网站设计模板,114啦网址导航建站系统,大连做网站价格,成都学网站建设费用写在前面#xff1a;博主是一只经过实战开发历练后投身培训事业的“小山猪”#xff0c;昵称取自动画片《狮子王》中的“彭彭”#xff0c;总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域#xff0c;如今终有小成… 写在前面博主是一只经过实战开发历练后投身培训事业的“小山猪”昵称取自动画片《狮子王》中的“彭彭”总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域如今终有小成愿将昔日所获与大家交流一二希望对学习路上的你有所助益。同时博主也想通过此次尝试打造一个完善的技术图书馆任何与文章技术点有关的异常、错误、注意事项均会在末尾列出欢迎大家通过各种方式提供素材。 对于文章中出现的任何错误请大家批评指出一定及时修改。有任何想要讨论和学习的问题可联系我zhuycvip.163.com。发布文章的风格因专栏而异均自成体系不足之处请大家指正。
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文件夹基本结构如下 接下来我们把整个build文件夹压缩准备上传。可以使用zip格式需要使用unzip来解压或者使用tar.gz格式。
2. 数据转储
部署时有时需要同步一些本地数据这里一并记录一下以MySQL为例
使用Navicat工具
选中需要转储为sql文件的数据库【右键】按以下步骤操作 再选择结构和数据【Structure and Data】选择一个保存位置就完成了。
使用命令导出
使用自带的mysqldump来进行数据导出直接在命令窗口中执行不要使用mysql客户端登录。
mysqldump -u 用户名 -p 数据库名 /path/to/save/sql 详细可以参考数据迁移的几种方式 - MySQL数据库。
二、文件上传
准备好前端项目的压缩包和数据库文件后可以准备上传了可以使用FTP工具直接进行界面化操作这里介绍纯命令方式。
1. SFTP连接
和SSH连接一样使用sftp打开一个文件传输会话如
sftp userhostname登录后正常使用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 stop2. 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/nginx3. 访问启动
更新Nginx配置文件后使用以下命令重新加载
nginx -s reload如果是手动安装方式需要进入到nginx安装目录的sbin下执行或者配置环境变量后使用。
直接访问
如果使用的是公网服务器并且方便直接访问在配置好网络安全组后就可以通过公网IP和相应的端口直接访问了。
本地访问
第二种方式是使用SSH隧道只有自己能够访问到或者说有服务器登录权限的人才可以访问适用于比较严格和私密的测试。建立隧道后在本地访问相应的端口【localhost:8080】就会自动进行转发需要注意的一点React项目要访问的服务端也需要建立隧道进行转发否则会有跨域问题。
ssh -L 8080:hostname:8080 -N userhostname如果希望在后台执行可以添加-f参数但是要终止相关进程时要手动查找进行关闭。
