【玩转 Cloud Studio】使用Cloud Studio 进行python开发最佳实践

背景

作为一个Python开发，经常需要把各种pip lib安装到自己的电脑上，导致自己的电脑存储占用越来越多而且越来越卡。如果我们有一个物美价廉的远程开发平台，每个月还有1000分钟(2C4G)免费额度的远程开发平台，可以把lib都安装上去在上面进行开发工作，那不是美滋滋？Cloud Studio就应运而生啦。每个月1000分钟，换算成小时就是41个小时，非常够用了。

官网：https://coding.net/products/cloudstudio

Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能使用。通过上面官网打开之后，界面大致是下图，是不是很熟悉~ VSCODE，这我会用！

当然，Cloud Studio不只是可以使用Python进行开发，这篇文章仅挖掘Python的最佳实践。

本文会从数据开发与Web开发两个方向来讲实践方案，当然第一步先是环境配置啦。

环境配置

登录进入Cloud Studio后，在常用模版选择Python。当然如果是多个语言开发就选择All in One，方便快捷。

PS：记得登录，登录之后才有免费的1000分钟/月的额度。

等待一会创建工作空间时间

等了几秒就可看到界面跟Flask Demo啦

如果需要安装我们需要的lib，可以直接在下面的命令行输入，如

pip3 install pandas

即可

当然我们肯定不用担心写的代码会丢失，我们可以使用自带的版本管理组件，将写好的代码保存至Git或者CODING上

Web开发

刚刚我们在demo已经有Flask的demo了，距离一个完整的web项目还差一个web框架，我们这里用vue作为前端框架，实现一个简单的前后端分离；

@vue/cli 4.5.14

yarn 1.22.17

Flask 1.1.2

Python 3.9

安装npm，启动 Vue 服务

$ cd frontend $ npm run server

打开浏览器访问 http://localhost:8080 会有一个 "Wellcome to Your Vue.js App" 的界面。后面对 frontend 项目的修改会自动刷新网页。

下面是如何在 Vue.js(8080) 中调用到 Flask(5000) 的 /api/ping 服务，当前在 frontend 目录中

创建 src/components/Ping.vue 文件，内容为

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>
 
<script>
export default {
  name: 'Ping',
  data() {
    return {
      msg: 'Hello!',
    };
  },
};
</script>

编辑 src/router/index.js 文件，高亮行为新加的内容

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Ping from '../components/Ping.vue';
 
Vue.use(VueRouter);
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/ping',   # 用来调用 Flask 的 "/api/ping" API
    name: 'Ping',
    component: Ping,
  },
  {
    path: '/ping_xyz', # 这个用来测试，非 Flask 中定义的路由，可被 Vue 进行处理
    name: 'Ping',
    component: Ping,
  },
];
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});
 
export default router;

对 src/App.vue 的 <template> 中的导航部分删除，内容变为

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

浏览器中访问 http://localhost:8080/ping, "Hello!" 显示的还是 src/components/Ping.vue 中 data 的内容

Flask 与 Vue.js 整合

from flask import Flask
from config import Config
from flask_cors import CORS

app = Flask(__name__, static_folder='../../dist', static_url_path='/')
app.config.from_object(Config)

CORS(app)

from app import routes

最后运行python3 app.py，大功告成！

数据开发

Jupyter Notebook简介

• Jupyter Notebook是一款开源的Web应用，类似于Web笔记本，我们可以使用它编写代码、公式、Markdown解释性文本和绘图，并且可以把创建好的文档进行分享。
• Jupyter Notebook最为方便的功能在于其可以实时运行代码，并且返回代码段的运行结果，支持可视化、IDE等能力，大大提高了模型搭建和分析的效率。
• 目前已经广泛应用于数据处理、数据模拟、统计建模、机器学习等重要领域。

相信数据开发同学对jupyter notebook是再熟悉不过了，我们用web端的时候，常常有个问题就是没有代码提示、代码补全，也不能像IDE一样去查看源码，需要经常翻文档，很是麻烦。

我们的Cloud Studio当然也支持jupyter notebook功能，可以再工作空间新建一个test.ipynb文件，之后即可享受ipynb即可运行的方便+代码补全与提示的功能，还不占用自己的CPU与内存，写代码也变成一种享受而不是负担了~

在右边的按钮，可以切换python版本，如果我们安装了conda，就可以在这里切换环境啦

点击右下角的Jupyter Server，可以切换运行的Server地址。如果我们有远程的GPU服务器，我们可以在GPU服务器安装好Jupyter服务器之后直接远程过去训练模型。