1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站

今天来教大家部署一个属于自己的第一个静态网站,因为这里借助小程序云开发的静态服务器资源,所以可以轻松的实现自己网站的部署,部署完以后可以在电脑浏览器,手机浏览器,微信公众号里面展示。

老规矩,先看效果

简单起见,我这里写一个最简单的html静态网页

然后把这个网页部linux是什么操作系统署到云开发静态网站
微信上访问效果如下

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
手机浏览器上访问如下

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
这也就意味着,我们的网站可以供用户在任何地方访问。下面就来教大家如何快速的部署一个属于自己的网系统运维工程师面试问题及答案站。

一,开通云开发

这里开通云开发我们linux重启命令借助小程序开发者工具来实现快速开web是什么意思通。

1-1,注册小程序

这里我就不再多说了,只有注册过构建静态网站小程序的appi网站被禁用如何解决d才可以开通云开发

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
我们注册好小程序后,就可以拿到appid了,如上图

1-2,创建一个小程序项目

小程序项目的创建,我这里不再多说,我前面小程序基础课里有讲过很多遍。《小程序基础学静态网站代码习》

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
这里强调一点,就是创建小程序项目时一定要用我们自己的appid网站被禁用如何解决不要用测试号。linux创建文件

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
如果你一开始是用测试appid创建的,也可以通过上图的方式更换成自己的小程序的appid。

1-3,开通云开发

这里云开发的开通,我就不做过多讲解了,我云开发课程里也讲过很多遍。大家可以去翻看下

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
只需要点击开发者工具里的云开发按钮,跟着提示一步步操作就可以快速开通云开发。

网站部署,开通静态网站功能


                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
我们上面云开发开通系统运维工程好以后,就可系统运维面试题及答案以在这里快速开通静态网站了。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
点击以后,直接点击开通即可

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
这时候开通有个条webqq

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
我们必须按照要求改变自己小程序的付费方式,把我们的付费方式改成按量付费即可。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
这个时候我们的静态网站功能就开通成功了。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
开通成功系统运维工程师以后如下图。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
这个时候我们就可以把我们开发好的静态网页上传到网站供别人访问了。

三,部署网站

我们的静态html如下

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
webex击上传文件,把我们的index网站删了怎么找回来.html文件上传到静态网站

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
这样就代表上传成功了。

访问我们的网站

上面把网页部署成功以后,我们就可以通过云开发为我们创建的默认网址来访问了。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
点击上图所示的详情,就可以拿到访问我们网站的网址如下

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
上图静态网站箭头所示的网址,就是我们网页的访问网址。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
如果你的html是以index命名的,我们使用云开发为我们分配的域名,就可以直接访问我们的网站。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
study-gas4x-1258760189.tcloudbaseapp.com 就webview是云开发为我分配的网站域名,以后用户就可以直接通过这个域名访问我们的网站了。
其实到这里我们就可以成功的部署属于我们自己的网站了,无非就是你网页写的比石头哥再好看些。

但是有些同学觉得官方构建静态网站给分配web浏览器的域系统/运维名太长网站记录怎么打开,不好记,想使用自己的域名。那么我们该如何配置自己的域名呢?

四,部网站vue网站项目

我们上面讲的是一个简单的index.html的部署,我们实际开发中,肯定不会只部署这么一个简单的页面网站免费正能量软件。我们云开发静态网站以当前最主流的vue网站的项目部署为例,来给大家讲讲如何把一个实战项目部署到云开发的静态网站来。

4-1,配置vue项目web是什么意思打包目录

我们要部署vue项目,就要把vue项目打包,关于vue项目的打包,不是本章的重点,网站大家网站你了解的如果要打包部署vue项目,还是希望大家要有些vue基础知识。当然了,石头哥后面也会出v静态网站和动态网站区别ue的相关课程。敬请期待。

