一次前后端分离项目部署实践

2018-06-15 admin

警报:本文纯新手向,大牛请出门右转,或者轻喷 😄

前一阵子在阿里云上弄来了一个月的轻量应用服务器,尴尬的是,好不容易把备案搞完,服务器这会又到期了。。。于是这次买了一个学生版一年的 ECS ,在经过相同的配置工作后,终于可以开始真正进行项目部署了。

待部署项目介绍

简单说来待部署的项目就是一个 todolist ,项目内容和逻辑很简单,但是因为是我的第一个前后端独立完成的项目,所以开发起来还是有点费劲的,项目前端采用的是 Vue + Element 框架,后端采用的 Koa2,数据库使用的是 mongodb,可以说是对前端学习者来说相对友好的技术栈了。

附上项目仓库 vue-koa-demo(喜欢就去点个 star 哈哈哈)

关于跨域

在项目开发过程时,前端运行在 localhost:8080,后端运行在 localhost:5858 ,这就存在跨域问题,一般来说跨域有两种解决方案,一个是在服务器端加上跨域资源共享(CORS)的请求头,另一个就是通过 webpack-dev-server 提供的代理来帮我们做映射,这样就可以把跨域请求映射为同域请求了。在项目中我采用的是第二种方案,因为这种方案非常简单,只需要对 webpack-dev-server 的配置进行几行改动即可完成目标(但是开发时发现这个方法有的时候会不太稳定 -_-||)。

proxyTable

这段代码的意思就是把 axios 原来的请求相对路径 http://localhost:8080/api 映射到服务器端的 http://localhost:5858

部署方案

由于我们是采用的 webpack-dev-server 配置的方式解决的跨域问题,但是在生产环境下就没有 webpack 为我们做这一层映射了,所以在生产环境中,我们需要用 Koa 来托管由 webpack 打包出来的静态资源,这样前端 axios 请求的相对路径就和服务器是同域的了,不存在跨域的问题了。

托管静态文件,可以使用 koa-static 完成,其中 public 中的内容就是 webpack 打包出来的 dist 文件夹下的内容。

// app.js
app.use(require('koa-static')(path.join(__dirname, 'public')))

服务器端部署环境

接下来就要弄一下服务器端的部署环境了,在之前的博客里,已经把 Node 环境配置完成了,接下来就要安装一下一些必要的工具了,完成部署环境了(额这次并没有用到 Docker 什么的,因为是第一次试探性地,以后可以详细学习一下)。

mongodb 数据库的安装与简单配置

关于 CentOS 下数据库的安装,参考官网流程就行了,我感觉说的很详细了,安装的时候也没啥坑。

安装成功后,启动数据库 sudo service mongod start ,默认情况下 mongodb 是不需要输入用户名密码的,所以在终端下,连接数据库 mongo ,连接成功后,我们就需要建立一些用户角色了

1.建立一个用于账号管理的用户

use admin                // 切换到 admin 数据库
db.createUser({        // 创建一个用户
    user: 'yourUserName',        // 管理员用户名
    pwd: 'yourPassWord',        // 密码
    roles: [
        {
            role: 'userAdminAnyDatabase',    // 用户角色,允许所有数据库的 userAdmin 权限,可管理所有数据库的管理用户
            db: 'admin'            // 指定数据库
        }
    ]
})
db.auth('yourUserName', 'yourPassWord')    // 用户验证,返回 1 说明验证成功

2.建立一个用于项目数据库管理的用户

use vue_koa_todos        // 切换到项目数据库
db.createUser({
    user: 'yourProjectUserName',    // 数据库管理员用户名
    pwd: 'yourProjectPassWord',        // 密码
    roles: [
        {
            role: 'readWrite',        // 用户角色,允许读写指定数据库
            db: 'vue_koa_todos'        // 指定数据库
        }
    ]
})
db.auth('yourProjectUserName', 'yourProjectPassWord')    // 用户验证,返回 1 说明验证成功

建议把这些账号密码都存起来,省着忘了。。。

建立账号之后还没完,需要更改一下配置文件,默认情况下,配置文件在 /etc/mongod.conf ,之后在 vi 编辑器下修改配置文件,找到这两行,改成如下所示,保存并退出后,重启一下数据库 sudo service mongod restart,数据库的验证就开启了,这时候如果要查看或者操作数据库,就需要输入用户名和密码了。

security:
    authorization: 'enabled'

1.在登录数据库的时候,需要先指定数据库名比如 use vue_koa_todos ,再进行 db.auth 验证

2.用 admin 下建立的那个用户是登不上 vue_koa_todos 数据库的,别看它的角色是 anydatabase ,它只能操作数据库的用户管理部分

安装一些其他的工具(本地和服务器端都需要安装)

git : yum install -y git

pm2: npm install pm2 -g

这里服务器端需要配置一下对 github 的 ssh 秘钥,便于部署后自动拉取代码

对本地代码进行调整

