云服务器网:购买云服务器和VPS必上的网站!

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

阿里云开发Web应用训练营正式升级为阿里云开发Web应用实战营!此次连续进行5天晚上7点30分直播,还有有奖互…

阿里云小站:领取限量云产品优惠

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

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

本文固定链接:http://www.yuntue.com/post/11551.html | 云服务器 ,转载请注明出处!

关于作者: yuntue

云服务器(www.yuntue.com)是一家专门做阿里云服务器代金券、腾讯云服务器优惠券的网站,这里你可以找到阿里云服务器腾讯云服务器等国内主流云服务器优惠价格,以及海外云服务器、vps主机等优惠信息,我们会为你提供性价比最高的云服务器和域名、数据库、CDN、免费邮箱等企业常用互联网资源。

为您推荐

发表评论

邮箱地址不会被公开。 必填项已用*标注

1条评论