最近被vue+koa项目逼疯了，坑多多！！！先详细介绍下部署步骤，再总结一个闭坑攻略~忙完这段时间，把项目做成视频课程。一、项目介绍本项目是采用vue+koa开发的前后端分离的手机商城项目。首先贴出项目目录。我们主要部署dist和server这两个文件夹。2、部署前文件的处理（1）修改config/index.js文件将build中的assetsPublicPath路径改为./，否则生成的dist文件无法加载js、css、img等静态文件build：{//需要修改的地方assetsPublicPath:'./',(2)修改请求后端的url在本地开发项目，后端的url一般使用http://localhost:3000。部署上线后，需要将此url替换为真实域名。我在src/config.js文件中统一定义跟随的端口跟后端server/app.js中的监听端口app.listen(3000)一致//需要修改的部分consthost='http://yourdomain.com:3000'constconfig={host}exportdefaultconfig(3)在项目文件夹下运行npmrunbuild生成dist文件夹~/xbapp$npmrunbuild生成的dist文件夹目录。我们在本地打开dist/index.html文件，测试一下样式是否可以正常显示。(4)修改数据库信息。如果后端有操作数据库，还需要修改数据库名和数据库密码3.可以用git或者scp将项目上传到云服务器。我上传到/mnt/xbapp目录下。上传git的时候有一点要注意。忽略上传，我们需要删除.gitigonre文件中的dist/.DS_Storedist///需要删除npm-debug.log*yarn-debug.log*yarn-error.log*git程序员都知道，所以我不会'不多说了，之前写过一篇关于git部署项目的文章，大家可以在项目上线学习——git部署项目。接下来开始对云服务器进行操作。4、koa配置及测试（1）安装koa插件koa需要node环境的支持。如果云服务器没有node环境，需要安装node节点环境安装参考文章。接下来我们安装koa插件#打开server文件夹cd/mnt/xbapp/server#删除node_modules文件夹和package-lock.json文件rm-rnode_modulesrmpackage-lock.json#安装插件npminstall#打开项目npmrundevnpminstall时，可能会报错，比如报错letnotifier=require('update-notifier')({pkg})，大部分报错是因为节点版本太低，可以更新node版本，参考文章：linux环境升级node版本（二）测试运行成功npmrundev后，并不代表koa已经配置成功。在浏览器输入域名+koa开放的端口，顺利返回koa2，说明后台已经部署OK了。(3)可能的错误当然有，成功见你在实现上面的效果之前，可能会遇到很多错误。如果npmrundev成功，域名+端口请求仍然显示连接超时。说几个解决思路：ping域名看是不是域名问题pingyourdomain.com不是域名问题。使用telnet查看端口。如果域名没有问题，一般问题出在端口上。telnetyourdomain.com3000端口出现问题的原因有很多，只能根据自己的情况解决。我用的是阿里云服务器。端口请求超时的原因是安全组没有开启3000端口。只需添加它。添加端口参考文章：在安全组中添加授权端口5.配置nginxNginx是一个web代理服务器，将浏览器请求转发给服务器。一般项目上安装的nginx在/etc/nginx文件夹下。看看里面的nginx.conf文件。可以查到这两句，意思是nginx的配置会参考/etc/nginx/conf.d/文件夹下以.conf结尾的文件和/etc/nginx/sites-enabled/文件夹下的所有文件包括/etc/nginx/conf.d/*.conf；包括/etc/nginx/sites-enabled/*;所以我们可以在这两个文件夹下配置，我比较习惯在conf.d文件夹下#打开conf.d文件夹cd/etc/nginx/conf.d#Createa.conffiletouchxbapp.conf#Open刚刚创建的文件vimxbapp.conf在xbapp.conf文件中粘贴以下代码，upstreamkoa.server{serverlocalhost:3000;}server{listen80;server_nameyourdomain.com;#这里换成自己的域名root/mnt/xbapp/dist;#修改为自己的文件夹路径，index页面在dist文件夹下，所以指向dist文件夹位置/{indexindex.htmlindex.htm;}}配置完成后，输入nginx-t查看nginx配置是否成功。如果成功，会显示如下这两条语句$nginx-tnginx:配置文件/etc/nginx/nginx.conf语法是oknginx:配置文件/etc/nginx/nginx.conf测试成功Restartnginxservicenginxrestart现在打开域名，应该可以正常显示项目页面就起来了，最后我们安装pm2这个进程管理器，帮助koa后台进程长时间打开6.安装pm2并启动项目//Installpm2~$npm安装pm2--global//检查是否安装成功~$pm2-v//进入项目目录~$cd/mnt/xbapp/server///启动项目/mnt/xbapp/server/$pm2startapp.js//启动成功返回信息[PM2]Starting/mnt/truth_hold/server/app.jsinfork_mode(1instance)[PM2]Done.┌────┬────────────────────────┬────────────┬──────┬────────────┬──────────────────────────────────┐│id│name│mode│?│status│cpu│memory│├────┼──────────────────────┼──────────────┼────────┼─────────────────────────────────────────────────────────────────────────────────────────┤│0│app│fork│0│在线│0%│25.8mb└──────┴───────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘┘┘┘┘成功~~
