开发者社区 > 云原生 > Serverless > 正文

请问下前端怎么在Serverless应用引擎上发布呢?有没有整体的操作文档或者演示视频?

请问下前端怎么在Serverless应用引擎上发布呢?有没有整体的操作文档或者演示视频?

展开
收起
三分钟热度的鱼 2023-07-11 19:15:32 68 0
3 条回答
写回答
取消 提交回答
  • 北京阿里云ACE会长

    静态文件部署
    适用于纯静态的HTML/CSS/JS前端项目。

    操作步骤:

    将前端代码打包生成dist目录

    在Serverless应用引擎控制台上传dist目录为静态文件,指定访问路径

    提供一个index.html文件作为首页

    容器镜像部署
    适用于需要构建生成的前端项目。

    操作步骤:

    本地安装Node.js、 npm等

    编写package.json 定义脚本

    使用Webpack等构建静态文件

    创建Dockerfile,使用Node.js镜像为基础层

    Copy
    FROM node
    RUN npm install -g
    COPY . /app
    CMD ["npm", "run", "build"]
    构建镜像并推送到镜像仓库

    在Serverless应用引擎指定这个镜像地址为应用运行时

    以上两种方式的整体步骤都是比较清晰的。

    有些前端视频教程也普遍适用:

    介绍静态文件部署的基本概念及配置
    演示使用Webpack+Docker方式构建前端容器镜像

    2023-07-29 09:00:39
    赞同 展开评论 打赏
  • 在Serverless应用引擎(SAE)上发布前端应用主要涉及以下步骤:

    1. 准备前端项目:确保您的前端项目已经完成并可以在本地正常运行。这包括HTML、CSS、JavaScript等文件以及任何依赖项。

    2. 创建SAE应用:登录到阿里云控制台,进入SAE服务页面,并创建一个新的应用。在创建应用时,选择适当的应用模板和计算资源配置。

    3. 上传前端文件:在应用创建后,进入应用的详情页,点击“部署”按钮。在弹出的部署页面中,选择“手动部署”,然后将前端项目的静态文件上传至部署包中。

    4. 配置路由规则:在部署页面中,您可以设置路由规则来指定前端应用的访问路径。根据需要进行配置,例如将所有请求都转发到index.html文件,以支持单页应用程序的前端路由。

    5. 部署应用:配置完毕后,点击“部署”按钮,SAE会根据您的配置启动实例并部署前端应用。

    2023-07-23 22:36:30
    赞同 展开评论 打赏
  • 对于前端项目,您可以以镜像的形式部署到SAE,比如镜像中包含一个nginx,其中的静态资源有两种处理方式:

    静态资源可以直接打到镜像中,这种模式缺点在于每次变更需要重新发版,优点在于可以完全使用SAE的发版、灰度、回滚等机制
    静态资源放到NAS或者OSS,再挂载到nginx镜像的容器中,这种模式优点在于不需要经常重启容器,缺点是没有版本控制

    具体采用哪种模式可以视您的发版频率和流水线适配的简易程度而定。此回答整理自钉群“【3群】Serverless应用引擎(SAE)用户群”

    2023-07-11 19:27:58
    赞同 展开评论 打赏

快速交付实现商业价值。

相关产品

  • 函数计算
  • Serverless 应用引擎
  • 相关电子书

    更多
    Vue.js 在前端服务化上的探索与实践 立即下载
    阿里文娱大前端技术实践 立即下载
    前端代码是怎样智能生成的 立即下载