【前端项目部署】Mac:尝试把一个react项目部署到server

准备工作：

复盘: 在macOs里装linux并使用ssh_CyanDK的博客-CSDN博客因为租云服务器要花钱想要在业余时间学习，于是想到在mac上装虚拟机。。。。。。https://blog.csdn.net/CyanDK/article/details/122510555当可以自如ping通远程server(虚拟机的server)后——

build react 项目

由于我没有接触过react，只是想要通过这次机会学习一些react知识，于是需要从安装react开始。

我升级了node到16.15.0

升级node的步骤：

node -v #查看当前node版本
sudo npm install n -g #全局安装n, n是交互式node.js 版本管理工具
sudo n stable #安装稳定版本
node -v #然后就可以看到新版本的node

安装react：

npm install -g create-react-app
#安装好之后创建一个react项目
create-react-app appName
#创建好后，进入到项目根目录，build
npm run build #会看到build出一个build文件夹

#将其zip压缩，待之后上传

上传build出的项目文件:

用scp来进行跨server的文件传输

scp scp -r build.zip root@serverip:/opt/workspace #workspace是我自己在server里建的文件夹

在server上进入目标路径看一看是不是成功上传了，如果有这个build.zip，解压

unzip build.zip

修改nginx配置

这个时候要想通过浏览器访问react项目的index.html页面，需要去nginx配置

（nginx安装和基本配置忘记复盘了，以后补上）

#进入nginx所在目录
cd /usr/local/nginx

ls 
#能看到有conf 和sbin，先进入conf修改

sudo vi nginx.conf

#目前就关心这一段，nginx的详解之后会在别的篇章补上
    server {
        listen       4200; #想要监听的端口号
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /opt/workspace/build; #在这里设置想要作为入口的index.html所在的目录
            index  index.html index.htm;
        }

设置完毕之后，保存退出vi，进入sbin目录，可以看到里面有一个nginx

ls -ltr

#显示：
total 5052
-rwxr-xr-x. 1 root root 5171408 Jan 17 22:54 nginx

#说明是个可执行文件, 运行

nginx -s reload

此时就用新的nginx.conf重启了nginx，可以去server的浏览器去检查一下：

http://localhost:4200/

或者 http://serverip:4200/

在本地访问这个 http://serverip:4200/

是不行的

server端防火墙里还没把这个port打开加上

sudo firewall-cmd --zone=public --add-port=4200/tcp --permanent

#然后重启防火墙
sudo firewall-cmd --reload

#查看防火墙状态
firewall-cmd --state

现在就可以在本地输入http://serverip:4200/ 得到上面相同的页面了。