Web 服务预览

本文介绍了服务预览功能。

在 DevStudio 工作空间中开发 Web 服务时,可以通过服务预览功能,将空间中的端口开放到浏览器访问。

插件使用

服务预览功能会自动检测空间中监听的端口,开启预览。如果有未检测到的端口,也可以点击【新增端口】手动开启预览。服务预览支持 HTTP 和 HTTPS,浏览器打开以及复制地址默认为 HTTPS,如有需要可使用 HTTP 访问。

对于开启的预览端口,可以设置端口的可见性:

  • 公开:当前端口开放的域名公开,允许所有人访问

  • 私密:当前端口开放的域名私密,仅允许自己访问

注意事项:

  • 预览端口需要应用服务启动绑定到 0.0.0.0 地址,而非 localhost 或者 127.0.0.1。比如:

        app.run(debug=True, host="0.0.0.0", port=8080)
    image
  • 切换预览端口可见性(公开/私密)时,预览地址会发生变更,需要重新打开访问。

  • 预览端口号应在 1024 ~ 65535 之间。

服务预览

FAQ

1. IDEA 版本如何服务预览?

Web IDEA 版本内置了命令行工具,可以打开 terminal,通过 preview --help 查看用法。

查看用法及示例

  1. vue 项目中出现 Invalid Host header 报错,如何解决?

可设置跳过 host 检查

  • vue3,修改 vue.config.js

// vue3,修改 vue.config.js
module.exports = {
 devServer: {
    disableHostCheck: true
 }
}

说明:webpack 5 中 disableHostCheck 被遗弃了,可尝试以下配置:

// vue3,修改 vue.config.js
module.exports = {
 devServer: {
    allowedHosts: 'all'
 }
}

  • vue 版本为 2.x,修改 webpack.dev.conf.js

// 在vue-cli 版本为2.x,修改 webpack.dev.conf.js
devServer: {
  disableHostCheck: true,
}
阿里云首页 云效2020 相关技术圈