阿里云部署react项目+node服务接口

2021/7/18 17:08:25

编程Tag： react node 接口 web nginx server XXX

本文主要是介绍阿里云部署react项目+node服务接口，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、创建node服务（个人电脑）

二、创建web项目（个人电脑）

三、把node和web部署到服务器

1.服务器端准备工具

2.部署node服务

3.部署web

四、源码

一、创建node服务（个人电脑）

我们用极简的方式在本地电脑创建服务，没有任何附加功能

1.新建一个server文件夹

2.进入server文件夹，使用npm init 或者yarn init，然后一路enter

3. yarn add express cors （express 封装了http等插件的框架， cors解决跨域）

4.在server 内新建 server.js，代码如下：

var express = require('express')
var cors = require('cors');

var app = express();
app.use(cors())

app.post('/api/test', (req, res) => {
    res.json({
        code: 0,
        message: '成功',
        content: '接口调用成功',
    })
})

app.listen(4000, () => {
    console.log('正在监听4000端口');
})

5.启动，输入node server（或node server.js），看到dos 窗口如下表明接口服务启动了

6.使用接口调用工具postman，可以直接调用试试，得到返回值，证明接口没问题

或者接口改用get方式，然后直接在浏览器访问

var express = require('express')
var cors = require('cors');

var app = express();
app.use(cors())

app.get('/api/test', (req, res) => {
    res.json({
        code: 0,
        message: '成功',
        content: '接口调用成功',
    })
})

app.listen(4000, () => {
    console.log('正在监听4000端口');
})

二、创建web项目（个人电脑）

创建web ，这里使用最常用的脚手架 create-react-app

1.npx create-react-app web

2.打开 App.js 我们使用原生的fetch 调用接口，运行查看控制台 network

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const testApi = () => {
      fetch('http://localhost:4000/api/test', { method: 'POST' })
        .then((res) => {
           return res.json()
        })
        .then((data) => {
          console.log(data);
        })
  }
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <button onClick={testApi}>测试接口</button>
      </header>
    </div>
  );
}

export default App;

3.npm run start 启动react项目，点击"测试接口"按钮本地调用成功如下：
（本地电脑调用接口时报错了，web部署到服务器后能调用到公网IP上的接口）

4.编译打包web

npm run build 打包项目
注意：需要在package.json中加入 "homepage": "react_demo"

三、把node和web部署到服务器

1.服务器端准备工具

依次安装即可
nginx　　

        安装nginx，参考https://www.runoob.com/linux/nginx-install-setup.html
        配置全局nginx命令，参考https://www.cnblogs.com/NTWang/p/13066602.html
git
yum -y install git
nvm （非必须）
        node版本管理工具
        curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash　　　        source ~/.bashrc // 使当前shell读入路径为filepath的shell文件并依次执行文件中的所有语句，通常用于重新执行刚修改的初始化文件，使之立即生效，而不必注销并重新登录
node
        下载安装node
        nvm i stable  // 安装最新稳定版node
        使用nvm安装node之后，直接运行node命令会报错 node: command not found?
forever
        node的守护进程　
        npm i forever -g // 参考https://www.cnblogs.com/pxjbk/archive/2018/12/24/10169830.html　　        forever list 正在守护的项目
        forever stop 项目目录  停止守护　
        forever start 项目目录开启守护

2.部署node服务

1.服务器中创建www文件夹，然后在www文件夹中创建存放node项目的目录

cd var
mkdir www
cd www
mkdir react_demo_server //存放node项目

2.将本地电脑node项目上传到云服务器，通过git或者scp命令

进入react_node_server/server目录
scp -r * root@xxx.xxx.xxx.xxx:/var/www/react_demo_server
node_modules依赖也上传到云服务器中了。也可以不上传，在服务器中通过npm i下载依赖

3.运行node服务

node server.js (node服务配置的是4000端口，需要在阿里云控制台添加安全组规则）

此处在阿里云安全组规则的4000端口设置了允许和禁用，都没有影响接口的访问。

4.测试接口（在[3.部署web]之后的网页中点击“测试接口”按钮）

　　在测试页点击测试，查看控制台看到返回结果则前后端部署完成。

5.守护node进程，永久运行

　　最后使用forever 来守护node进程（如果我们直接用node去运行，当关闭服务器远程链接时，ndoe服务也会关闭）
　　forever start /var/www/react_demo_server/server.js

3.部署web

1.本地电脑打包web项目，前面已打包

2.在服务器www文件夹中创建存放web项目的目录
cd var/www
mkdir react_demo //存放web项目

3.将本地电脑web（build目录）上传到云服务器，通过git或者scp命令

进入web目录
scp -r build/* root@xxx.xxx.xxx.xxx:/var/www/react_demo

4.云服务器中配置nginx，并启动nginx

打开nginx配置文件编辑：vim /usr/local/nginx/conf/nginx.conf
下面内容复制放在server里面 ps:可以配置多个站点
# react_demo
location /react_demo {
    root /var/www;
    index  index.html index.htm;
}

启动nginx：./nginx

在本地电脑浏览器中打开“服务器地址+react_demo”，比如：xxx.xxx.xxx.xxx/react_demo，
正常打开说明web部署完成并且成功。　　　　　　
如果出现页面报404 ，则需要检查nginx配置 ，文件路径。
如果是加载资源404，去需要看下资源加载路径，看看hoempage的配置和nginx是否对应。

注意：本地电脑浏览器可以分别打开xxx.xxx.xxx.xxx和xxx.xxx.xxx.xxx/react_demo访问不同的站点内容。

5.web项目调用服务器接口IP的两种写法区别

前提：web项目通过build编译打包上传到云服务器中，然后使用nginx运行

localhost 和实际公网IP

5.1 ip端口设置为localhost时，无法访问到云服务器中接口