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

2021年4月30日09:25:58 发表评论 437

阿里云开发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项目的右侧,点击新建文件图标,或右侧弹出菜单选择“新建文件”,会出现以下截图所示:

我们创建一个“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”文件,将里面的文件直接覆盖即可。我们进入部署界面,点击“部署”,我们看到部署成功的信息。

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

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

来源链接:https://www.vpssz.com/

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

郑重声明:VPS主机评测仅提供资料收集及VPS云主机信息推介,不提供任何VPS云主机及代购业务!