授权声明:本篇文章授权活动官方亚马逊云科技文章转发、改写权,包括不限于在 Developer Centre, 知乎,自媒体平台,第三方开发者媒体等亚马逊云科技官方渠道
前言
近段时间,工作上面,开发了一个后台管理系统。后台管理系统已经开发好了,要把它部署到服务器上面,进行部署上线。
关于部署,平常我都是叫后端帮忙部署的。我把前端项目打包好了,交给后端,后端进行部署上线。
我就想着,我能不能自己部署呢?
可以,下面就尝试一下自己部署前端项目吧。
前端项目开发
关于前端项目开发,我是采用了vue2的技术栈来开发的。而项目里要使用到的组件库,我是使用了element ui这个组件库。
这里我使用vue官方的脚手架vue cli,来创建项目。vue cli是vue官方推出的脚手架,我们使用它来创建项目就好了。
我们进入到vue的官网,然后点击学习,进入到文档页面。
点击左侧菜单栏,安装
官方文档里,给出了说明,告诉我们怎么创建项目。我们按照这个说明,去创建项目即可。
在cmd里运行命令
$ npm install vue@^2
运行命令后,按照步骤提示操作即可。
执行完成之后,项目就开始创建。创建同时,也开始下载依赖。
安装的时候,由于需要安装依赖,所以需要等待一会。
项目创建好了,接着,我们引入一下ui组件库。
进入到element ui官网,在组件里,官方文档里,给出了提示,告诉我们怎么引入element ui
在cmd里,输入命令
npm i element-ui -S
安装element ui组件库,需要等待一会,然后安装完成。
安装完成之后,就开始开发项目了。
开发时,我主要分为这几个模块:
- 首页
- 工具类集合
- 菜单嵌套
- 功能
- 页面
- 个人中心
大模块有这几个,里面有些模块,可能会有好几个小的模块。
首页的部分模板代码
<el-row :gutter="15">
<el-col :md="24" :lg="16" :xl="16" class="mb15">
<el-card shadow="hover">
<div slot="header">
<span>{{ $t('message.card.title1') }}</span>
</div>
<div class="user-item">
<div class="user-item-left">
<!-- <img :src="getUserInfos.photo" /> -->
<img src="@/assets/avatar.jpg" />
</div>
<div class="user-item-right overflow">
<el-row>
<el-col :span="24" class="right-title mb15 one-text-overflow"
>{{ currentTime }},{{ getUserInfos.userName }},{{ dailyMessage }}
</el-col>
<el-col :span="24">
<el-col :xs="12" :sm="12" :md="8" class="right-l-v">
<div class="right-label">昵称:</div>
<div class="right-value">{{userInfo.name}}</div>
</el-col>
<el-col :xs="12" :sm="12" :md="16" class="right-l-v">
<div class="right-label">身份:</div>
<div class="right-value">{{ userInfo.userName === 'admin' ? '超级管理' : '普通用户' }}</div>
</el-col>
</el-col>
<el-col :span="24" class="mt5">
<!-- <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
<div class="right-label one-text-overflow">IP:</div>
<div class="right-value one-text-overflow">192.168.1.1</div>
</el-col> -->
<el-col :xs="12" :sm="12" :md="16" class="right-l-v">
<div class="right-label one-text-overflow">时间:</div>
<div class="right-value one-text-overflow">{{ userInfo.time }}</div>
</el-col>
</el-col>
<el-col :span="24" class="mt15">
<el-button size="small" icon="el-icon-edit-outline">修改信息 </el-button>
<el-button size="small" icon="el-icon-position" type="primary">发布活动</el-button>
</el-col>
</el-row>
</div>
</div>
</el-card>
</el-col>
<el-col :md="24" :lg="8" :xl="8" class="mb15">
<el-card shadow="hover">
<div slot="header">
<span>{{ $t('message.card.title2') }}</span>
<el-button class="home-card-more" type="text" @click="onOpenGitee">{{ $t('message.card.title3') }}</el-button>
</div>
<div class="info">
<Scroll :data="newsInfoList" class="info-scroll" :class-option="optionSingleHeight">
<ul class="info-ul">
<li v-for="(v, k) in newsInfoList" :key="k" class="info-item" @click="onNewsInfoListClick(v)">
<div class="info-item-left" v-text="v.title"></div>
<div class="info-item-right" v-text="v.date"></div>
</li>
</ul>
</Scroll>
</div>
</el-card>
</el-col>
</el-row>
我们可以看到,代码还是挺多的。开发的时候,还是需要一些时间来开发的。
等我们开发完前端项目,就可以进入项目部署阶段了。
服务器部署
前端项目开发好之后,就可以进行服务器部署了。
要进行服务器部署,首先你得有服务器。随着云服务的推广和普及,现在,我们可以非常方便地就拥有一台云服务器了。
云服务器的厂商有很多,这里我选择了亚马逊云服务器。亚马逊云服务器是亚马逊公司推出的云服务器,大公司推出来的产品,我相信它。
好了,介绍这么多,我们开始到服务器里,部署项目吧。
登录亚马逊云服务器后,进入服务器控制台页面。我们在顶部搜索栏里,搜索EC2。
我们可以查看到搜索结果,点击EC2,进入EC2的控制台页面。
进入EC2控制台之后,我们点击启动实例按钮。
点击启动实例,进入到实例创建页面
这里,我给实例起了一个名字,叫做myserser。当然,你可以自己起一个别的名字。
下面的操作系统,我选择的是亚马逊的一个linux系统。
对,没错,服务器里我使用的是linux系统。如果你对linux系统不熟悉的话,也可以安装其它系统,比如windows系统。
关于安装其它系统,这里就不介绍了。
下面还有一些其它配置项
不过这些配置项,我们暂时使用不到,先保持默认即可。如果后面想要修改,还是可以修改的。
不过注意,有一个密钥对,是必须要配置的。一会实例创建好了,我们需要使用这个密钥对去登录的。
点击创建新密钥对按钮
这里我给密钥对命名为myserver,和我实例名字一样,方便记忆。
点击创建密钥对,密钥对就创建好了。
整个实例的配置项,都配置好了,我们点击右侧的启动实例按钮,就可以把实例启动了。
实例正在创建
我们等待一会。
实例启动成功了,我们就可以连接实例了,点击中间的连接到实例按钮。
我们选择第一种方式就好了,它是基于浏览器的网页形式,显示命令行窗口的。有了命令行窗口,我们就可以在里面输入命令行,执行命令了。
我们进入到命令行窗口了,和实例建立了连接
在服务器上部署项目,我是打算使用nginx来进行部署的。
要想使用nginx,当然需要先安装nginx了
在安装前,我们先查看一下源里是否有nginx
在控制台执行下面命令
yum list nginx
我们可以查看到nginx的版本信息了,源里面有nginx,我们可以安装nginx了。
在控制台执行下面命令
yum install nginx
等待一会,nginx就安装好了。nginx安装好了,我们还需要安装其它工具–git。
执行命令
sudo yum install git -y
之所以安装git,是因为一会我们要从git仓库,把代码拉下来。
等待一会,git就安装好了。在云服务器里,安装这些工具,还是挺快的。
从git仓库拉取代码
git clone https:xxxxx
把你的仓库代码拉下来之后,进入到你的项目里。
我们通过cd命令,进入你的项目文件夹,通过ls命令查看文件
ls
查看之后,我们的html文件,都下载下来了。不过我们现在是在**~目录下拉取代码的,我们应该在local**目录下拉取代码的。
现在就有两种选择了
- 到local文件夹里,重新从git仓库里拉取代码
- 不用重新拉取代码,把拉取的代码,拷贝到local文件夹里
我就不重新拉取代码了,毕竟已经把代码拉取下来了。我选择第二种方式,把代码拷贝到local文件夹里。
通过cd命令进入到仓库文件夹里,执行下面的命令
cp -r * /local/dist
这个命令的意思是,把当前文件夹里的所有文件,都拷贝到/local/dist目录里,即dist文件夹里。
拷贝完之后,我们就可以启动项目了。不过启动之前,还需要修改一下nginx的配置。
因为我们的静态资源文件,不是放在nginx的html目录下。而nginx启动的时候,默认的静态资源目录是在它的html文件夹的。现在我们的html文件,都是放在/local/dist目录里。
我们需要把nginx的配置文件里的root,修改为我们的html文件所在的目录。
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /local/dist;
index index.html index.htm;
}
修改之后,就可以使用nginx启动了,
在控制台执行命令
systemctl start nginx
等待一会,nginx就启动了。
项目启动了,由于我们是使用80这个端口的。
而在实例的安全组里面,80端口是默认就给放开了。
这里,我们不用配置实例的安全组,网站也能够访问。
在浏览器里,输入我们的公网ip。打开网站不需要携带端口号,因为它的默认端口就是80了。
在浏览器里,我们先是进入到我们后台管理系统的登录页面。
输入账号密码,登录之后
就进入到我们的后台管理系统了。
完结
到这里,部署一个vue制作的后台管理系统,已经介绍完成了。
看完本篇文章,如果你也开发了一个后台管理系统,并且想要把它部署到服务器上面。可以参考一下本篇文章,自己尝试开发部署一下。