我们在打包vue项目之前,需要做下简单的配置。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
在vue.config.js里配置publ网站你了解的icPath和outputDir,当然了outputDir默认就是打包到dist文件夹下。所以重点还是要publicPath系统运维工程师面试问题及答案和我们的打系统运维包括哪些内容包文件名要一致。
这里把完整的vue.config.js贴出来给大家

module.exports = {
// 要部署到二级目录下,就要加上这个,和二级目录名一致
publicPath: 'dist/',
// 输出文件目录
outputDir: 'dist',
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
assetsDir: 'static',
chainWebpack: config => {
// 发布模式
config.when(process.env.NODE_ENV === 'production', config => {
config
.entry('app')
.clear()
.add('./src/main-prod.js')
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})
config.plugin('html').tap(args => {
args[0].isProd = true
return args
})
})
// 开发模式
config.when(process.env.NODE_ENV === 'development', config => {
config
.entry('app')
.clear()
.add('./src/main-dev.js')
config.plugin('html').tap(args => {
args[0].isProd = false
return args
})
})
}
}

4-2,打包vueweb浏览器项目

然后就是build打包

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
打包有点慢,耐心等待即可。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
打包好的文件都会放在dist目录下

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站

4-3,上传部署打包好的vue项目

上面打包好,我们接下来就要部署vue项目了。
部署其实很简单, 就是把打包好的文件直接上websocket传到云开发静态网站即可。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
直接点击确定,等待上传即可

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
等待所有文件上传成功。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
可以看到我们的dist全部上传到了云开发。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站

4-4,配置访问路径

上面上传好以后,我们webstorm接下来就要配置访问路径了

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
然后我们就可以直接通过云开发为我们配置好的域名,直接访问我们的vue网站了。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
是不是用云开发来部署vue网站很方便很简单。省去了服务器和域名的购买。
后面我会出一门vue系列的教程,从vue基础到vue项目的部署上线都有讲,敬请关注“编程小石头”

五,配系统运维面试题及答案置域名(选看)

其实系统运维面试题及答案前面3步就可以成功的部署自己的网站了,如果你有自己的域名,并且也成功的备案了,再来跟着石头哥学习这一节。如果没有自己的域名,那么你就要先去注册自己的webqq域名,linux系统并备案了。所以这一节作为一个选学。

在网站配置里添加自己的域名


                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
如我在linux操作系统基础知识这里webqq点击添加域名,然后添加自己的备案域名。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
但是我们这里要想https来安全访问,就必须配置自己的s系统运维工程师sl证书。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
点完以后,我们这里可以直接申请website是什么意思免费证书。免费证书有效期1年,1年后我们再重新申请新的证书就可linux创建文件以了,所以这里免费的就够用了。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
如实的填写自web前端开发己的静态网站是什么备案域名和其余信息。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
提交完资料,我们这里需要验证下自己的域名,验证方式选择DNS就可以

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
点位DNS验证,我们就需要给我们的域名配置访问的解析web浏览器值了(这里的知识点比较深奥,大家需要自己课下恶补下域名解析的相关知识点)如果不想学习,直接根据提示配置也行。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
配置好网站删了怎么找回来以后,网站删了怎么找回来就可以点击验证先进行验证了

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
验证通过静态网站设计与制作后,可以看到如下

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
云开发控制台也会显示部署中,我们耐心等待部署就可以了。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
启动成功会有如下标识

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
虽然已经启动成功,我们如果想通过自己的域名访问自己的云开发静态网站,还网站建设选亿企网络需要配置下CNAME进行重定向,也就是访问我们域名的时候我们要重定向到云开发给我们分配的域名。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
这里理解起来有点晦涩,官方给的文档也是没有讲明白,我也是试了很多遍才知道是这样配置的。这里都配置好以后,我们就可以直接通过自己的域名访问网站了。

                                            1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
大家也可以去访问下石头哥的云开发静态网站试系统运维面试题及答案一试。

到这里我们的网站部署就讲完了,后面我会用vue写一些炫酷的网站,然后部署到线上供大家观赏。
好了,今天就讲到这里吧,石头哥也要吃午饭了。