前后端分离搭建网站

用的是react加nodejs，发现很少人写过这个，自己一点一点琢磨出大致步骤

前后端数据交互 get方法

如果是以get方法传递参数，那么后端用req.query接受即可，前段写法为/test?id=123

post方法

以post方法传递参数，后端需要使用body-parser中间件，前端在axios.post(url,{id:123})进行传参即可

部署nodejs到服务器上安装Node.js

1. 执行以下命令，下载Node.js的安装包。

wget

2. 执行以下命令，解压Node.js的安装包。

tar -xvf node-v12.4.0-linux-x64.tar.xz

3. 执行以下命令，重命名Node.js安装目录。

mv node-v12.4.0-linux-x64/ /usr/local/node

配置Node.js

1. 执行以下命令，将Node.js的可执行文件目录加入到系统环境变量中。

echo "export PATH=$PATH:/usr/local/node/bin" >> /etc/profile

2. 执行以下命令，使刚配置的Node.js环境变量立即生效。

source /etc/profile

3. 执行以下命令，分别查看node和npm版本。

node -v npm -v

测试Node.js环境

1.使用vim命令创建一个测试文件。

vim HelloWorld.js

2. 输入i进入编辑模式。

在HelloWorld.js文件中编写如下代码。

var http = require('http'); http.createServer(function (request, response) { response.writeHead( 200, { 'Content-Type': 'text/plain' }); response.end('Hello World\n'); }).listen(8080); console.log('Server started');

按Esc键退出编辑模式，输入侧:wq保存退出。

3.执行以下命令，运行HelloWorld.js文件。

node HelloWorld.js

4 打开浏览器，在地址范围输入http://:8080，例如[]()。

如果返回如下界面，则表示成功。

上传nodejs项目文件

scp -r test root@192.168.0.101:/var/www/

把当前目录下的test目录上传到服务器的/var/www/ 目录

安装mysql数据库遇到的bug

centos8安装mysql的源一直报错，于是换成了centos7

使用的命令

wget https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm

sudo rpm -Uvh mysql80-community-release-el7-3.noarch.rpm

sudo yum install mysql-community-server

sudo systemctl start mysqld.service

sudo grep 'temporary password' /var/log/mysqld.log

ALTER USER 'root'@'localhost' IDENTIFIED BY '123456';

将react的build包部署到nodejs中

在react中使用命令npm run build，可以将react项目生成为生产环境的build文件夹

之后在nodejs中使用命令即可访问到react的项目

app.use(express.static('build'))

配置域名安装nginx

sudo yum -y install nginx # 安装 nginx
sudo systemctl enable nginx # 设置开机启动
sudo service nginx start # 启动 nginx 服务

配置nginx反向代理

server {
    listen       80;
    server_name  node.fengxianqi.com;
    location / {
        proxy_pass ;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    error_page  500 502 503 504  /50x.html;
    location = /50x.html {
        root  /usr/share/nginx/html;
    }
}

解决断开连接服务器后nodejs进程也会退出使用forever插件 forever插件的安装

sudo npm install -g forever

forever插件使用

forever start add.js

前后端分离搭建网站

Linux相关栏目本月热门文章