使用 React 和 NodeJS 创建一个全栈项目

前言

我们都知道 React 非常优秀并且非常出色，我们可以使用 create-react-app 快速搭建一个前端应用。但是由于 React 构建出来的只是前端静态资源（如：HTML、CSS 、JS 等），往往不能独立部署，我们还需要一个 WEB 服务器，还需要调用 API；在本文中，我将使用 React 和 NodeJS 创建一个全栈项目。介绍下如何让 Node.js 作为 web 服务器来加载 React 构建出的静态资源，如何让 React 程序可以直接调用 NodeJS API。

准备工作

在开始之前，请确保你的计算机上已经安装了 Node 和 NPM。

创建项目目录

首先我们用命令行创建一个 my-app 的目录，并且进入到 my-app

$ mkdir my-app
$ cd my-app

初始化 React 程序

然后使用 create-react-app 创建一个 React 程序，这部分是客户端的代码，所以命名为 client

$ npx create-react-app client

使用 NodeJS 来实现我们的 API

创建 API 目录

$ mkdir api
$ cd api

初始化 nodeJS 项目

npm init -y

Express.js 是一个非常轻量的 Node.js 框架，安装 express。

npm i --save express

在 api 文件夹下，建立 server.js

// api/server.js

const express = require('express')
const app = express()
app.use(express.json())

app.get('/', function (req, res) {
  res.send("It's working!")
})

app.listen(3000, () => {
  console.log('app listening on port 3000')
})

把 api 服务起在 3000 端口

在 package.json 中的 scripts 部分添加启动脚本

"scripts":{
    "start": "node ./api/server.js"
}

然后运行, 访问 http://localhost:3000 ,就可以在浏览器中看到如下效果。

npm start

React 中访问 API 接口

先在 ./api/server 修养接口返回数据是 json

app.get('/', function (req, res) {
  res.json({ name: '张三' })
})

更改 ./client/src/app.js

import React, { useEffect, useState } from 'react'

export default function App() {
  const [name, setName] = useState('')

  useEffect(() => {
    fetch('http://localhost:3000')
      .then((res) => res.json())
      .then((data) => setName(data.name))
  }, [])

  return <div>Hello {name}</div>
}

这个时候在页面上是看不到效果，看下 chrome 控制台会看到如下提示。

这是因为在发出 Fetch 请求时发生了跨域请求。为了解决这个问题：

方案一

更改接口允许跨域，我们需要在安装 cors 这个包:

npm install --save cors

更改 ./client/src/app.js, 通过中间件的方式引用这个函数。

const cors = require('cors')

app.use(cors())

然后停止服务， npm start 重新启动，然后就可以看到效果了。

方案二

create-react-app 支持接口代理设置

开发环境

在 client/package.json 设置


proxy:localhost:3000

然后在 jsx 中就可以使用相对路径请求了

useEffect(() => {
  fetch('/api')
    .then((res) => res.json())
    .then((data) => setName(data.name))
}, [])

生产环境

在 serve.js 中增加以下代码：

if (process.env.NODE_ENV === 'production') {
  // 把静态资源指向 `client/build`
  app.use(express.static(path.resolve(__dirname, '../client/build')))

  // 其他任何没处理的接口都返回 index.html
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'))
  })
}

npm 安装 cross-env这个包，区分开发环境还是生产环境.

更改在 api/package.json 设置

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development node ./api/server.js",
    "start": "cross-env NODE_ENV=production node ./api/server.js"
  }
}

方案三

开发环境还是使用 proxy 代理，生产环境使用 nginx 反向代理实现。

本地我使用了 docker-compose

使用以下 docker-compose.yml

web:
  image: nginx
  volumes:
    - ./nginx.conf:/etc/nginx/nginx.conf:ro
  ports:
   - "8080:80"

根目录下建一个 nginx.config

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;
    keepalive_timeout  65;
    gzip  on;

    upstream server {
        server server:3001;
    }
    upstream web {
        server web:3000;
    }

    server {
        listen 80;
        server_name  localhost;
        location / {
            proxy_pass http://web/;
        }

        location ^~ /api/ {
            proxy_pass http://server/api/;
        }
    }
}

启动容器服务

docker-compose up -d

然后访问 http://localhost:8080 ,就可以在浏览器中看到效果了。

最后

小伙伴们，你们会使用那种方案呢，欢迎评论区留言。

希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。