最近研究nuxt服务端渲染的时候,看到nuxt的几种部署方式,由于nuxt打包的静态文件能够直接放在GitHub上面,而后 TravisCI跟GitHub又很亲切,就选择了TravisCI部署。而后就走上了研究TravisCI的不归路。html
在研究nuxt的这一篇文章 《如何部署至GitHub Pages?》的时候,全部操做都按照文章提示来,发现怎么部署都失败,而后仔细看本身页面资源引用的路径,并无实现文章中的router base 的路径配置。前端
router: { base: '/<repository-name>/' }
而后本身反复上传验证,终于发现问题。在官网给出的TravisCI配置中:node
language: node_js node_js: - "8" cache: directories: - "node_modules" branches: only: - master install: - npm install - npm run generate # 这个须要改成npm run generate:gh-pages script: - echo "Skipping tests" deploy: provider: pages skip-cleanup: true github-token: $GITHUB_ACCESS_TOKEN # Set in travis-ci.org dashboard, marked secure https://docs.travis-ci.com/user/deployment/pages/#Setting-the-GitHub-token target-branch: gh-pages local-dir: dist on: branch: master
须要把install中的 npm run generate
改成npm run generate:gh-pages
,这样就能够走gh-page分支的打包了。不知道是否是还有别的解决方法,刚接触也不是特别了解。nginx
能够参考这篇文章Travis CI 自动化部署博客git
搞完GitHub Pages静态部署,而后就想部署服务端,毕竟接触nuxt的目的就是实现服务端渲染。
而后找了一个比较坑的文章... 每次Travis部署后,都要求输入一个密码。卡在了免密登陆的地方卡了好久好久... 在此多谢 @X1nFLY 的帮忙,很耐心的帮我解决了问题。github
其实免密登陆跟trvais并无什么关系,原理就是私钥公钥的加密解密(有兴趣能够自行去搜索),只要你本地 ssh链接实现免密登陆,那Travis部署也能够的。npm
须要在终端输入:json
ssh-copy-id username@your-server-ip
ssh-copy-id 将本机的公钥复制到远程机器的authorized_keys文件中,ssh-copy-id也能让你有到远程机器的home, ~./ssh , 和 ~/.ssh/authorized_keys的权利,这时候只要你终端输入:segmentfault
ssh username@your-server-ip
再次链接就不用再输入密码啦~服务器
下面到了最关键的时刻,部署成功后after_success:
怎么处理?
对于一个前端(没怎么接触事后台)来讲,确实一脸懵逼,要操做 一些经常使用Linux命令。
下面我就总结几个我碰到的:
由于nuxt静态资源是打包到 /dist 文件夹下的,因此咱们只须要把/dist文件夹 拷贝到服务端对应的文件夹便可。
after_success: - rsync -az --delete ./dist/* root@123.123.123.123:/data/html/nuxt # copy dist文件夹下的全部文件
打包对应文件夹是.nuxt 文件,可是须要服务端启动服务,因此须要安装各类依赖以及启动配置。
因此须要将 .nuxt
nuxt.config.js
package.json
static
文件或文件夹都拷贝到服务器上,并对其安装依赖,启动服务。
after_success: - rsync -az --delete .nuxt nuxt.config.js package.json root@123.123.123.123:/data/ssr - ssh root@123.123.123.123 'cd /data/ssr/ && npm install && npm run prd'
npm run prd
采用pm2启动服务,保证服务关闭终端也能够运行。
个人package.json
文件配置:
"scripts": { "prd": "pm2 restart ssr || pm2 start npm --watch --name ssr -- run start", },
对于须要拉取远程代码的工程,如今服务器 git init
初始化,而后指定远程分支,绑定默认分支,就能够直接在ci里 git pull
代码了。
after_success: - ssh root@123.123.123.123 'cd /data/node/ && git pull && npm install && npm run prd'
package.json
文件 npm run prd
配置:
"scripts": { "prd": "pm2 start bin/www", },
npm command not found
.这个很奇怪,本身ssh登陆服务器的时候,直接 npm -v
是能够直接打印出来版本信息的。
可是CI 自动部署的时候就找不到命令,本身也不是特别清楚这环境配置这方面的东西,只好采用指定npm变量的方法。export PATH=/root/nvm/versions/node/v10.15.1/bin:$PATH
采用你当前服务器安装的版本,能够去对应目录看下。
after_success: - ssh root@123.123.123.123 'cd /data/node/ && git pull && export PATH=/root/nvm/versions/node/v10.15.1/bin:$PATH && npm install && npm run prd'
部署成功后,发现打开页面并无效果。
首先要配置好 nginx 转发,而后须要在阿里云平台,打开你的服务器信息,找到防火墙,开启对应的端口就能够访问啦。