一、要求

1、首先要有成熟的前端react项目和node后台项目，并且能在本地正常运行。

2、有一个服务器，我用的是学校的服务器，你也可以在阿里云上买一自己的服务器，大体步骤是一样的（我们只是需要一个能用的IP和域名）

二、服务器的环境要求

1、首先，需要自己下一个node和mysql,这个网上的教程很多，随便搜一下就好，下好之后我们再回来。
2、需要的工具还有Xshell（用来将前端和后台项目打包发送到Centos的服务器上）和 VMware(可以进行更方便的配置，若不下载的话，也可以在xshell上进行命令配置)

三、部署react项目到服务器上

1、首先将前端项目进行打包，通过在vsCode的控制台输入命令,之后我们在将build，进行压缩成为一个压缩包（因为xshell是不能发送文件夹的，所以要压缩一下）

npm run build

2、打开xshell,通过之前你得到的IP地址及用户名和密码登录进去，然后使用下面的命令上传build的压缩包，到服务器上，位置一般为服务器文件夹的根目录下

rz -y

3、在服务器上下载解压zip 的工具，用来解压传送过来的压缩包，命令为：

wget https://www.rarlab.com/rar/rarlinux-x64-5.7.1.tar.gz

4、自己新建一个文件夹，将解压后的压缩包放入该文件夹，此处我的文件夹的安放目录为

5、下载 nginx ，并进行配置

yum -y install nginx

配置命令

vim  /etc/nginx/nginx.conf

打开后

user www-data;
worker_processes auto;
pid /run/nginx.pid;
 
events {
	worker_connections 768;
	# multi_accept on;
}
 
http {
 
	##
	# Basic Settings
	##
 
	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 65;
	types_hash_max_size 2048;
	# server_tokens off;
 
	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;
 
	include /etc/nginx/mime.types;
	default_type application/octet-stream;
 
	##
	# SSL Settings
	##
 
	ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;
 
	##
	# Logging Settings
	##
 
	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;
 
	##
	# Gzip Settings
	##
 
	gzip on;
	gzip_disable "msie6";
 
	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
 
	##
	# Virtual Host Configs
	##
 
	include /etc/nginx/conf.d/*.conf;
        // 原本这个文件是要引入sites-enabled的文件夹下面的默认配置文件，我这里是将其注释掉，然后直接在nginx.conf文件里写
	# include /etc/nginx/sites-enabled/*;
	server {  //有多个项目，加server 就行
		listen 6379;  // 监听的端口，修改
		server_name whsjblog.com;   // 设置访问的域名或者改为服务器的公网IP地址
		root  /root/projects/project1/build;    // 资源文件的存放路径
		index index.html;     
		location ~^/favicon\.ico$ {
			root /root/projects/project1/build;// 资源文件的存放路径
		}
		location / {
			try_files $uri $uri/ /index.html;
		}
	}
}

保存完配置后，记得一定要重启下nginx服务

nginx -s reload 

下面说一下 nginx 的基本命令

验证配置是否正确: ./nginx -t

查看Nginx的版本号：./nginx -V

启动Nginx：直接运行 nginx即可

快速停止或关闭Nginx：./nginx -s stop

正常停止或关闭Nginx：./nginx -s quit

配置文件修改重装载命令：./nginx -s reload

6、因为服务器上都有防火墙，我们一定要记得，将自己之前nginx的端口号开启，否则的话，通过 服务器IP + 端口号 访问项目的时候，会报错 505

有关防火墙的基本命令

firewall-cmd --list-all  //查看开放的所有的端口号
sudo firewall-cmd --add-port=80/tcp --permanent //设置开放的端口号80
firewall-cmd --reload //设置成功重启端口号
sudo firewall-cmd --remove-port=80/tcp --permanent//关闭端口号80

//我有遇到个BUG，就是进行上面的所有命令都会显示一个
//   FirewallD is not running
//此时的操作应该是 如下两步，即可成功
systemctl unmask firewalld
systemctl start firewalld.service

7、此刻，我们应该就可以访问到前端的项目了

四、node项目部署到服务器上

1、首先将后端项目进行压缩通过Xshell上传到服务器上并解压，跟前端上传项目差不多，并且我这里是将前后端项目的文件夹并列的

2、下载pm2，来运行项目，因为你使用node来运行项目的时候，当进程一中断就没了，但pm2 不一样，没有那么容易的中断

npm install -g pm2

3、启动后端项目

pm2 start bin/www

4、一个注意的地方，就是你后端项目监听的端口，也一定要在防火墙中开开

五、再说下实践期中遇到的BUG

1、首先有时候，通过XShell连接你的服务器的时候连不上，可能是因为服务器关机或者没联网
2、你自己的项目一定要记得要配置跨域
3、前端的项目放在服务器中不能使用window.location.href=“路由”，来进行跳转
4、我们但是使用node来下载pm2的时候就下不了，后来发现是因为node的版本太低了，一定要记得升级