在centos上面简单部署一个前端项目流程

这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」。

1、购买云服务器

建议选择2核4G，负责带不动。用于测试可以用1核2G

2、登录云服务器

可选择服务器网页登录，也可以选择使用ssh链接登录ssh root@ip地址，然后输入密码进行登录。进入服务器查看yum，并且更新yum update -y,用于安装其他的资源包

3、安装node

curl --silent --location rpm.nodesource.com/setup_8.x | sudo bash - yum -y install nodejs

4、安装git

yum install -y git

5、安装nginx

yum install -y nginx
systemctl restart nginx.service//重启服务

6、安装mysql数据库

yum install mariadb-server mariadb 启动数据库

systemctl start mariadb 登录数据库

mysql -u root -p // 初始密码为空，直接回车即可 设置数据库密码

mysql>set password for 'root'@'localhost' =password('你的密码'); 配置编码

vim /etc/my.cnf 在后面加上

default-character-set =utf8 把在所有数据库的所有表的所有权限赋值给位于所有IP地址的root用户。

mysql> grant all privileges on *.* to root@'%'identified by 'password'; 到此，数据库可以实现远程连接

7.配置nginx

vim /etc/nginx/nginx.conf server {

    listen       80 default_server;

    listen       [::]:80 default_server;

    server_name  _;

    root         /root/www;



    # Load configuration files for the default server block.

    include /etc/nginx/default.d/*.conf;



    location / {

     rewrite .* /index.html break; // 用来解决路由刷新页面报404错误

   root /root/www;

    }



    error_page 404 /404.html;

        location = /40x.html {

    }

在 /root下创建 www文件

8.本地react项目打包

npm run build 将生成的build文件夹下的内容全部拷贝到www文件夹下

cd build

scp ./* root@你的ip地址:/root/www 到此前端项目配置完成

在/root下创建server文件夹，用来存储后端文件

将本地后端文件上传到server，注意不要将node_modules文件上传

在server文件下执行

npm install 执行

npm start 后端程序即可正常运行

但是将命令窗口关闭，程序就会停止运行

需要下载pm2守护进程

yum install -y pm2

打开server下的package.json文件

"scripts": {

"start": "nodemon bin/www",

"dev": "./node_modules/.bin/nodemon bin/www",

"prd": "pm2 start bin/www",

"test": "echo \"Error: no test specified\" && exit 1"

}, 发现prd对应的命令为 pm2 start bin/www

所以我们需要执行的命令为(在server文件夹下)

pm2 start ./bin/www --watch 通过pm2 list命令查看

发面status状态为online。

到此，项目部署完成

如果是browseRouter

打开页面，在路由跳转以后，在手动刷新页面，可能会出现404的问题，所以需要在nginx.conf文件中加上

    location / {

     rewrite .* /index.html break; // 用来解决路由刷新页面报404错误

    root /root/www;

    }