阿里云开发web应用实战营第二课：静态网站的全生命周期实战

阿里云开发web应用实战营第二课：静态网站的全生命周期实战

阿里云开发Web应用训练营正式升级为阿里云开发Web应用实战营!此次连续进行5天晚上7点30分直播，还有有奖互动，欲休手把手教大家进行web应用开发!今天，晚上7点30分第2次直播，还有有奖互动，欲休手把手教大家进行一个静态网站的全周期实战，创建、测试、部署、下线删除等。

挑选互动的3位同学送阿里云定制雨伞。

[加油][加油][加油]

阿里云开发web应用实战营报名打卡网址：点击进入活动

课程回顾：阿里云开发Web应用实战营第一课：创建你的第一个web应用程序

今天，阿里云开发web应用程序实战营第二课：静态网站的全生命周期实战

第一步、我们先新建一个空应用

这个步骤在第一课程中就已经介绍过了，我们直接选择解决方案中的“空应用”，然后点击下一步。

这个界面中，我们选择了“产品_香港”，意思是这个产品地区是香港的，这对于没有备案的域名香港地区是可以解析的，方便进行测试或上线，选择香港是最好的，然后应用名称我们取名叫“demo”，应用介绍也取名叫“demo”,然后“下一步”，最后“确定”即可。

这里我们看到“demo”应用已经创建完毕了，可以看到截图所示：

第二步、我们准备开始部署应用程序，点击“开发部署”，进入Cloud IDE的界面。

我们准备通过Cloud IDE开发一个简单的静态页面网站。

我们可以看到DEMO下自动创建了三个文件：.workbench、README.md、serverless.js文件。

.workbench是一个默认配置文件，这个文件千玩不能删除哦!

.workbench文件默认内容：

{

“fcRouteDefault” : [

{“apiUri”:”/*”,

“fcHandler”:”serverless.handler”,

“httpMethod”:”ANY”

}

],

“cicd”: {

“package”: “mkdir zip && rsync -a –exclude node_modules/ –exclude package-lock.json –exclude zip/ . ./zip && cd zip && npm install –production && zip -r ../code.zip ./ -x ‘*.git*’ -x ‘*.zip’ -x ‘.DS_Store’ && cd ../ && rm -rf zip”

}

}

第三步、建一个最简单的html页面，我们点击新建文件，将鼠标移到左侧DEMO项目的右侧，点击新建文件图标，或右侧d出菜单选择“新建文件”，会出现以下截图所示：

我们创建一个“index.html”文件，在index.html文件中输入：hello word，如截图所示：

然后，我们点击左上角进入部署和测试区域，我们进入测试区域，如截图所示：

第四步、我们点击黄色的“测试”按钮，最后会输出我们index.html页面的结果：hello world，同时生成了一条浏览器访问的测试网址，我可以直接看到hello word的预览内容，如图所示：

第五步、我们来上传自己的网站模板。

接下来，我们将自己准备的“moban4603.zip”文件解压出来，这个文件在：https://github.com/royalrover/demo 下载。

如果通过网站直接下载压缩包可能会损坏，我们可以通过CMD命令下载这文件。

打开CMD，输入：D 回车，然后输入：git clone https://github.com/royalrover/demo.git 回车，截图所示：

然后，moban4603.zip文件会下载到D盘的demo目录下，我们解压“moban4603.zip”文件，将里面的文件直接覆盖即可。

我们进入部署界面，点击“部署”，我们看到部署成功的信息。

最后，我们打开测试网址，或者打开预览模式，我们看到上面显示已经网站部署成功了。