1.部署前需要把之前连接本地数据库的代码改一下

// server/routes/index.js
// 本地开发的时候,数据库链接是直接连的
mongoose.connect('mongodb://127.0.0.1:27017/vue_koa_todos')

// 上线后因为有用户名和密码,所以要改动一下
mongoose.connect('mongodb://username:userpwd@127.0.0.1:27017/vue_koa_todos')

数据库连接格式:

mongodb://用户名:密码@服务器主机地址:mongodb运行端口/要连接的数据库名称

2.项目 package.json 文件中的 git 字段要和 github 中的 git 地址关联上

到这里我们的环境已经基本搞定了,接下来就是部署了。

利用 pm2 进行一键部署

打开终端进入项目根路径,执行 pm2 init 会得到一份 ecosystem.config.js 这里就是我们的部署配置文件了,需要做一些改动

pm2

post-deploy 中是发布后执行的一些命令,主要在 run.sh

deploy

1.为了避免因为服务器端登录密码验证而导致部署失败,建议配置一下 ssh 登录,或者在 production 中加入 "ssh_options": "StrictHostKeyChecking=no"

2.post-deploy 中的 git pull 其实是可以不用加的,但是我在实际操作时候,发现不加的话,本地每次更新代码的时候,服务器端并不会自动拉去新的代码,在网上查了一下说是和版本有关也和服务器有关。。。所以这里只能强加一个 git pull 命令,保证更新了

3.使用淘宝镜像安装是因为项目中用到了 node-sass 依赖,如果不用的话会偶尔出现部署失败的情况

配置文件改好后,我们在本地终端执行命令 pm2 deploy ecosystem.config.js production setup 进行项目初始化

执行后,如果成功的话会发现服务器端的指定目录下 /home/breezymelon/vue-koa-demo 多出了几个文件夹,其中 source 文件目录下就是我们的源代码了,服务器自动去 github 拉取的结果。

dir

之后再执行发布命令 pm2 deploy ecosystem.config.js production 就可以等待部署了。

deployOk

当我们在本地对代码有新的 push 后,再次执行 pm2 deploy ecosystem.config.js production 即可完成部署更新。

在服务器上执行 pm2 list 可以观察到项目已经正常运行了!如果不能正常运行的话 pm2 log 查看一下日志信息,一般都是数据库连接错了,不会出现什么大问题。

pm2list

配置 Nginx 实现网页访问

sudo vi /etc/nginx/conf.d 新建一个如下的配置文件

todoconf

保存退出后 sudo nginx -t && sudo service nginx restart

就可以在浏览器看见自己的项目了!

todoPage

总结

从本地开发前后端,到买服务器域名备案再到配置环境最后到部署,大概历时一个月了,终于看见完全由自己搞的第一个上线的项目了。虽然项目很简单,而且上线的配置也很初级,更不用说优化了,但是对于一个新手来说来说有了这份体验还是很不错的~学习的路还很长,这次实践也意识到了一个项目从无到有需要的掌握的知识真的很多,也体验到了作为学生来说切实可行的学习路线应该是首先做到对前端的专注,之后再慢慢一点一点积累服务端知识吧。不慌慢慢学,心急一事无成。

这篇文章到这就结束啦,我感觉说的挺详(mo)细(ji)的了,如果对和我一样的新手玩家有所帮助的话就最好不过了!!!

最后附上原文链接吧~

原文链接:https://segmentfault.com/a/1190000015294001

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34087.html

文章标题:一次前后端分离项目部署实践

相关文章
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
移动端网页设计经验与心得
智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上。 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝、黑、白,界面单调,并且要尽可能的设计简单。 现在情况就大不相同了,软件上we...
2015-12-23
Node.js将向移动端扩展
如果你还没有听过Node.js,那么现在就可以了解一下! 目前,来自200多个国家的数以万计的组织在使用Node.js,在Node.js的网站上,每月都有超过200万次下载。但版本发布缓慢使开发人员日益不满,网上出现了创建Node.js分支...
2015-11-12
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
大家在做些页面的时候,很多都是用ajax实现的,在显示的时候有很多表单提交的add或者update操作,显然这样很烦,突然想到了一个比较好的方法,下面给大家分享下如何用js 实现依赖注入的思想,后端框架思想搬到前端来。 应用场景: 前后端一...
2017-03-29
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
下面通过文字说明和代码分析的方式给大家分享移动端图片上传之localResizeIMG先压缩后ajax无刷新上传,具体实现过程请看下文。 现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动...
2017-03-29
为什么 JavaScript 会在移动端中胜出?
JavaScript并不是世界上最优美的编程语言。正因如此,一个世界级的专家写了一本关于这个语言的“精粹 ”的书。这本书的名字是“深度挖掘javascript的亮点”,因为优秀的东西被埋的相当深。即便如此,它还是迅速地称为世界上最受欢迎的语...
2015-12-25
回到顶部