React项目从创建到部署(Nginx)

目录

一.创建项目

二.打包

三.部署

---

第一次从创建项目-->打包-->服务器购买-->部署.可能还有很多问题没有发现,各位大佬如果发现写的有问题,欢迎指出和补充~

一.创建项目

1.执行 create-react-app demo

2.创建完成后将路径切换到项目目录,执行npm start 或 yarn start 启动本地调试

3.react脚手架内置webpack将项目启动在本地3000的端口上(占用会往后+1),访问 http://localhost:3000 可以访问到项目

二.打包

1.react脚手架内置webpack打包构建工具,并提供打包指令npm run build

2.控制台执行npm run build会将文件打包到build文件夹中

 

3.点击html文件会白屏,需要在package.json中添加"homepage": ".",并重新执行npm run build进行打包重新访问html文件

4.或者执行 serve -s build,访问 http://localhost:3000即可

 

三.部署

本地环境:Windows 10

服务器环境CentOS7.6 (所演示腾讯云轻服务器)

服务器连接工具Bitvise SSH Client(本次使用) 或 Xshell 等

连接服务器：

1.打开Bitvise SSH Client,输入主机地址,端口,主机用户(默认root)和密码,点击登陆

 

 连接成功:

 Nginx安装: (Nginx 安装配置 | 菜鸟教程)

一、安装编译工具及库文件

yum -y install make zlib zlib-devel gcc-c++ libtool  openssl openssl-devel

二、首先要安装 PCRE

PCRE 作用是让 Nginx 支持 Rewrite 功能。

1、下载 PCRE 安装包，下载地址： Download PCRE from SourceForge.net

cd /usr/local/src/
wget http://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz

2、解压安装包:

tar zxvf pcre-8.35.tar.gz

3、进入安装包目录

cd pcre-8.35

4、编译安装 

./configure
make && make install

5、查看pcre版本

pcre-config --version

三、Nginx安装

1、下载 Nginx，下载地址：nginx: download

cd /usr/local/src/
wget http://nginx.org/download/nginx-1.6.2.tar.gz

2、解压安装包

tar zxvf nginx-1.6.2.tar.gz

3、进入安装包目录

cd nginx-1.6.2

4、编译安装

./configure --prefix=/usr/local/webserver/nginx --with-http_stub_status_module --with-http_ssl_module --with-pcre=/usr/local/src/pcre-8.35

make

make install

5、查看nginx版本

/usr/local/webserver/nginx/sbin/nginx -v

6、启动nginx

/usr/local/webserver/nginx/sbin/nginx

7、访问服务器地址，是一个welcome页面

四、将打包好的文件上传至服务器

1.打开/usr/local/webserver/nginx/html 文件夹,将文件夹清空

2.清空文件夹,上传打包好的文件

3.访问ip地址,当前页面正常显示啦~