tongchenkeji 发表于:2023-7-11 19:15:320次点击 已关注取消关注 关注 私信 请问下前端怎么在Serverless应用引擎上发布呢?有没有整体的操作文档或者演示视频?[阿里云Serverless] 暂停朗读为您朗读 请问下前端怎么在Serverless应用引擎上发布呢?有没有整体的操作文档或者演示视频? 「点点赞赏,手留余香」 赞赏 还没有人赞赏,快来当第一个赞赏的人吧! 海报 Serverless 应用引擎# Serverless2886# Serverless 应用引擎556# 前端开发192
算精通AM 2023-11-28 2:46:46 1 静态文件部署适用于纯静态的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方式构建前端容器镜像
Star时光AM 2023-11-28 2:46:46 2 在Serverless应用引擎(SAE)上发布前端应用主要涉及以下步骤: 准备前端项目:确保您的前端项目已经完成并可以在本地正常运行。这包括HTML、CSS、JavaScript等文件以及任何依赖项。 创建SAE应用:登录到阿里云控制台,进入SAE服务页面,并创建一个新的应用。在创建应用时,选择适当的应用模板和计算资源配置。 上传前端文件:在应用创建后,进入应用的详情页,点击“部署”按钮。在弹出的部署页面中,选择“手动部署”,然后将前端项目的静态文件上传至部署包中。 配置路由规则:在部署页面中,您可以设置路由规则来指定前端应用的访问路径。根据需要进行配置,例如将所有请求都转发到index.html文件,以支持单页应用程序的前端路由。 部署应用:配置完毕后,点击“部署”按钮,SAE会根据您的配置启动实例并部署前端应用。
圆不溜秋的小猫猫AM 2023-11-28 2:46:46 3 对于前端项目,您可以以镜像的形式部署到SAE,比如镜像中包含一个nginx,其中的静态资源有两种处理方式: 静态资源可以直接打到镜像中,这种模式缺点在于每次变更需要重新发版,优点在于可以完全使用SAE的发版、灰度、回滚等机制静态资源放到NAS或者OSS,再挂载到nginx镜像的容器中,这种模式优点在于不需要经常重启容器,缺点是没有版本控制 具体采用哪种模式可以视您的发版频率和流水线适配的简易程度而定。此回答整理自钉群“【3群】Serverless应用引擎(SAE)用户群”
静态文件部署
适用于纯静态的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方式构建前端容器镜像
在Serverless应用引擎(SAE)上发布前端应用主要涉及以下步骤:
准备前端项目:确保您的前端项目已经完成并可以在本地正常运行。这包括HTML、CSS、JavaScript等文件以及任何依赖项。
创建SAE应用:登录到阿里云控制台,进入SAE服务页面,并创建一个新的应用。在创建应用时,选择适当的应用模板和计算资源配置。
上传前端文件:在应用创建后,进入应用的详情页,点击“部署”按钮。在弹出的部署页面中,选择“手动部署”,然后将前端项目的静态文件上传至部署包中。
配置路由规则:在部署页面中,您可以设置路由规则来指定前端应用的访问路径。根据需要进行配置,例如将所有请求都转发到index.html文件,以支持单页应用程序的前端路由。
部署应用:配置完毕后,点击“部署”按钮,SAE会根据您的配置启动实例并部署前端应用。
对于前端项目,您可以以镜像的形式部署到SAE,比如镜像中包含一个nginx,其中的静态资源有两种处理方式:
静态资源可以直接打到镜像中,这种模式缺点在于每次变更需要重新发版,优点在于可以完全使用SAE的发版、灰度、回滚等机制
静态资源放到NAS或者OSS,再挂载到nginx镜像的容器中,这种模式优点在于不需要经常重启容器,缺点是没有版本控制
具体采用哪种模式可以视您的发版频率和流水线适配的简易程度而定。此回答整理自钉群“【3群】Serverless应用引擎(SAE)用户群”