算自己一个备忘录吧。如果你想拿无门槛优惠券，那对你也有用。

云开发平台的网址是：https://workbench.aliyun.com/
项目提交及点赞地址：https://developer.aliyun.com/article/770243?groupCode=devcloud

项目选择

老师的原话是：“基于云开发平台开发任意形式的Web应用+参赛应用本身也要有自己的前后端通信和数据库操作”。
因此大概有几个方向，大家可以参考下。

demo版

在云平台上有几个现成的项目，如果是为了无门槛优惠券的话，可以直接使用：云开发示例库

3D控制器

将手机变成3D控制器：https://github.com/konaraddi/web-riimote

转移文件

mv

可以在cloudide使用git clone克隆Github项目后，在那个文件夹内使用mv * .[^.]* ../命令将文件夹内的内容转移到根目录。这个mv命令是可以转移隐藏文件的。

git

可以使用git命令（我是用的Sourcetree）来将GitHub的内容转移到云开发平台的代码仓库中，然后在cloudide内使用同步按钮，将代码仓库的东西拉到cloudide内。

我自己的项目

以下为保密内容，先写在博客里以防自己忘记了。项目弄完了，不用保密了。

项目选取

在线播放音乐

https://github.com/maomao1996/Vue-mmPlayer

有通信，貌似也靠谱，就是不自带数据库需要自己改造下。

在线网页游戏

https://github.com/damian-pastorini/reldens-skeleton

啥都有，优先选择吧。

日志

2020/8/13

一个通宵把reldens-skeleton在本地和cloudide跑起来了，但在部署的时候出问题了，阿里源缺组件。我之前看到过别人说过cnpm有问题，没想到真的碰上了，手动指定官方源是可以安装的，但指定阿里源就找不到安装包。

解决方法：
可以在.workbench内找到找到 cicd手动修改 npm install --production --registry=https://registry.npmjs.com手动指定安装源为官方源。
但因为serverless限制了50M，导致部署失败。据说下周开放更大的空间，还是算了。启用备用方案
因为它不是用的普通的框架，所以没法部署。链接到数据库需要修改dist内文件的配置，但我不会。

2020/8/14

首页报：/top/list 接口提示 Requset failed with status code 500
因为api废弃了idx方式，改改播放器就行了。
路径是Vue-mmPlayer：

src/api/index.js

排行榜详情的idx改成id，再重新编译。
这里的编译可以使用

npm install --registry=https://registry.npm.taobao.org
npm run build

然后把dist内的文件按照纯静态部署上去就行了。
（说起来我那个游戏的也有builder文件，以后有机会试试。主要是数据库连接问题，post没反应，可能是要把.env内的数据库配置集成进去）

把Vue-mmPlayer内的dist像纯静态扔在workbench里，使用nodejs迁移方案来部署，可以从临时域名访问。然后我可以试试获取前端post用户id，以及看能不能获取前端的ip，写入数据库。用作“用户画像”

部署api服务器在serverless成功
关键点有两个：
1.查看package.json，里面的dependencies，里面有个组件是express，刚好是老师之前提到过的一个nodejs架构，因此我们可以使用workbench的express迁移方案来部署。
2.看readme内的文件，有两个关键点。
1）

## 添加依赖
- 在 package.json 中，添加开发依赖

{
  "name": "xxxxxx",
  "version": "xxxx",
  .....
  "devDependencies": {
    "@midwayjs/faas-cli": "*"
  }
}

这里面的含义是要安装@midwayjs/faas-cli组件，也就是说在之前项目的基础上要加入@midwayjs/faas-cli，而不是直接使用原来的项目。
2）

## 部署
- 结束调试模式
- 在 app.js 中注释对 3000 端口的监听
- 点击 CloudIDE 侧边栏的「WB」部署插件，选择要部署的环境，点击「部署」，等待部署完成即可
- 默认打包 app/ 和 config/ 两个目录，如果你的应用需要将其他目录也一起打包，需要在 f.yml 中添加如下配置，比如 util 目录也要打包：

package:
  include:
    - util

原来的readme这里package后面没带冒号，我在这里给他加上了。
还有这里是选择打包的文件，如果对项目不熟悉的话，建议打包所有的文件。
就像我的：

package:
  include:
    - util
    - module
    - docs
    - module_example
    - plugins
    - public
    - static
    - test

一股脑的全部打包完成了。
幸好没超过50M

还有直接在ide拖过去覆盖可能会无法覆盖掉部分文件。比如我这个api文件夹内的package.json文件就没成功覆盖。
建议初次创建项目后不马上打开ide，先用git 处理掉原来的文件。然后第一次打开cloudide的文件是从git同步的文件。

部署上线后，发现api失效，是因为Vue-mmPlayer在前端主动加了:3000，手动修改下前端文件就行了。也就一个js文件，不用重新编译。

https://apigateway.console.aliyun.com/

配置了下防盗链和限流。

对接了百度云cdn，蹭蹭它的waf
http://music.coldark.cn

修改了下最后一课的教的东西，将其变为发卡站。
然后点击自动跳转是利用了：https://cloud.tencent.com/developer/article/1537796教程

代码如下：

.then(resp => {
  if (resp.success === true) {
    alert(`登录成功，即将进入播放页面。ID：${resp.user.name}`)
    window.location.href = "http://music.coldark.cn"
  } else {
    alert(`登录失败，提示信息：${resp.message}`)
  }
})

然后api和music对接referer白名单，实现只能从发卡站访问

部署完成，在韩国的机器上配置nginx吧

最后还是不用阿里源的api网关，因为它ip识别是用户的ip，而不是仅仅对反代服务器白名单。

https://www.xiaoz.me/archives/12934

配置了下nginx的referer

workbench的cloudide挂了打不开，去https://ide.aliyun.com/手动冻结，然后再打开就行了。

手动使用官方源

npm install firebaseui@^4.6.1 --registry=https://registry.npmjs.com

其他

加速

国内访问github速度是真的慢，虽然可以配置socks5代理，但还是sniproxy好用,下面是我写的脚本，你可以直接拿来用。
对GitHub以及原版的npm有加速。没钱给你们用gia的线路，用的163，比垃圾ntt强就行了

sudo su
wget -N  --no-check-certificate http://cdn.jsdelivr.net/gh/wnark-store/tsvideo-0@latest/autohosts.sh -O autohosts.sh && chmod +x autohosts.sh  && bash autohosts.sh

版权

如果你使用了别人的项目，请不要删掉版权信息，这是最基本的礼仪。

安全

涉及到web项目不可避免的就需要注意安全了。注意在发布自己项目前对接好自己的CDN，如果没钱用国内的CDN的话用cloudflare也不错。建议有条件的去开个cloudflare plesk，把waf打开，也就几块钱。单纯的CDN对cc攻击的防御能力很弱。仅仅用API请求QOS也会导致普通用户访问不了。这是根据我的博客被打出来的经验，爱信不信
单纯的注入啥的貌似不用管，阿里云那边自动帮你搞定了。对了，涉及到accesskey之类的最好别放源码里，用workbench的环境变量。

平常心平常心

版权属于：寒夜方舟

本文链接：https://www.wnark.com/archives/124.html

本站所有原创文章采用署名-非商业性使用 4.0 国际 (CC BY-NC 4.0)。 您可以自由地转载和修改，但请注明引用文章来源和不可用于商业目的。声明：本博客完全禁止任何商业类网站转载，包括但不限于CSDN，51CTO，百度文库，360DOC，AcFun，哔哩哔哩等网站。