基于EC2打造一个自己的音乐播放器

基于EC2打造一个自己的音乐播放器
前言
播放器开发
选择技术
项目的创建
代码的开发
播放器部署
最后

前言

我挺喜欢听歌的，有空的时候，就听一些轻音乐，来放松一下自我。在日常紧张、繁忙的工作之余，听一下轻音乐，可以起到非常好的放松效果。
我一般听轻音乐，都是去到一些网络上的音乐平台，比如QQ音乐、网易云音乐等平台，去听轻音乐的。在这些音乐平台上，由于平台大，资源还是挺丰富的。大部分我想要听的音乐，在上面，都是可以找的到的。
有一天，我在听着轻音乐的时候，突然脑子里产生了一个想法：我何不自己打造一个音乐播放器？
我个人比较喜欢听音乐，同时我也是一名程序员，完全可以利用自己的编程技术，打造一个自己的音乐播放器。
这就是我的灵感来源，打造一个自己的音乐播放器。

播放器开发

选择技术

开发这个音乐播放器，我打算使用vue技术栈来写了。我平时工作时，主要是使用vue的。所以这个项目，前端部分，我就使用vue来写了。

项目的创建

我们使用vue官方的脚手架vue-cli来创建项目
在cmd里面，输入下面命令

vue create myPlayer

按照提示，一步一步选择就可以了。
选择完项目配置之后，就开始安装依赖。安装依赖，需要等待一会时间。毕竟要用挺多的依赖，需要一点时间去安装。

代码的开发

这个音乐播放器，我就当做一个模块去开发就好了。毕竟里面的内容不是很多，界面我也做的不是很复杂。设计的比较简洁吧，开发时也比较方便。
开发时，我是以组件的形式开发。对音乐播放器进行组件拆分：

头部：音乐的封面，音乐播放的控制器。
音乐播放的控制器，是抽取成一个组件，里面有：
音乐播放进度条
音量
单曲循环
底部：底部就是一些歌曲的列表

页面代码

<template>
  <div id="app">
    <div class="container">
      <h3>Myplayer</h3>
      <aplayer
        autoplay
        theme="pic"
        shuffle
        repeat="list"
        show-lrc
        :muted.sync="muted"
        :volume.sync="volume"
        :music="list3[0]"
        :list="list3"
      />
    </div>
  </div>
</template>

首页里面的代码，还是挺简洁的，主要是一个aplayer组件。这是因为我开发的时候，是把音乐播放器抽取成一个组件了。
我们看下音乐播放器的代码

<template>
  <div
    class="aplayer"
    :class="{
      'aplayer-narrow': isMiniMode,
      'aplayer-withlist' : !isMiniMode && musicList.length > 0,
      'aplayer-withlrc': !isMiniMode && (!!$slots.display || shouldShowLrc),
      'aplayer-float': isFloatMode,
      'aplayer-loading': isPlaying && isLoading
    }"
    :style="floatStyleObj"
  >
    <div class="aplayer-body">
      <thumbnail
        :pic="currentMusic.pic"
        :playing="isPlaying"
        :enable-drag="isFloatMode"
        :theme="currentTheme"
        @toggleplay="toggle"
        @dragbegin="onDragBegin"
        @dragging="onDragAround"
      />
      <div class="aplayer-info" v-show="!isMiniMode">
        <div class="aplayer-music">
          <span class="aplayer-title">{{ currentMusic.title || 'Untitled' }}</span>
          <span class="aplayer-author">{{ currentMusic.artist || currentMusic.author || 'Unknown' }}</span>
        </div>
        <slot name="display" :current-music="currentMusic" :play-stat="playStat">
          <lyrics :current-music="currentMusic" :play-stat="playStat" v-if="shouldShowLrc" />
        </slot>
        <controls
          :shuffle="shouldShuffle"
          :repeat="repeatMode"
          :stat="playStat"
          :volume="audioVolume"
          :muted="isAudioMuted"
          :theme="currentTheme"
          @toggleshuffle="shouldShuffle = !shouldShuffle"
          @togglelist="showList = !showList"
          @togglemute="toggleMute"
          @setvolume="setAudioVolume"
          @dragbegin="onProgressDragBegin"
          @dragend="onProgressDragEnd"
          @dragging="onProgressDragging"
          @nextmode="setNextMode"
        />
      </div>
    </div>
    <audio ref="audio"></audio>
    <music-list
      :show="showList && !isMiniMode"
      :current-music="currentMusic"
      :music-list="musicList"
      :play-index="playIndex"
      :listmaxheight="listmaxheight || listMaxHeight"
      :theme="currentTheme"
      @selectsong="onSelectSong"
    />
  </div>
</template>

上面展示的代码，就是我们音乐播放器的代码，你可以参考一下。

播放器部署

前端项目开发好之后，就可以进行服务器部署了。
我们先登录亚马逊云服务器，登录之后，进入到服务器控制台页面。

进入之后，可以看到我们最近访问的内容。我们点击EC2，进入EC2控制台。
进入EC2控制台之后，我们点击启动实例按钮。
点击启动实例，进入到实例创建页面。
下面的操作系统，我选择的是亚马逊的一个linux系统。

还有一些其它配置项，不过这些配置项，我们暂时使用不到，先保持默认即可。
不过注意，有一个密钥对，是必须要配置的。一会实例创建好了，我们需要使用这个密钥对去登录的。

点击创建新密钥对按钮，进行创建密钥对。
整个实例的配置项，都配置好了，我们点击右侧的启动实例按钮，就可以把实例启动了。
实例正在创建

我们等待一会。

实例启动成功了，我们就可以连接实例了。

我们选择EC2 Instance Connect这种连接方式。这种方式是基于浏览器的网页形式，来显示命令行窗口的。
有了命令行窗口，我们就可以在里面输入命令行，执行命令了。
我们进入到命令行窗口了，和实例建立了连接。
关于网站部署，我是采用docker + nginx来进行部署的。nginx是一个轻量化的服务器，用它来部署项目，是非常方便的。
我们先安装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。
安装git，执行命令

sudo yum install git -y

git安装完成，从git仓库拉取代码。

git clone https:xxxxx

把你的仓库代码拉下来之后，进入到你的项目里。
我们通过cd命令，进入你的项目文件夹，通过ls命令查看文件

ls

查看之后，我们的打包文件，都下载下来了。
我们在仓库项目里，需要添加一个dockerfile文件。docker会根据dockerfile文件，来构建我们的镜像。
dockerfile文件里，我会使用到nginx这个镜像来构建。
在仓库里面，我还对nginx的配置文件进行配置。一会nginx启动时，会使用到这个配置文件。
dockerfile文件有了，nginx的配置文件也有了。接下来，我们就可以构建镜像了。
我们在控制台里，执行下面命令

docker build -t myplayer .

我们解释一下这行命令：docker将使用文件夹下的Dockerfile文件，来构建镜像，-t后面，是给这个构建的镜像起一个名字：myplayer。翻译成中文，就是我的播放器。
执行之后，就开始构建镜像了。
等待一会，镜像就构建好了，可以进行下一步了。
镜像已经构建好了，我们就可以在容器里，运行这个镜像了。
在控制台里，执行下面命令