【React实战】(一)react+node+Nginx实现登陆

image.png

0.代码地址

项目地址

1.开发

1.1 前端

• 分组件
  目前只实现了登录功能，欢迎页面。页面风格一致，所以使用了单页的方式，主页面(App)包括登录页面（Login）和欢迎页面(Welcome)两个组件
• 项目目录
  分为通用目录和模块目录，通用目录目前只包含前后端通信的功能，模块目录目前只包含登录模块
• 请求头
  post请求有三种方式
  • form表单形式
  • 文件上传形式
  • json对象形式
    我是用的是json对象形式
• 运行

npm start

• 打包

npm run-script buuild

• 配置文件抽离

1.2 后端

• 接口路由

  • route.js 负责接口路由功能
  • routes.js 负责接口的登记

• 跨域处理

res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Headers", "*");

• 请求body的接收

let body = [];
req.on('data', (chunk) => {
    body.push(chunk);
}).on('end', () => {
    body = Buffer.concat(body).toString();
    let jsonObj = JSON.parse(body);
    ...
});

• 配置文件抽离

2.部署

2.1 软件准备

• nginx

yum -y install nginx //安装
nginx           //启动
nginx -t        //检查配置文件是否合法
nginx -s reload //重载配置
nginx stop      //优雅退出（vs: kill -9 pid）
nginx restart   //彻底重启

浏览器访问

http://xxxx

• node

yum -y install nodejs
node -v

2.2 前端资源映射

• nginx配置

    listen       80;
    server_name  x.x.x.x;

    charset utf-8;
    access_log  /var/log/nginx/host.x.x.x.x.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    location /hello {
        alias /usr/share/nginx/html/hello;
        index index.html;
    }
    #此路径为前端内部路径，应该由前端内部解决，解决方式webpack配置publicPuth:./static
    location /static {
        alias /usr/share/nginx/html/hello/static;
    }

• 端口开放
  阿里云--安全组策略--入方向--80

• 路径问题

# nginx 命令路径
/usr/sbin/nginx
# nginx 配置文件路径
/etc/nginx/conf.d/http.x.x.x.x.conf
# nginx 前端资源
/usr/share/nginx/html/hello
# nginx 日志路径
/var/log/nginx

2.3 后端反向代理

• nginx配置

listen       3000;
server_name  x.x.x.x;

charset utf-8;
access_log  /var/log/nginx/host.x.x.x.x_3000.access.log  main;

location / {
    proxy_pass http://127.0.0.1:3001/;   #后端服务
}

• 端口开放
  阿里云--安全组策略--入方向--3000-9000

• 启动命令

nohup node app >log.out  2>&1 &  #后台启动，并记录标准输出日志和标准错误日志（stdout,stderr） 

• 路径问题

/usr/local/node_servers/hello  #node后端项目部署路径

3.版本管理

3.1 创建项目

# 本地项目使用Git管理
git init
git add .
git commit -m ""

# 码云创建项目

# 本地代码提交
git remote add origin git@gitee.com:username/projectname.git # 登记
git pull origin master --allow-unrelated-histories  #拉取远程分支到本地并与本地仓库合并
# 解决冲突.gitignore,README.md
git add . 
git commit -m ''
git pull origin master #再次拉取远程分支最新代码
# 本地代码推送到码云
git push origin master

4.总结

• 先抽象后具体，搭好框架，做好设计，不要陷入细节里
• linux文件路径规范
• 跨域
• 后端响应接口，路由处理
• 调试技巧，二分法