亚马逊云科技云上探索实验室活动征文｜基于vue来开发一个网易云音乐网站
授权声明：本篇文章授权活动官方亚马逊云科技文章转发、改写权，包括不限于在 Developer Centre, 知乎，自媒体平台，第三方开发者媒体等亚马逊云科技官方渠道
前言
我是一个音乐爱好者，平时挺喜欢听一些音乐或者歌曲的。我平时都会去到哪里去听音乐呢？
我一般会去到网易云音乐网站去听音乐、歌曲。
可能有人不了解网易云音乐，我们看一下网易云音乐的介绍
网易云音乐（NetEase CloudMusic），是一款由网易开发的音乐产品，是网易杭州研究院的成果，依托专业音乐人、DJ、好友推荐及社交功能，在线音乐服务主打歌单、社交、大牌推荐和音乐指纹，以歌单、DJ节目、社交、地理位置为核心要素，主打发现和分享。
从网易云音乐的介绍，我们就可以知道，网易云音乐，是一个专业的音乐网站。同时它投入了大量的资源，购买了许多的音乐、歌曲的版权。所以它上面的音乐、歌曲，还是挺全面的。大部分音乐、歌曲，我们都可以在上面听到。
我使用网易云音乐有挺长的时间了，使用了这么久，对网易云产生了感情。我就想着，要不我自己防制一个网易云音乐网站好了。算是表达对它的一个敬意吧。
下面就介绍一下开发一个网易云音乐网站。
网站开发
项目搭建
我们先创建项目吧。
创建项目，我是使用了vue官方推荐的脚手架vue cli来创建的。vue cli是vue官方推出的脚手架，还是挺不错的。
在cmd里输入下面命令
vue create wyy
这里我给项目起的名字是wyy，它是网易云的首字母缩写。当然，你也可以自己起一个其它的名字。
我们按照提示，一步一步选择，进行确认。
最好，开始创建项目。项目使用到依赖，也开始下载。
等待一会，依赖下载好，项目就创建完成了。
我们接着引入一个ui组件库。ui组件库，在这个项目了，我是使用了element ui这个组件库。
在cmd里，输入命令
npm install element-ui -S
确认后，开始下载element-ui。等待一会，element-ui就下载好了。
项目开发
网站主要有这几个模块：
- 首页
- 推荐
- 我的音乐
- 创建歌单
- 收藏的歌单
主要有这几个模块，里面有些模块，还细分了几个小的模块。
首页模块的代码：
<el-container>
<!--侧边栏-->
<el-aside width="210px">
<el-menu default-active="/findMusic" :router="true">
<el-menu-item-group>
<template slot="title">推荐</template>
<el-menu-item index="/findMusic">发现音乐</el-menu-item>
<el-menu-item index="/video">视频</el-menu-item>
</el-menu-item-group>
<el-menu-item-group>
<template slot="title">我的音乐</template>
<el-menu-item index="/cloudMusic">我的音乐云盘</el-menu-item>
</el-menu-item-group>
<el-menu-item-group>
<template slot="title">创建的歌单</template>
<el-menu-item :index="'/songlist/'+item.id" @click="changePlaylistId(item.id)"
v-for="(item,index) in currentUserPlayList" :key="index"
v-if="!item.subscribed">{{item.name}}
</el-menu-item>
</el-menu-item-group>
<el-menu-item-group>
<template slot="title">收藏的歌单</template>
<el-menu-item :index="'/songlist/'+item.id" @click="changePlaylistId(item.id)"
v-for="(item,index) in currentUserPlayList" :key="index"
v-if="item.subscribed">{{item.name}}
</el-menu-item>
</el-menu-item-group>
</el-menu>
</el-aside>
<el-container>
<el-main>
<router-view ref="child" @setMusicUrl="setMusicUrl" :musicDuration="musicDuration"
@refreshPrivatePlaylist="getUserPrivatePlayList"
:isPlay="isPlay" :curId="curId" @setSongListInfo="setSongListInfo"></router-view>
</el-main>
</el-container>
</el-container>
这是我对首页布局部分的代码
这是我们的页面布局效果。上面红框框出的部分，就是我们的首页布局。布局方式，我主要采用了两侧布局。一个比较经典的布局方式，左侧是它的菜单栏，右侧是主体内容展示。
布局已经设计好了，剩下的就是往里面填充内容了。这一部分我想交给你去完成，你可以自己到网易云音乐网站上面，参考一下它的页面。
等待网站开发好，接着进入到网站的部署阶段。
服务器部署
服务器
前端项目开发好之后，就可以进行服务器部署了。
要进行服务器部署，首先你得有服务器。随着云服务的推广和普及，现在，我们可以非常方便地就拥有一台云服务器了。
云服务器的厂商有很多，这里我选择了亚马逊云服务器。亚马逊云服务器是亚马逊公司推出的云服务器，大公司推出来的产品，我相信它。
进入服务器
好了，介绍这么多，我们开始到服务器里，部署项目吧。
登录亚马逊云服务器后，进入服务器控制台页面。我们在顶部搜索栏里，搜索EC2。
我们可以查看到搜索结果，点击EC2，进入EC2的控制台页面。
进入EC2控制台之后，我们点击启动实例按钮。
点击启动实例，进入到实例创建页面
这里，我给实例起了一个名字，叫做myserser。当然，你可以自己起一个别的名字。
下面的操作系统，我选择的是亚马逊的一个linux系统。
对，没错，服务器里我使用的是linux系统。如果你对linux系统不熟悉的话，也可以安装其它系统，比如windows系统。
关于安装其它系统，这里就不介绍了。
下面还有一些其它配置项
不过这些配置项，我们暂时使用不到，先保持默认即可。如果后面想要修改，还是可以修改的。
不过注意，有一个密钥对，是必须要配置的。一会实例创建好了，我们需要使用这个密钥对去登录的。
点击创建新密钥对按钮
这里我给密钥对命名为myserver，和我实例名字一样，方便记忆。
点击创建密钥对，密钥对就创建好了。
整个实例的配置项，都配置好了，我们点击右侧的启动实例按钮，就可以把实例启动了。
实例正在创建，需要我们等待一会。
等待一会，实例就创建好了。
实例启动成功了，我们就可以连接实例了，点击中间的连接到实例按钮。
我们选择第一种方式就好了，它是基于浏览器的网页形式，显示命令行窗口的。有了命令行窗口，我们就可以在里面输入命令行，执行命令了。
我们进入到命令行窗口了，和实例建立了连接
网站部署，我是打算使用docker来进行部署的。最近在学习docker，正好可以使用docker来进行部署这个星座运势网站。
我是使用node起一个服务，然后把我们的打包文件，丢到这个服务里。这样，我们的网站就可以访问了。不过这个node服务，是放到docker里面启动的。
我们先安装docker。
我们在控制台里，执行下面命令
sudo yum install yum-utils device-mapper-persistent-data lvm2
配置docker的镜像源
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
然后安装docker
sudo yum install docker
等待一会，docker就安装好了。docker安装好之后，我们还需要安装其它工具–git。
执行命令
sudo yum install git -y
之所以要安装git，是因为一会我们要从git仓库上，把代码拉下来。
等待一会，git就安装好了。
我们可以看到，在亚马逊云服务器里，安装这些工具，还是挺快的。
从git仓库拉取代码
git clone https:xxxxx
把你的仓库代码拉下来之后，进入到你的项目里。
我们通过cd命令，进入你的项目文件夹，通过ls命令查看文件
ls
查看之后，我们的打包文件，都下载下来了。
我们在仓库项目里，已经添加了dockerfile文件。有了dockerfile这个文件，docker就可以根据这个文件，来构建我们的镜像。
我们在控制台里，执行下面命令
docker build node.Dockerfile -t wyy.
我们解释一下这行命令：docker使用node.Dockerfile文件，来构建镜像，-t后面，是给这个构建的镜像起一个名字。
执行之后，就开始构建镜像了。
等待一会，镜像就构建好了，可以进行下一步了。
镜像已经构建好了，我们就可以在容器里，运行这个镜像了。
在控制台里，执行下面命令
docker run -rm -p 80:80 wyy
这句命令的意思是，使用docker，启动wyy这个镜像。-rm，表示当容器停止时，自动删除容器。-p后面，是docker把容器里的端口暴露给宿主机端口。最后一个wyy，是我们刚才构建的镜像名字。
执行命令之后，docker使用wyy镜像启动容器。
由于我们是使用80端口的，而实例的安全组里面，80端口是默认就放开的。
这样，我们就不用配置实例的安全组，网站也能够访问。
在浏览器里，输入我们的公网ip。打开网站不需要携带端口号，因为它的默认端口就是80了。
在浏览器里，就可以看到我们开发的网易云音乐网站了。
浏览一下其它模块
其它模块，也是可以正常访问的。
完结
文章最后，开发一个网易云音乐网站，已经介绍完成了。
看完本篇文章，如果你也想开发一个网易云音乐网站。可以参考一下我的这篇文章，来尝试一下自己开发吧。
扫一扫
6002
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
