「Serverless雲開發72變」來左邊跟我一起畫個龍，右邊跟我用AntV畫個圖

利用雲開發平台畫圖表

最近愛上了一個畫圖表的架構，antV，是以就想着利用阿裡雲雲開發平台來學習一波這個好用的圖表工具，在這裡可以畫出各種各樣的美麗圖示，在配合雲開發平台十分友善的部署，學習起來真是太爽了

那麼這就有兩種開發方式：一種是在本地開發，開發完後打包項目，利用雲開發平台的nodejs存量遷移進行部署；第二種是直接在雲開發平台進行開發，所有寫代碼環節都在webIDE中進行，這篇文章主要對兩種方式進行講解

所用技術：雲開發平台，react，antdV

開發前準備

首先要有一個阿裡雲賬号，然後還需要開通阿裡雲雲開發平台(

http://workbench.aliyun.com/),

接着跟着我來一步一步來進行雲上開發！

首先要建立一個項目，實驗室 -> WEB -> Midway Serveless OTS ,(這裡并沒有用到OTS哦，隻是用到了這個·方案生成的react模闆)

然後給應用起個名字并添加一段介紹

點選上一步完成後會有一小段時間的項目初始化過程，然後會出現下圖的開發部署四個字，點選開發部署

點選過後會打開webIDE，可能會慢一些，耐心等待。加載成功後就可以看到如下界面，到這一步就開始正式的開發了！

将項目跑起來

開發前首先要進行的就是安裝依賴，照着README.md裡的方法進行用npm+淘寶鏡像安裝

安裝完成後，運作

npm run dev

, 終端會給出一個臨時位址，通路這個位址就可以看到這個項目預設的樣子了

進行開發

我們不需要它自帶的那個模闆，我們将它自帶的删掉，書寫自己的代碼

整個項目的依賴都有：

"@ant-design/charts": "^1.0.4",
"@antv/g2": "^4.0.15",
"@antv/g6": "^3.8.3",
"@antv/graphin": "^1.5.0",
"@antv/l7": "^2.2.41",
"@antv/l7-maps": "^2.2.41",
"antd": "^4.8.0",
"bizcharts": "^4.0.14",
"react-router-dom": "^5.2.0",           

需要先将這些一來進行安裝，安裝方式和上面安裝方式一樣使用npm + 淘寶鏡像的方式安裝

然後書寫我們的項目入口檔案 index.tsx:

import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom';
import './index.css';
import { HashRouter  as Router, Route } from "react-router-dom";

import AdminIndex from './components/AdminIndex/index'

export default function App() {

  return (
    <Router>
      <div>
        <Route path="/" component={AdminIndex} />
      </div>


    </Router>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);           

在 index.css 引入antd的樣式：

@import '~antd/dist/antd.css';           

然後書寫我們布局元件 AdminIndex ：

import React, { useState } from 'react';
import { Route } from "react-router-dom";

import './index.css'
import { Layout, Menu, Breadcrumb } from 'antd';

import {
  BarsOutlined,
  PlusCircleOutlined,
  BarChartOutlined,
  FormOutlined
} from '@ant-design/icons';

import G201 from '../G201/index'
import G202 from '../G202/index'

import G2Plot01 from '../G2Plot01/index'
import G2Plot02 from '../G2Plot02/index'
import G2Plot03 from '../G2Plot03/index'
import G2Plot04 from '../G2Plot04/index'

import G601 from '../G601/index'
import G602 from '../G602/index'

import Graphin01 from '../Graphin01/index'
import Graphin02 from '../Graphin02/index'
import Graphin03 from '../Graphin03/index'

// import L701 from '../L701/index'
import L702 from '../L702/index'

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

function AdminIndex(props) {

  const [collapsed, setCollapsed] = useState(false)
  const [url, setUrl] = useState('無')

  const onCollapse = () => {
    setCollapsed(!collapsed)
  }

  const handleClickArticle = e => {
    setUrl(e.key)

    switch (e.key) {
      case "G201":
        setUrl('G201')
        props.history.push('/G201')
        break
      case "G202":
        setUrl('G202')
        props.history.push('/G202')
        break
      case "G2Plot01":
        setUrl('G2Plot01')
        props.history.push('/G2Plot01')
        break
      case "G2Plot02":
        setUrl('G2Plot02')
        props.history.push('/G2Plot02')
        break
      case "G2Plot03":
        setUrl('G2Plot03')
        props.history.push('/G2Plot03')
        break
      case "G2Plot04":
        setUrl('G2Plot04')
        props.history.push('/G2Plot04')
        break
      case "G601":
        setUrl('G601')
        props.history.push('/G601')
        break
      case "G602":
        setUrl('G602')
        props.history.push('/G602')
        break
      case "Graphin01":
        setUrl('Graphin01')
        props.history.push('/Graphin01')
        break
      case "Graphin02":
        setUrl('Graphin02')
        props.history.push('/Graphin02')
        break
      case "Graphin03":
        setUrl('Graphin02')
        props.history.push('/Graphin03')
        break
      case "L701":
        setUrl('L701')
        props.history.push('/L701')
        break
      case "L702":
        setUrl('L702')
        props.history.push('/L702')
        break
    }


  }

  return (
    <Layout style={{ minHeight: '100vh' }} >
      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse} style={{ position: "fixed", height: "100%" }}>
        <div className="logo" style={{ height: 32, backgroundColor: '#ffffff33', color: '#fff', margin: 16, textAlign: 'center', lineHeight: 2.2 }}>歡迎</div>
        <Menu theme="dark" defaultSelectedKeys={['Manager']} mode="inline" onClick={handleClickArticle}>
          <SubMenu key="sub1" icon={<BarsOutlined />} title="G2">
            <Menu.Item key="G201" icon={<PlusCircleOutlined />}>
              G201
            </Menu.Item>
            <Menu.Item key="G202" icon={<PlusCircleOutlined />}>
              G201
            </Menu.Item>
          </SubMenu>

          <SubMenu key="sub2" icon={<BarsOutlined />} title="G2Plot">
            <Menu.Item key="G2Plot01" icon={<PlusCircleOutlined />}>
              G2Plot01
            </Menu.Item>
            <Menu.Item key="G2Plot02" icon={<PlusCircleOutlined />}>
              G2Plot02
            </Menu.Item>
            <Menu.Item key="G2Plot03" icon={<PlusCircleOutlined />}>
              G2Plot03
            </Menu.Item>
            <Menu.Item key="G2Plot04" icon={<PlusCircleOutlined />}>
              G2Plot04
            </Menu.Item>
          </SubMenu>

          <SubMenu key="sub4" icon={<BarsOutlined />} title="Graphin">
            <Menu.Item key="Graphin01" icon={<PlusCircleOutlined />}>
              Graphin01
            </Menu.Item>
            <Menu.Item key="Graphin02" icon={<PlusCircleOutlined />}>
              Graphin02
            </Menu.Item>
            <Menu.Item key="Graphin03" icon={<PlusCircleOutlined />}>
              Graphin03
            </Menu.Item>
          </SubMenu>

        </Menu>
      </Sider>
      <Layout className="site-layout" style={{ marginLeft: 200 }}>
        <Header className="site-layout-background" style={{ padding: 0 }} >
          <div style={{ fontSize: 28, paddingLeft: 20, fontWeight: 'bold' }}>antdV</div>
        </Header>
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>{url}</Breadcrumb.Item>
          </Breadcrumb>
          <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
            <div style={{ padding: 24, background: '#fff', minHeight: 450 }}>

              <div>
                <Route path="/G201" exact component={G201} />
                <Route path="/G202" exact component={G202} />
                <Route path="/G2Plot01" exact component={G2Plot01} />
                <Route path="/G2Plot02" exact component={G2Plot02} />
                <Route path="/G2Plot03" exact component={G2Plot03} />
                <Route path="/G2Plot04" exact component={G2Plot04} />
                <Route path="/G601" exact component={G601} />
                <Route path="/G602" exact component={G602} />
                <Route path="/Graphin01" exact component={Graphin01} />
                <Route path="/Graphin02" exact component={Graphin02} />
                <Route path="/Graphin03" exact component={Graphin03} />
                {/* <Route path="/L701" exact component={L701} /> */}
                <Route path="/L702" exact component={L702} />
              </div>

            </div>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>跌倒的小黃瓜 ©2020 Created by Aliyun Midway</Footer>
      </Layout>
    </Layout>
  )
}

export default AdminIndex
           

可以看到這裡就是展現一個又一個元件，

具體到每個元件我就放到github上了

, (

https://github.com/1793523411/serveless-antdv),

來看一下最終的效果吧

更多細節可以通路利用雲開發部署的位址：

項目展示位址

到這裡代碼就寫完了，下面就是将它上線了

利用雲開發平台部署上線

先将寫好的代碼都送出到雲開發平台配置設定的倉庫，防止代碼丢失然後按照下圖進行日常環境部署和預發環境部署

部署完成後，到應用清單找到該用用的 CNAME位址

将該cname解析到一個自己已備案的域名上，使用CNAME解析，解析記錄為上面的 CNAME 位址

然後傳回應用清單，将域名補充到應用資訊上，進入webIDE進行線上部署

部署成功後就可通過你自己的域名通路了

另一種方式，使用nodejs存量遷移

下面是另一種部署方式

在本地使用腳手架自己建立react項目，然後将上面在webIDE中的代碼進行拷貝，然後運作起來發現沒有錯誤，就可以打包，打包結果檔案世紀将要部署的檔案

打開webIDE看到如下界面：

直接将上面打包好的檔案拖到根目錄：

然後按照第一種相同的方式進行日常環境部署和預發環境部署，解析域名，線上部署，最後上線

最後這是第二種方式的部署結果

本文參加Serverless雲開發的征文活動

已經得到作者授權。