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

2021/7/18 17:08:25

本文主要是介绍阿里云部署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时,无法访问到云服务器中接口

 

6.2 ip端口设置为具体云服务器的公网IP时,能访问到云服务器中的接口

四、源码

react_node_server



这篇关于阿里云部署react项目+node服务接口的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程